Cascading Style Sheets (CSS) can be used to style web pages.
While HTML tells the browser what to display on a page, CSS tells the browser how to display it.
CSS rules can be added to already existing HTML files or can be stored in separate .CSS files and linked to a webpage.
Style sheets follow the syntax of: identifier { property: value }
If there are only a few property changes they can be typed across one line:
body {font-family: Arial Narrow; font-size: 20px; color: yellow; text-align: center; background-color: black }
Since there are multiple properties being formatted, the above style sheet would be better suited to multiple lines.
body {
font-family: Arial Narrow;
font-size: 20px;
color: yellow;
text-align: center;
background-color: black
}
A CSS class selector can be used when you want to reuse characteristics across multiple elements.
These tags don’t all need to be the same as long as the property applies to them - a good example would be the color property.
.black {color: black;}
<h1 class="black"> This H1 heading is black</h1>
An ID selector would be used when you want specific occurrences of a tag to be treated differently from others.
An ID will always over-rule a class or type selector.
#blue {color: blue;}
<h1 id="blue"> This H1 heading is blue</h1>
The term cascading is due to the fact that there can be multiple style rules affecting the presentation of HTML.
And the fact that they cascade and can affect all other pages in a site.
Inline Style
Internal Style Sheet
External Style Sheet
Browser default
Highest Priority at the top, so an External Stylesheet would get over-ridden in the following order:
Internal Style Sheet (if there is one)
Classes
ID’s
Inline Style
When you add a CSS rule(s) in the line of HTML that you want to format.
<h1 style = “color: white; text-align: center”> This is a large heading </h1>
Note that ‘colour’ and ‘centre’ have to use American English spelling.
If you only want to apply CSS rules to one webpage then you might want to keep all of your HTML and CSS code together in the same document.
The CSS rules are placed in the <head> section of the HTML code in the following format:
<head>
<style>
CSS rules
</style>
</head>
When you create a separate CSS file that your HTML file links to. The link to the CSS is placed in the head section of your HTML code:
<head>
<title> this is my webpage </title>
<link rel = “stylesheet” type = “text / css” href = “stylesheetname.css”>
</head>
If you have multiple HTML pages and you want to use the same formatting for all of them then it’s ideal to use an external CSS for the following reasons:
You only have to create one CSS file
If you need to make any changes, you only have to edit the one CSS file
When you update the CSS file the changes are applied to all connected HTML pages at once
When using CSS, a developer can alter the values stored for properties of an element. The properties that you need to be able to alter are:
text
font-family
font-size
color
alignment
background color
The font-family property is used to choose the font for a piece of text. You can also select a backup font in case the first one isn't available.
h1{
font-family: "Arial;
}
p{
font-family: Times New Roman;
}
The font-size property sets the size of the text:
Pixel Size (px)
Keywords: The size of the text relative to the browser default with various sizes from:
xx-small, x-small, small, medium, large, x-large, xx-large
h1{
font-size: 10px;
}
p{
font-size: large;
}
The color property sets the foreground colour of a particular element. You can specify the colour by the following methods
Named Colours
In the first version of CSS (1996) there were 16 named colours. There are now 148 named colours.
Hex Colour Codes
Colour codes can be constructed using the mix of Red, Green and Blue (in hex values).
rgb Values
Colour codes can be constructed using the mix of Red, Green and Blue but this time will have a minimum value of 0 (none of that colour) and maximum value of 255.
h1{
color: aqua;
}
h2{
color: #990024;
}
p{
color: rgb(102, 2, 60);
}
The background-color property sets the background colour of an element and uses the same methods to specify colours as the previous color property but styles the background of an element.
body{
background-color: grey;
}
div{
background-color: #990024;
}
The text-alignment property is used to control how the content in an element is displayed. There are various properties but we will look at the following:
left
right
center
justify
<body>
<h1 style="text-align:left;">Aligned Left</h1>
<h1 style="text-align:right;">Aligned Right</h1>
<h1 style="text-align:center;">Aligned Center</h1>
<h1 style="text-align:justified;">Justified Text</h1>
</body>