A Quick Guide to CSS
Style sheets define how HTML elements are displayed within a web page. They are normally defined in an external style sheet file, which is a text file that has the extension .css, although they can also be embedded in the page header (using the <style> . . . </style> tag), or defined in-line within an HTML element using the style attribute. We have already explored the use of the different methods of implementing styles in "A web page template". The World Wide Web Consortium (W3C) recommends the use of style sheets to format content in web pages, and all modern web browsers support them. The use of one or more external style sheets is of particular benefit to web developers, because it means that cosmetic changes to all pages in a web site can be achieved by amending the contents of one style sheet file (or at most a small number of style sheet files) rather than having to change the code in every single page individually. While this may not be a major issue for small web sites, it becomes a critical factor where hundreds or even thousands of pages are involved. A single web page may contain references to multiple external style sheet files. If two or more conflicting styles are specified for the same HTML element, priority is given to the style that appears highest in the cascade order, which is as shown below.
- Browser default style
- External style sheet
- Embedded style sheet (defined in document header)
- Inline style (defined within an HTML element)
Note, however, that if a link to an external style sheet is placed after an embedded style sheet in the HTML document header, the external style sheet overrides the embedded style sheet. Similarly, if conflicting styles are defined at the same level (e.g. in the same external style sheet, or two different external style sheets) then the last style definition that is read by the browser will be used.
CSS syntax
A CSS style is defined using the following syntactical elements:
- a selector
- a property
- a value
The general format is shown below.
selector {property: value}
The selector is usually the name of an HTML element (or tag). The property is the attribute of the element (e.g. width, background-color, etc) that will be affected. The value is the value that will be ascribed to the attribute. The property and value are separated by a colon (:), and the style definitions for each element are enclosed within curly braces. If multiple properties are defined for a single element, each style definition (except the last one) must be terminated using a semi-colon (;). An example (which should be familiar to you) is shown below. Remember that you can insert explanatory comments into a style sheet using the method shown below.
a:hover
{
text-decoration: underline;
color: #ff0000;
font-weight: bold
}
/* this style is used when the mouse hovers over a link */
The code above specifies that, when the mouse is moved over a hypertext link, the link will appear underlined, emboldened, and with a red text colour. Note that, although the properties could all be specified on the same line between the curly braces, the layout and indentation shown above is often used to improve readability, and has little or no effect on the size of style sheet files. It is also possible to define the same styling for a number of elements at the same time, as follows:
h1,h2,h3,h4,h5,h6
{
text-align: center
}
CSS dimensions
Properties such as the width or height of an element, or the thickness of a border, are usually either expressed as absolute values or as a percentage relative to a parent element. Percentages are often preferred when setting styles for web page layout (using tables or <div> . . . </div> tags, for example), because it allows the page elements to resize themselves automatically if the user changes the screen resolution or re-sizes the browser window. The ability to adapt to a range of different screen resolutions means that pages are more likely to be viewed correctly on a larger number of client computers, even those that have older browsers installed or are not equipped with a high-resolution monitor. The dimensional properties of an element are often expressed in pixels. Pixels can be considered to be relative units, since the size of each pixel (and therefore the size of an element defined using pixels) is dependent on screen resolution. The following example illustrates how the width and height properties of the <img> tag might be specified using pixel values:
img.thumbnail
{
width: 180px;
height: 135px;
}
Font sizes are often the cause of much confusion, because they can be specified using several different units of measurement, both relative and absolute. One commonly used relative unit of length is em, which is paired with a suitable multiplier to specify a font size for an element (1em is considered to be the font size of the parent element, 2em would be twice as big, and so on). The main point to watch when using em is that a value of 1em is not guaranteed to evaluate to the same absolute value in two different elements. It depends on the font size (if any) specified in the parent element for each. For that reason, pixels (px) are sometimes used to specify font size. The absolute units include inches (in), centimetres (cm), millimetres (mm), points (pt) and picas (pc). A point is the equivalent (in CSS) of 1/72nd of an inch, and a pica is the equivalent of twelve points. Both points and picas are units used in printing.
Generally speaking, it is recommended that absolute values for font sizes (points, picas etc.) should be avoided for screen output because they are interpreted somewhat arbitrarily (and almost never correctly) by different browsers. Relative units such as em and pixels (px) are preferred, because they are scalable and will produce similar results in all browsers. There is still some debate about whether it is better to use em or px, and many web authors use a mixture of the two, depending on the particular requirements of the application. If in doubt, it never does any harm to experiment with the different units to see what effect they have on different systems. The beauty of style sheets is that such changes as are necessary can be made very quickly, and take immediate effect.
CSS classes
Classes are used to enable different styles to be defined for the same selector, giving the web page author more control over how they want various page elements to be displayed. Under some circumstances, for example, you might want the text within a paragraph tag to be left-ustified (i.e. flush with the left margin but ragged on the right-hand side) for text that appears in one area of your page, but right-justified (i.e. flush with the right margin but ragged on the left-hand side) for text that appears in another area of your page. You would therefore need two separate styles defined for the <p> . . . </p> element. You could achieve this using classes, as follows:
p.left { text-align: left }
p.right { text-align: right }
In order to specify which style is to be used, the class attribute must be declared within the HTML element that it affects, as shown below.
<p class="left">
This text will be left-justified.
</p>
<p class="right">
This text will be right-justified.
</p>
If you leave out a tag name for the selector, the class defined can be used for any HTML element. The example below defines the class "center" that can be used within any element to make it centre-aligned.
.center {text-align:center}
The HTML code below shows how two different HTML elements might use the "center" class.
<h1 class="center">This heading will be centred!</h1>
<p class="center">This text will also be centred.</p>
The ID selector
You can define styles for HTML elements using the id selector (#). The style defined below will be used for any <p> . . . </p> element that uses the ID attribute with a value of "warning".
p#warning
{
text-align: center;
color: red;
font-weight: bold;
}
The HTML code below demonstrates the use of the ID selector.
<p id="warning">
Warning! You are now entering the Twiglet Zone!
</p>
An ID selector can also be defined without specifying a tag name, and may subsequently be applied to any HTML element. The style defined below will be used for any HTML element that uses the ID attribute with a value of "ecowarrior".
#ecowarrior
{
text-align: center;
color: green;
font-weight: bold;
}
The HTML code below demonstrates the use of the ID selector with a value of "ecowarrior" on different html elements.
<h2 id="ecowarrior">
Save the planet!
</h2>
<p id="ecowarrior">
Don’t use fossil fuels!
</p>
Common CSS properties and values
| Property | Description | Values |
|---|---|---|
| background-attachment | Specifies whether a background image is fixed, or scrolls with the page. Example:
div.header | scroll fixed |
| background-color | Specifies the background colour of an element. Example:
body | rgb(n,n,n) #nnnnnn colour-name transparent |
| background-image | Specifies a background image to be used.
Example:
div.header | url(url) none |
| background-position | Specifies the placement of a background image.
Example:
div.header | top left top center top right center left center center center right bottom left bottom center bottom right x% y% xpos ypos |
| background-repeat | Specifies whether/how a background image will be repeated.
Example:
div.header | repeat repeat-x repeat-y no-repeat |
| Property | Description | Values |
|---|---|---|
| color | Specifies a text colour. Example: p { color: #000000 } | rgb(n,n,n) #nnnnnn colour-name |
| line-height | Specifies the distance between lines. Example: p.double_space { line-height: 2em } | normal
number length % |
| letter-spacing | Specifies the spacing between characters. Example: p.stretched { letter-spacing: 2em } | normal length |
| text-align | Specifies whether text is left-aligned, right-aligned, centred or justified. Example: p { text-align: justify } | left right center justify |
| text-decoration | Specifies how text is decorated. Example:
a { text-decoration: none } | none underline overline line-through blink |
| text-indent | Specifies an amount by which the first line of text in an element is indented. Example: p { text-indent: 1em } | length % |
| text-transform | Specifies the case in which text appears. Example: h1 { text-transform: capitalize } | none capitalize uppercase lowercase |
| vertical-align | Specifies the vertical alignment of an element. Example: td { text-align: top } | baseline sub super top text-top middle bottom text-bottom length % |
| white-space | Specifies how white space inside an element is handled. Example: body { white-space: normal } | normal pre nowrap |
| word-spacing | Specifies the spacing between words. Example: p.spaced_out { word-spacing: 3em } | normal length |
| Property | Description | Values |
|---|---|---|
| font_family | Specifies preferred typeface. One or more alternative typefaces can be specified in a comma-separated list, including generic typefaces (if the name of a font-family consists of more than one word, it must be enclosed within speech marks, e.g. "Monotype Corsiva". Example: p { font-family: arial, Helvetica, sans-serif } | family-name generic-family inherit |
| font-size | Specifies the font size. Font sizes can be absolute (sets the text to a specified size – user cannot change text size in some browsers) or relative (sets the size relative to a parent element – user can change text size in all browsers). Example:
p { font-size: 14 px } /* font size in pixels */ | xx-small x-small small medium large x-large xx-large smaller larger length % inherit |
| font-style | Specifies the font style for text. Example:
p { font-style: normal } | normal italic oblique inherit |
| font-variant | Specifies whether or not text is displayed as small-caps. Example: p { font-variant: small-caps } | normal small-caps inherit |
| font-weight | Specifies the font weight. Example: p { font-weight: bold } | normal bold bolder lighter 100, 200, 300, 400, 500, 600, 700, 800, 900 inherit |
| Property | Description | Values |
|---|---|---|
| border-bottom-color | Specifies the colour of the bottom border. | (see border-color) |
| border-bottom-style | Specifies the style for the bottom border. | (see border-style) |
| border-bottom-width | Specifies the width of the bottom border. | (see border-width) |
| border-color | Specifies the border color. Example:
table | rgb(n,n,n) #nnnnnn colour-name transparent inherit |
| border-left-color | Specifies the colour of the left border. | (see border-color) |
| border-left-style | Specifies the style for the left border. | (see border-style) |
| border-left-width | Specifies the width of the left border. | (see border-width) |
| border-right-color | Specifies the colour of the right border. | (see border-color) |
| border-right-style | Specifies the style for the right border. | (see border-style) |
| border-right-width | Specifies the width of the right border. | (see border-width) |
| border-style | Specifies the border style. Example:
table | none
hidden dotted dashed solid double groove ridge inset outset inherit |
| border-top-color | Specifies the colour of the top border. | (see border-color) |
| border-top-style | Specifies the style for the top border. | (see border-style) |
| border-top-width | Specifies the width of the top border. | (see border-width) |
| border-width | Specifies the width of all four borders (either in pixels, or using one of three pre-defined values). Example:
table | thin medium thick length inherit |
NB: If the border-style property is not set, other border properties will have no effect, even if set. The order in which the border properties should appear is:
- border-style
- border-width
- border-color
Note that the top, right, bottom and left border properties can be assigned different styles, widths and colours, either individually or within the same statement. The following code, for example, assigns different colours (red, green, blue and yellow!) to each border:
div
{
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff #ffff00;
}
Note the ordering of the values: top, right, bottom, left. Note also that the border style properties can each have from one to four values, which are interpreted as shown below.
border-color: red green blue yellow;
/* top border = red */
/* right border = green */
/* bottom border = blue */
/* left border = yellow */
border-color: red green blue;
/* top border = red */
/* right and left borders = green */
/* bottom border = blue */
border-color: red green;
/* top and bottom borders = red */
/* left and right borders = green */
border-color: red;
/* all borders = red */
| Property | Description | Values |
|---|---|---|
| margin | Specifies values for the top, right, bottom and left margins, either together or as separate values. The margin clears an area around an element, outside the border, and is completely transparent. Example: div { margin: 10px; } | auto length % |
| margin-bottom | Specifies a value for the bottom margin.
Example: div { bottom-margin: 30px; } | (see margin) |
| margin-left | Specifies a value for the left margin. Example: div { left-margin: 40px; } | (see margin) |
| margin-right | Specifies a value for the right margin. Example: div { right-margin: 20px; } | (see margin) |
| margin-top | Specifies a value for the top margin. Example: div { top-margin: 10px; } | (see margin) |
Note that the top, right, bottom, and left margin can be set to different values, either individually or within the same statement. The following code, for example, assigns different margin values to the top, right, bottom and left of a paragraph:
p { margin: 10px 20px 30px 40px }
Note also that the margin property can have from one to four values, which are interpreted as shown below.
margin: 10px 20px 30px 40px;
/* top margin = 10 pixels */
/* right margin = 20 pixels */
/* bottom margin = 30 pixels */
/* left margin = 40 pixels */
margin: 10px 20px 30px;
/* top margin = 10 pixels */
/* right and left margins = 20 pixels */
/* bottom margin = 30 pixels */
margin: 10px 20px;
/* top and bottom margins = 10 pixels */
/* left and right margins = 20 pixels */
margin: 10px;
/* all margins = 10 pixels */
| Property | Description | Values |
|---|---|---|
| padding | Specifies the top, right, bottom and left padding values, either together or as separate values. The margin clears an area around the content of an element, inside the border. Example: div { padding: 10px; } | length % |
| padding-bottom | Specifies the bottom padding for an element. Example: div { bottom-padding: 30px; } | length % |
| padding-left | Specifies the left padding for an element. Example: div { left-padding: 40px; } | length % |
| padding-right | Specifies the right padding for an element. Example: div { right-padding: 20px; } | length % |
| padding-top | Specifies the top padding for an element. Example: div { top-padding: 10px; } | length % |
Note that the top, right, bottom, and left padding can be set to different values, either individually or within the same statement. The following code, for example, assigns different padding values for the top, right, bottom and left of a table cell:
td { padding: 10px 20px 30px 40px }
Note also that the padding property can have from one to four values, which are interpreted as shown below.
padding: 10px 20px 30px 40px;
/* top padding = 10 pixels */
/* right padding = 20 pixels */
/* bottom padding = 30 pixels */
/* left padding = 40 pixels */
padding: 10px 20px 30px;
/* top padding = 10 pixels */
/* right and left padding = 20 pixels */
/* bottom padding = 30 pixels */
padding: 10px 20px;
/* top and bottom padding = 10 pixels */
/* left and right padding = 20 pixels */
padding: 10px;
/* all padding = 10 pixels */
| Property | Description | Values |
|---|---|---|
| list-style-image | Specifies an image to be used as a list item marker in an unordered list (usually marked with bullets). Example: ul { list-style-image: url('pointer.gif') } | URL none inherit |
| list-style-position | Specifies the degree to which items in a list are indented ("outside" is the default, "inside" increases the indentation level). Example: ul.inside {list-style-position: inside} | inside outside inherit |
| list-style-type | Specifies the type of list item marker. Example:
ul.square {list-style-type: square} | none disc circle square decimal decimal-leading-zero armenian georgian lower-alpha upper-alpha lower-greek lower-latin upper-latin lower-roman upper-roman inherit |
Note that more than one of the list-style properties can be set with a single statement, as illustrated by the example below. Note that the order in which values must appear is type, then position, then image (although they do not all have to be present).
ul { list-style: circle inside }