Cascading style sheets
Cascading styles (CSS) are applied to web pages to adjust their appearance, make them more readable, more attractive. CSS acts on the HTML elements, either directly from within the element tags (using the style attribute), or by being placed into the head of the page or on a separate, linked, style sheet. When not inside the element tag itself, a selector or identifier is used to identify which elements will be acted on, and properties define the styles themselves. The structure of a style is as follows:
Notice that each property has a name and a value, separated by a colon, and each property is separated from its neighbours by a semicolon.
The various selectors, the way styles cascade and the bugs that different browsers have in interpreting the code make using style sheets an art.
There are many books on the subject that explain the intricacies (see book list) and it is way beyond the capabilities of this site to provide a comprehensive guide. The tables below can be used to identify some of the properties that may be tweaked, and to understand the various selectors that have been used, and therefore where the properties have been applied.
| Selector type | example | application |
|---|---|---|
| tag, or element | h3 | all instances of the declared element. To apply to several elements separate them with a comma |
| class | .greentext | all elements with class="greentext" in the tag, classes are preceded by a dot |
| ID | #maintext | an element with ID="maintext" in the tag - must be unique to the page, note the # |
| contextual | li a |
apply to the last element only when it is (loosely) contained within the first element. Note there is a space but no comma between the selector tags |
| pseudo class (CSS2) | a:hover | applies to an element under certain conditions illustrated here by an element with the mouse over it |
| attribute | [attribute] | applies only when the tag contains the attribute or attribute/value in the square brackets |
| child | > | applies when second element is the direct child of the first |
| sibling | + | applies when the second element immediately follows the first |
Two kinds of linkage
| <link href="cssfiles/layoutstyles.css" rel="stylesheet" type="text/css" /> |
| <style type="text/css" media="all"> @import "layoutstyles.css"; </style> |
Some common properties
| Property name | values | element | inherited |
|---|---|---|---|
| background-color | #rrbbgg or named colour| transparent | inherit colours are specified in amounts of red green and blue |
all | no |
| background-image | URL of an image to be used as background e.g. url(../images/texture.gif) | all | no |
| background-repeat | repeat |repeat-x | repeat-y |no-repeat | all | no |
| background-position | left | center | right | top | bottom | top center | bottom center | top left | top center | top right | bottom left | bottom center | bottom right | all | no |
| background | color url position repeat (as defined above) | all | no |
| border-collapse | collapse | separate | inherit (for collapsing table borders) | table | yes |
| border-color | color | transparent | inherit | all | no |
| border-width | thin | medium | thick or any CSS length measurement | all | no |
| border | width style[solid | double | groove | inset | outset | none | ridge] color | all | no |
| clear | none | left | right | both | inherit | block | no |
| color | color | inherit (text colour) | all | yes |
| display | inline | block | list-item | none | all | no |
| float | none | left | right | inherit | not positioned | no |
| font | [style] [variant] [ weight] size [/line-height] family (details as below) | all | yes |
| font-family | also font-size, font-style (italic), font-variant (smallcaps), font-weight | all | yes |
| font-style | normal | oblique | italic | all | yes |
| font-size | absolute size (px, pt, mm, small etc.) | relative size (em, %, smaller, larger) | all | yes |
| font-variant | normal | small-caps | all | yes |
| font-weight | normal | bold | all | yes |
| height | px, mm, pt, em, % – sets the height of a block - see block model below | block & replaced | no |
| left | positions a block element a fixed distance rightwards from its reference point. (Can be negative) Similar use of right, top, bottom | all blocks with position set | no |
| letter-spacing | increases letter spacing (px or em) (can be negative) | all | yes |
| line-height | multiplies the initial value of the line height by the number or percent set | all | yes |
| list-style | [type] [position] [image] see individual settings below: | if display=list item | |
| list-style-type | circle |
disc | square | decimal | upper-roman | lower-roman | none sets the type of bullet or numbering |
if display=list item | |
| list-style-position | inside | outside – sets the bullet or number to inside or outside the block: | if display=list item | |
| list-style-image | url( ) | none – replaces the marker with an image | if display=list item | |
| margin | sets the amount of space around a block (clock-wise from the top if individually set) also margin-top etc. (see box model below) | not tr, tbody, tfoot, th, thead | no |
| padding | . specify thickness (clock-wise from the top if individually set) also padding-top, padding-right etc (see box model below) | not tr, tbody, tfoot, th, thead | no |
| page-break-before | auto | always | avoid | left | right instructs printer to start a new page before this element |
block elements | n/a |
| text-align | left |center | right | justify | block elements | yes |
| text-decoration | underline | overline | strike-through | none | all | no |
| text-indent | sets first line indent to value inserted | block elements | |
| visibility | visible | hidden when hidden the block does not display and the space is blank |
all | yes |
| word-spacing | increases (or decreases if -ve) the spacing by the amount set (em is preferred) | all | yes |
The box model
Padding (extension of the background outside the word wrap area), border and margins are not part of the element but are extras, so when an element size is specified, the width of padding, border and margin have to be added on. Except that IE 5, 5.5 and sometimes 6 react differently.
In a vertical direction, where two margins abutt, the shared margin will be made equal to the larger of the two constituent margins. In a horizontal direction (this is for inline elements) this is not the case.
Dimensions
- absolute lengths: in (inch), pc (pica, 6 per inch), pt (point, 72 per inch), mm, cm
- relative lengths (rel to parent): em (font-height), ex (x-height), %
- Pixels: px The pixel is not a unit of length but a quantity of the picture elements that make up the screen. CSS asks the browser to make allowances for the printer resolution when printing.
