CSS Quick-Reference
Syntax
selector {
property: value;
property: value;
etc.
}
Selectors
To specify a specific item to apply properties to:
| Selector | Description | Example |
|---|---|---|
element { } |
To change every instance of an HTML tag | body { } |
element element { } |
To change every instance of an HTML tag inside another tag. In this example, only unordered lists inside another unordered list. | ul ul { } |
.class { } |
To change every HTML element with the attribute class="class" |
.subtitle { } |
#item { } |
To control a single item with the attribute id="item"
IDs must be unique in HTML so you can be sure that rules that reference
an ID will affect only one item. |
#title { } |
selector, selector { } |
To apply the same rule to multiple selectors, separate them with commas. In the example here, the same rules are applied to ordered and unordered lists. | ul, ol { } |
element[attrib] { } |
Applies to any instance of the given element that also has the given
attribute (with any value). In this example, the rule applies to <a
href="example.html">Link</a>,
but not to <a name="bob"></a>.
Internet Explorer 6 does not support this method. |
a[href] { } |
element[attr="val"] |
Applies to any instance of the given element that has the given attribute
and value. The example here only applies to links marked as being in French
(i.e., <a href="fr.html" hreflang="fr">Example</a>) |
a[hreflang="fr"] { } |
Units
| Unit | Name | Definition |
|---|---|---|
| Lengths | ||
| px | pixel | The smallest on-screen unit. Size may vary according to the display device, but there are usually 96 pixels per inch on modern displays. |
| em | Ems | The height of the uppercase M in the current font (and size). Ems are a common typographical unit in printing. |
| ex | Exes | An ex is the height of the lowercase x in the current font (and size). |
| pt | Points | Points are common typographical units. A point is 1/72th of an inch. |
| pc | Picas | A pica is 12 points. |
| mm | Millimetres | One tenth of a centimetre. There are 25.4mm in an inch. |
| cm | Centimetres | One hundredth of a metre, or ten millimetres. |
| in | Inches | 2.54cm, or 72 points. |
| % | percent | Percentage of the containing block's width or height (whichever is more appropriate). When used for font-size, percent is relative to the font-size of the containing block (not the width/height of the box). |
| Colours | ||
| RGB(r,g,b) | RGB | All three values are between 0 and 255, or 0% and 100%. |
| #RRGGBB | Hex triplet | In hexedecimal notation. There are three values (red, then green, then blue) between 00 and FF, joined together. |
| colour-name | - | One of 16 standard colour names (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white and yellow) or the 216 named HTML 3 colours, or the 28 system colour names of the visitor's operating system. |
Common properties
| Property | Values | Meaning |
|---|---|---|
| Formatting text | ||
color |
RGB(r,g,b) | Sets the foreground colour of the given item. For example
setting color on the body element changes the default colour
of the text on the whole page. Colour units are explained above. |
| #RRGGBB | ||
| colour-name | ||
font-family |
font-names | One or more font names, in order of preference, separated by commas. E.g., Palatino, "Times New Roman", Times |
| font-type | Uses the browser's default font types: sans-serif, serif, monospace, cursive, and fantasy. You should add one of these after your font name list to ensure that the right style of font is used, even if none of the named fonts is available on the visitor's computer. E.g. Palatino, "Times New Roman", serif |
|
font-weight |
weight | Controls how bold the font is. The most common values are normal and bold. |
font-style |
style | Acceptable common values: normal, and italic. |
font-size |
named size | One of: xx-small, x-small, small, medium, large, x-large and xx-large |
| value | You can specify actual values in percent, or em (realtive to the font size of the containing block, or the default if you set this on the body element), or in points or pixels. For example: 9pt, 120%, 0.9em, 12px. | |
| Backgrounds | ||
background-color |
RGB(r,g,b) | Sets the background colour of the element. The three colour units are described above. |
| #RRGGBB | ||
| color-name | ||
background-image |
url(url) | An absolute or relative URL to an image that is displayed in the background of the element. Relative URLs are relative to the address of the style-sheet, not the document. E.g. url(http://example.com/images/image.gif) |
background-repeat |
repeat-value | One of: no-repeat, repeat, repeat-x or repeat-y. The second repeats both horizontally and vertically, and the last two repeat only horizontally or vertically respectively. |
background-attachment |
value | Either scroll or fixed. Scroll (the default) attaches the background image to the document and so moves with it when the browser scrolls, whereas fixed backgrounds are fixed in relation to the browser window so stays put when the document scrolls. |
background-position |
vertical horizontal | Positions the top-left of the background image. Co-ordinates can be given in any of the standard length units (px, in, em, pt, cm, etc) and also in percent of the containing block's width and height. E.g. 50px 50px, or 70% 20% |
| vertical horizontal | Vertical values are top, center, and bottom. Horizontal values are left, center and right. Specify both to anchor the background image to one side or corner of the browser window. E.g. bottom right | |
background |
any of the above | Background is a special combined property can can hold any
of the values above. For example: background: url(images/lines.gif)
#EAEAEA top left fixed; |
| Box/column styles | ||
padding |
top bottom left right | Padding is the spacing around the outside of the content of a box. Zero padding makes text and images inside a box touch the edges. Either specify four values (lengths in any standard unit, or percent), or two, or one. |
| vertical horizontal | ||
| all sides | ||
padding-top, padding-bottom, padding-left, padding-right |
length | To specify padding for a single side of a box. |
border-style |
style | One of none, hidden, dotted, dashed, solid, double, groove, ridge, inset, or outset. These are the styles of the border around the outside of a box. None has no width, but hidden does if you specify a border width. Like padding above, this property can take one, two or four values. A single value covers all sides, two values are taken to be vertical and horizontal, and four values define top, bottom, left, then right. |
border-width |
length | Either thin, medium, thick, or a size in any of the standard length units. |
border-color |
any colour value | A border colour in any of the colour values shown above (RGB, hex, or named) |
border |
combination of above | Width, colour and size values for all four sides. For example: thin solid black, or 2px dashed RGB(20,36,43) |
margin |
top bottom left right | Margins are the spacing around the outside of a box (padding is the spacing around the inside) As with padding, you can specify each side seperately, give horizontal and vertical values, or a single value for all four sides. Units can be any of the standard length units, including percentage of the containing block (or the browser window if not contained), or the value "auto" which tries to set the margins to make the box conform to any specified size. Internet Explorer 5 does not support the "auto" value. |
| vertical horizontal | ||
| all sides | ||
margin-top, margin-bottom, margin-left, margin-right |
length | As with padding, you can set margins specifically for one side of a box. Valid values are any length unit, a percentage or "auto". |
overflow |
value | When the contents of a box exceed the size given (if a size is given) you may make any overflowing content one of : visible, hidden, scroll, or auto. The default is "visible". Auto lets the browser decide which is best; scroll adds scrollbars. |
| Positioning | ||
position |
method | Sets what positioning method should be used to draw the box/column on screen. The default is static, which draws the item as a block or inline element as usual. Relative positions allow the item to be positioned in relation to its declared position. A value of absolute positions the item exactly in the containing block (or the browser window if it's not contained), and the final value, fixed, positions the item exactly in relation to the browser window. Internet Explorer 5 and 6 do not support fixed positioning. |
top, bottom, left, right |
value | Sets the position of the given edge of the box according to the method chosen above. All the standard length units are valid, as are percentages of the containing block. You can specify any combination of horizontal and vertical (i.e., top and left, or bottom and right) and then use a width & height (explained below) to define a box size. |
width, height |
value | Specify the width or height of a box, depending on the positioning method given above. All the standard length units and percent are valid, as well as the "auto" value. |
float |
left or right | Lifts the item from the document flow and moves it as far to the left or right as possible within the current containing block. Use floats to make text flow around images. |
| Miscellaneous | ||
display |
none | Don't display the item on screen |
| hidden | Make room in the document for the item, but don't display it. | |
| block, inline | How to treat the item. For example, setting an unordered list <ul>
to display: inline will show list items side by side instead
of vertically stacked. |
|
@media |
medium | One of screen, print, handheld, projection, tv, aural, or braille. Use
to enclose special rules for specific media. For example: @media
print { body { background-color:
white; } } |
Pseudo-elements and classes
| Pseudo- | Description | Example |
|---|---|---|
:hover |
Applies to any element while the mouse pointer is over it (Internet
Explorer 5 and 6 only support :hover on the anchor element <a>) |
a:hover { } |
:visited |
For links only, defines styles for links that have already been visited. | a:visited { } |
:active |
Applies when the item is "active" (has the mouse clicked down on it). | a:active { } |
:first-line |
Applies to the first line of a block element. Not supported by IE 5 or 6. | p:first-line { } |
:first-letter |
Applies to the first letter of the given element. Not supported by IE 5 or 6. | p:first-letter { } |
:before, :after |
Applies to the space directly before the selected item. Not supported by IE 5 or 6. Use with the content property to add content around some elements. This example prints the URL of every link in square brackets after the link. | a:after { |
Media types
When linking a style-sheet to your HTML document, you can specify which presentation
method the style-sheet is for. You can specify media-specific rules inside
a style-sheet, but you can also specify separate sheets for each medium. In
the link tag, you can specify multiple media separated by commas, e.g. media="screen,print"
The currently defined media types are:
- all
- Suitable for all devices.
- screen
- For normal desktop and workstation screens. The screen profile covers just about every normal graphical web browser like Internet Explorer, Opera and Netscape Navigator.
- For printers. Print stylesheets can make special provisions (i.e., most printers are still black & white), and shouldn't use pixels as a unit of measurement since the resolution of printers varies so much (1px on a 1200dpi printer is 4 times smaller than 1px on a 300dpi printer). Ideally, use ems and relative widths (per-cent).
- handheld
- For small-screen mobile devices like PDA web browsers. Mobile devices typically have very low-resolution (often less than 320x400 pixels), less bandwidth, fewer fonts, colours, and capacity for viewing and rendering complex layouts. Take advantage of the handheld profile to create very simple, thin styles that work well in monochrome as well as limited color.
- tv
- For television devices like WebTV. These devices typically can only scroll up and down, and have a fairly low resolution (somewhere between 640x480 and 800x600), they also have fairly limited color ranges.
- aural
- For speech synthesisers, aural stylesheets allow you to define the pitch, volume and speed that certain elements of your design will be read with. For example if your document has a dialogue between two people, you could mark each person with their own class and give them different voices. Copyright notices can be played quiet and quick, etc.
- braille
- Frankly I'm not sure how much stylistic control you can have over a braille display, but the option's there.
- projection
- For screen projectors - allows you to show a full-length document on one screen, but a compact PowerPoint-style version for presentations in the same HTML document. The Opera browser's website has an excellent example of this.