CSS is used in conjunction with HTML to style a webpage. HTML specifies the content and CSS specifies how it should look. This section starts with detailing the CSS syntax, before styling page elements.
Syntax
CSS is composed of properties, which apply to elements of a page. Each property is of the form:
property-name: value-of-property;
For setting the ‘color’ property to ‘blue’ would be written:
color: blue;
Properties mostly apply to tags or property classes (explained later). These are grouped curly braces, { and }, the first being preceded by something that specifies what the grouped properties apply to.
strong {
color: red;
text-decoration: overline; /*Draws a line above important text*/
}
The above specifies that text enclosed by the “strong” tag should be red and overlined, in addition to it already being bold (strong’s default).
Applying properties
This can be done in multiple way, one being to enclose all the relevant properties in a <style> tags inside the <head> tags. For the above example that would be:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Example 1</title>
<style>
strong {
color: red;
text-decoration: overline;
}
</style>
</head>
<body>
Some <strong>example</strong> text. The example's text is <strong>unimportant.</strong>.
</body>
</html>
This produces:
Some example text. The example’s text is unimportant.
The text-decoration style also supports ‘underline’ and ‘line-through’, try adjusting the text decoration property to one of them, or many of them (settings space separated). If you do have text that is supposed to be deleted, use the <strike> tag instead of the CSS.
Any other tags can have their styles changed, including <body>. The font can be set using the “font-family” property, background of the affected elements with “background-color”. All color properties accept colors details here. The font-family accepts the name of any font on a computer, and can have multiple (space separated), the first being given priority and the others only being used if the previous fonts weren’t available.
To have a back in a monospace font, lightblue background color, dark green text and important text have a light-green background the following would be used:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>CSS Example 1</title> <style> /* Properties applies to everything go in the body tag */ body { color: darkgreen; background-color: lightblue; font-family: monospace serif; /* monospace is always available */ /* so serif will not be used */ } /* Items only applying to important text */ strong { background-color: lightgreen; } </style> </head> <body> Some <strong>example</strong> text. </body> </html>
Text alignment
The property “text-indent” that specifies how much the text should be indented for the first line of, e.g. a paragraph – which it is commonly set for. It supports measurements in pixels (like 5px), metric (like 5cm) or relative to the font size (2em – two times the font-size).
p { text-indent:2em; } /* First para lines indented by 2*font-size*/
To change the alignment of text to:
Use the text-align property, set to left, center or right. It also has the setting justify, which ensures a paragraph or line split over many lines doesn’t have “ragged edges”:
| Not justified | Justified |
|---|---|
| The property “text-indent” that specifies how much the text should be indented for the first line of, e.g. a paragraph – which it is commonly set for. It supports measurements in pixels (like 5px), metric (like 5cm) or relative to the font size (2em – two times the font-size). | The property “text-indent” that specifies how much the text should be indented for the first line of, e.g. a paragraph – which it is commonly set for. It supports measurements in pixels (like 5px), metric (like 5cm) or relative to the font size (2em – two times the font-size). |
Property classes
Often a tag is too broad a range of text to be styling. For example the navigation bar has differently styled hyperlinks to the ordinary text. This is done by using classes, which are groups of properties that apply to any elements that are part of the class.
To make some text be part of a class, the tag surrounding the text it has the “class” attribute set on it to the name of the class. In the unlikely event of there being no such tag the <span> tag can be used. It does nothing and tends to only be used for styling page elements:
<p class="summary">This is a summary</p> <p class="note">Note: <a href="x.html">X</a> <em>is</em> the case...</p> This is some obscure <span class="some-other-class">text</span> that is used.
To define the class properties, the same syntax as for a tag is used, but the class name is preceded by a “.”. To style a particular tag for a specific class, use the syntax [class] [tag], which can be read as, properties for all [tag]s in [class]:
.summary { /* Classes don't need to contain anything */
}
.some-other-class {
font-size: x-large;
text-decoration: overline;
}
.note {
color: grey;
font-size: small;
}
.note a { /* Change hyperlinks in notes to green */
color: green;
}
This gives (enlarged):
Note the new property “font-size”, it supports a relative font size (xx-small, x-small, small, medium, large, x-large or xx-large, a percentage, e.g. 112%, 51%, normal font size, em) or an absolute font size (in px – pixels).
The properties for classes can be more specific. They can be set on only specific tags of that class. The [tag].[class] notation is used:
em.altered { /* Only affects <em class="altered">, nothing else*/
font-size: xx-large;
}
<p class="altered">Some <em>emphasized text</em>, some <em class="altered">altered emphasized</em> text</p>
Giving:
Note that setting the class of the paragraph to altered did nothing.
Setting a style directly
Sometimes a style is needed just once, to do this set the “style” attribute on a tag surrounding the relevant text to the properties wanted:
<p>This is a summary</p> <p style="color:grey;font-size:small;">Note: <a href="x.html" style="color:darkgrey;">X</a> <em>is</em> the case...</p> This some obscure <span style="font-size:large;text-decoration:overline">text</span> that is used.
Using classes to head>set the properties is the normal way to set them, as it avoids retyping the properties for each, e.g. note. The most important item is that changing the style in the class results in all, e.g. notes, changing their style. This permits (when used with stylesheets, covered next) a website to have a consistent look and feel like this one.
Stylesheets
The most powerful aspect of CSS, all the styles in one place, applying to potentially many pages, and are typical way to include styles. All the styles go in a file, typically called style.css, with the extension .css, known as a stylesheet. In the HTML page it is referenced using:
<link rel="stylesheet" href="[filename]">This is placed inside the page’s <head> tags.
The file is referenced in the same way an equivalent HTML file would be (same directory and directory above are shown below for “style.css”):
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="../style.css">The one stylesheet would be then used by all the pages on the website. To make any change to website’s, e.g. color scheme, only the one file needs editing, as opposed to every page, potentially hundreds or even thousands.
Summary
This section was a quick guide to CSS, which will be sufficient for now. More details of CSS classes exist, however that is not needed immediately and some will be covered in a future section.