This page serves as a reference for style sheets. It's been presented in "printer-friendly" format as you may find it most convenient to print it off and keep it with your module notes. However, because I anticipate people will read it online as well, it's got more hypertext links in it than the printer-friendly pages for each lecture.
return to the resources page
return to the Subject Index
return to the A-Z Index
Advanced readers might like to note that I have not included information about positioning elements on the page using style sheets. This is still an evolving technology, and also one which is quite complex. Myself, I also think it is a further step towards "rigid" rather than "flexible" web design. For all these reasons I have omitted discussion of it, but the interested can look at Niederst's Web Design in a Nutshell, pp. 418-422.
The definitive statement regarding styles is to be found at http://www.w3.org/TR/REC-CSS2/cover.html. This is the official specification. It's hardly a short read and for many will be very intimidating but it is essential reference material for the serious web designer.
color
(Note the usual Americanised spelling, and also that it's not "font-color"). This takes a colour name or RGB code and has fairly obvious results.
font-size
There are four sets of values. The first two are "absolute", the second two "relative":
absolute sizes: xx-small | x-small | small | medium | large | x-large | xx-large. These refer to the browser's inbuilt size definitions.
length sizes: number + em | ex | px | pt | pc | mm | cm | in. So to have text always 24 points in size, use { font-size: 24pt }. Follow this link for more information on different length units.
A reminder though. Specifying font size in this way is not always the right thing to do. It "fixes" it regardless of the screen size of the user's monitor and their own wishes. As more and more graphic designers with an expertise in preparing print media - and therefore an obsession with getting everything looking exactly the way they want it, rather than meeting the needs of a variety of readers - turn their attention to web-based design, more and more sites are written this way. It's not always a bad thing, but then again it's not always a good thing either. (Sometimes it can also cause problems if printing a page.) If it really makes a difference how big your text is, go ahead and specify it (as long as you don't make it too small), but if there is even the slightest possibility of it not really mattering, then don't specify it like this: use the more relative ways given here, or don't specify it at all.
relative sizes: larger | smaller. Relative, that is, to the parent object, such as a <body> or <p> tag.
percentage sizes: n%. The same, but as a percentage of the size of the parent (n can be larger or smaller than 100).
font-family
Remember that this takes a list of font names: check the page on fonts if you've forgotten why. You should note that if the font name contains spaces it should ideally be enclosed in quotes, as in this example:
p { font-family: "Comic Sans MS", Arial, Helvetica, sans-serif }
font-style
normal is the default - you'll probably only ever use this to define italic. (You might, of course, end up using normal to block the inheritance of italicised text.)
font-weight
Similarly, though there is a normal value, the main use is for bold. There are many other possible values but as browser support for them is currently so limited I've saved us all some bother and omitted them.
text-decoration
Completing the trio, this is how you get underline. The "off" value in this case is none; that's how you can turn the underlining off links. Also available is overline and line-through. Finally, if I dare to mention there is also a value of blink, do you promise never to use it? Do you swear?
text-align
Unsurprisingly takes the values left, center and right. There is a justify value - to align to both margins - you could try it, but bear in mind it can make your text look awful if your paragraphs are fairly narrow or your text is large.
vertical-align
There are a plethora of other values but I'll stick to recording the most obvious ones, bottom, middle and top.
caption-side
For the <caption> tag only, but useful: it defines where in relation to its parent table the caption appears. Takes the values top, left, right or bottom.
The first two are obvious:
background-color
Takes a colour name or RGB code. Or, the value transparent, which sounds interesting until you realise it's just the default.
background-image
Takes a value of the URL (filename) of the image. Note the syntax:
body { background-image: url (water.jpg) }
Note that they can be applied to any element: you can now have paragraphs with a different background colour or image from the page body. Above and beyond this there are further possibilities opened up with the following properties, all of which apply to background images:
background-repeat
The default is repeat, which means the image will "tile" in the familiar fashion. However, you can also have no-repeat, which means the image will display only once: this is normally used in conjunction with the background-position property, as below. repeat-x means the image will repeat only horizontally, and repeat-y only vertically.
background-attachment
The default is scroll which means the background image (whether tiled or not) scrolls with the text. fixed means it will stay in position, which can be quite a nice effect.
background-position
This specifies the position of a background image with reference to the box of which it is a part - whether that's the whole page (<body> tag), a table, an individual table cell, a <p> tag, or indeed any block-level element. Obviously, an image that repeats does not require this to be specified, but single images probably will.
Values taken by this property are a little complicated. They come in horizontal/vertical pairs, and usually as a percentage. The default is 0% 0%, which refers to the top left of the area in question: 100% 100% is therefore the bottom right, and the rest follows logically. But you can also use left | center | right for the horizontal element and top | center | bottom for the vertical.
See the page on margins, padding and borders. I will re-summarise the available properties here, however.
margin
subdivided as: margin-top, margin-right, margin-bottom, margin-left.
Defines the amount of margin around the element, outside the border.
H1 {margin: 15px}
H1 {margin: 0px 15px 0px 15px}
H1 {margin-top: 0cm;
margin-left: 1.5cm;
margin-bottom: 0cm;
margin-right: 1.5cm;}
padding
subdivided as: padding-top, padding-right, padding-bottom, padding-left.
Defines the amount of padding between the element and the border.
P.special {padding: 10px}
P.indent {padding-top: 0pt;
padding-left: 18pt;
padding-bottom: 3pt;
padding-right: 0pt;}
border-width
subdivided as: border-top-width, border-right-width, border-bottom-width, border-left-width.
As well as the usual units of length this can also take the values thin, medium or thick. See below for a couple of examples.
border-color
Not subdivided, but as the example below shows, can still have different values for each side; remember the order is top-right-bottom-left. Takes an RGB colour code or colour name.
border-style
As with border-color, not subdivided but can still have different values for the four sides. There are several different styles, which you might like to play around with: none | dotted | dashed | solid | double | groove | ridge | inset | outset.
Examples of border properties:
p.highlight {border-style: ridge;
border-color: red;
border-width: medium;}
h1 {border-style: none none double double;}
border-spacing and border-collapse
In HTML 4.01 there was a useful attribute, cellspacing. This could be used to space out all the cells of a table by a certain amount. In XHTML 1.0 you shouldn't use attributes for this kind of thing: border-spacing is the replacement style sheet property and can be defined for the <table> tag. If you want to make absolutely sure the cells of a table are joined together include border-spacing: 0px;. You can also try border-collapse: collapse; which says to the browser (and this is obscure!), "if two borders adjoin each other then treat them as one border". The default is border-collapse: separate;.
height and width: these can apply to any tags which define either an object or a block of text such as the <p> tag. You can see this in the example below. As usual, the values can be an absolute width, a relative (%) width, or auto.
SUMMARY. The paragraph below has been rendered with a combination of the font, box and background properties mentioned so far. Examine the code: note that though I've used the style attribute here, this could equally well be defined via style information in the header or an external style sheet.
<p style="background-image: url(badgeback.gif);
background-repeat: no-repeat;
background-position: 50% 50%;
text-align: center;
font-weight: bold;
width: 75%;
padding: 20px;
border-width: 2px;
border-style: inset;">
BRIGHTON & HOVE ALBION FC
Champions Division 3 2000-1
Champions Division 2 2001-2
Division 2 play-off winners 2003-4
If that looks rather unimpressive on some browsers, at least it might also serve as an example of what does and doesn't work in that browser!
I could keep showing you examples until every eventuality had been covered, but better at this stage, I think, to encourage you to go off and play with these properties yourself. Do always remember that browsers may vary in how they render styles, and it is better to be flexible than rigid.
Internet Explorer - but no other browsers at the time of writing - allows you to change the colour of the scroll bar with a variety of properties. Strictly, these are browser-dependent, but I'm breaking my own rule here as, in the end, they're harmless. If a browser can't see them, it'll just carry on with the usual drab gray (or whatever default settings the user's desktop has). Use the following properties to work this. Each takes the usual RGB code or name. Following the list I've reproduced a sample definition so you can see how I've done it: these properties are always defined in the <body> tag.
scrollbar-face-color scrollbar-arrow-color
scrollbar-track-color scrollbar-shadow-color
scrollbar-darkshadow-color scrollbar-3dlight-color
scrollbar-highlight-color
body { color: #006600;
background-color: #ffffff;
scrollbar-face-color: #90ee90;
scrollbar-track-color: #e5ffe5;
scrollbar-darkshadow-color: #006600;
scrollbar-highlight-color: #f0fff0;
scrollbar-arrow-color: #006600;
}
list-style-type. This basically defines the list's bullet or number. Play around with these values: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none. Observant readers might have realised that, as this property is shared between the two types of list, you can use this style sheet property to create ordered lists with <ul> tags, and vice versa, but that'd be rather gratuitously confusing.
list-style-image. A highly convenient way to replace your bullets with images. Do note the syntax:
ul { list-style-image: url(star.gif) }
list-style-position. Seems a little trivial, but again this is something impossible to do in basic HTML. The value of inside for this property makes subsequent lines of list items begin under the list marker (bullet, number, image, whatever). outside makes subsequent lines match the indent of the first line: as on all lists on this site.
In just about every case you might want to use one of these units, do remember that you can probably also use a relative size; usually a percentage, but sometimes a keyword like xx-large instead. However, some of these are still relative measures in some ways, as screen sizes and resolutions also affect them.
| px | Pixels. Remember these can vary in absolute size, depending on the monitor resolution. |
| pt | A "point", a traditional publishing unit, of which there are about 72 to the inch. Should be quite familiar if you've used Word, in which the standard font is 12 point (12pt). Anything of 9pt or below is becoming pretty small. |
| pc | A "pica", a traditional publishing unit equal to about 1/6 of an inch. |
| em | A measure equal to the size of the "m" for the font in question (the widest letter, in variable-width fonts). Useful to ensure that, say, a paragraph's padding is one letter wide, or whatever, regardless of other information. |
| ex | A measure equal to the size of the "x" for the font in question - about half the size of an em. |
| in | Inches. |
| mm | Millimetres. |
| cm | Centimetres. |
Almost every HTML element can take the style attribute, which effectively serves as a generic substitute for just about any other layout-related attribute. (I add the term "layout-related" because, to stress the point, no matter how much use you make of your style sheet it will never be able to supersede the need for non-layout - or structural - attributes such as href or alt. Nor was the technique ever intended to.) The value of the style attribute, as you'll see in the examples below, is made up of the property/value pair(s) you want to employ. You don't need the curly brackets, but you will need to separate each property/value from the others with semicolons.
Here's an example. Note that these are "added on" to properties already defined, such as the font size and face; an example of inheritance:
<h2 style="text-align: center;
background-color: #FFFF00;
border-style: groove;">
Attention!
</h2>
Remember that if you have styles you want to apply through multiple HTML files, create an external style sheet and point to it via the <link> tag.
Another possibility is to define styles only for one particular HTML file, but to apply throughout that file. Again you would only tend to do it when you have a good reason to have certain tags on a page with styles unique to that page. You do so by placing their definitions in the head of that document, between <style> and </style> tags. To prevent older browsers from trying to interpret the contents of a style declaration, you should enclose the definitions between HTML comments which, in case you'd forgotten, start with an angle bracket, an exclamation mark and two hyphens, and end with two hyphens and a closing angle bracket. In this way you can hide anything that may cause problems for an older browser whilst leaving the code visible to newer browsers. So any style definition you include in a page should be bracketed as follows:
<style type="text/css"> <!--
style definitions go here
--> </style>
This will make your page more 'backwards compatible' that is, older web browsers will not try to display any information bracketed between the <style> tags. The type attribute is compulsory and at the present time you might as well consider "text/css" as the only possible value; the attribute is there as a kind of placeholder for future developments in style technology, but this is beyond the scope of this site.
This is a relatively uncommon way of arranging things, however: simply because external style sheets are more powerful. Observe, though, that style definitions in document headers override external style sheets. (This is therefore another stage in the cascade, between external style sheets and styles defined in tags through "normal" attributes or the style attribute.) If you want, on a single page, to supersede a "universal" style defined in an external sheet, this is a convenient way to do it. Remember that you don't have to redefine every style property for every tag, but only the ones you want to change.
The browser applies its own, "default" style sheet |
If the user has altered the browser's default settings, these are applied |
If there is a style sheet, these override default settings |
If styles are defined in the document header then these override the style sheet on that page |
Finally, if any style attributes are defined within tags, then these are always applied. |
return to the resources page
return to the Subject Index
return to the A-Z Index
Material on this site is © Drew Whitworth, 2005 Permission will usually be given to reproduce material from this site for non-commercial purposes, if credit is given. For enquiries, e-mail Drew at andrew [dot] whitworth [at] manchester [dot] ac [dot] uk.