Style Sheets
Cascading Style Sheets, or CSS, are a technology that is set to revolutionise the way we web design: Style Sheets use special tags and files to define styles of text (font, colour, size, etc) as classes to be used for any block of text, leaving HTML as the language it was meant for: simply giving the bare elements of the page, not formatting them.
Style Sheets are one of the most browser dependent
technologies in the business yet: they are capable of what is called exact
positioning, which in theory means you can place an element you define
in the HTML code anywhere on the page you want, and exactly too! In practice
at the minute the situation is not quite as good: The W3C
(WWW Consortium) has brought out the implementation of style sheets (CSS
level 1), but the draft for absolute positioning (CSS Level 2) has yet
to be implemented. This means that browsers that came out before CSS Level
1 did aren't likely to display the same stuff as ones that support it,
and all browsers at the minute don't display the exact positioning (Level
2) the same. You may well ask then why are we using it yet? Well, the
answer is that if you can get the right page to the right browser you
are ok, as your pages will look even better. Browsers that support Style
Sheets are as follows:
Internet Explorer 3.x (Although not fully by any means, as it came out
before CSS Level 1)
Netscape Communicator (4.0) (Reasonable, although some of the newer stuff
such as DHTML (explained in another topic), is not supported, layering
is).
Internet Explorer 4.0 (supports CSS Level 1, CSS Level 2 Draft, HTML 4.0,
most DHTML)
Internet Explorer 5.0 (CSS
1 & 2, HTML 4.0, XML, DHTML, Behaviours).
The examples in this tutorial only work with the specified browsers, so, if you aren't viewing these pages with them, the examples will not appear as they should do.
Style sheets can be defined to work in a page in
three ways:
- Having a class definition of the syles in a block in the <HEAD> block.
- Using special tags within the document to apply a style on a particular part of text, with the style defined in those tags.
- Using an external Style Sheet file, which is then linked to from the document.
I will first tell you about how to define the classes
in the <HEAD> tag and also in the tags around individual elements.
Style Sheets start with the tag <STYLE>. This is also where we
tell the browser what kind of style sheet it is: at the moment there are
only two types, normal text style sheets, and Netscape's proprietary JavaScript
ones. The definition is as follows (we will be using the text ones):
<STYLE TYPE="text/css">
<!--
-->
</STYLE>
We put in the comment tags to stop old browsers reading this and just putting it up as part of the normal page text, which could be a trifle embarrassing! Between these comment tags we define the styles. Styles can be applied to any element on the page, text, images, whatever you have on the page. You can define what are called classes, which can then be applied to a specific page element, or define a style for a tag, such as the <B>, or Bold, tag, or define a style that is inline, actually within the HTML code, which you are applying to a large part of the page.
The way we define styles for a tag is to use the following format:
<STYLE TYPE="text/css">
<!--
tag {attribute: setting;}
-->
</STYLE>
The tag can be any tag without it's normal
< and > round it. This is then followed by the opening curly bracket
which contains all the different attributes with a colon and the setting
for that attribute and then a semi-colon (;). The semi-colon separates
one attribute from the next, as you may define many attributes for a single
tag. After all the desired attributes have been defined, the style definition
for that particular tag is closed by the closing curly bracket.
An example is:
P {font-size: 15pt; color: blue;}
This makes all blocks of text or other elements on the page surrounded by the <P>, or pragraph, tag, have a font size of 15 points (pt), and have the color blue. Neat eh?
In other words, like
This!
You can group tags that you want to have the same style together:
H1, H2, H3 {font-size: 15pt; font-weight: bold; color: maroon}
To define classes, which can be applied to any tag, we use the following format:
.classname {attribute: setting;}
Where classname is any name you want to call the class, preceded by a full stop (.), and attribute and setting are as explained above. Therefore, we can define a class called "bluetext" in the following way:
.bluetext {font-size: 20pt; color: blue; font: verdana; font-weight: bold;}
This defines a class that makes any text told to
"take on" that class be in the Verdana font, be 20 points high, be blue,
and be in bold type.
In other words, like this!
You may now be wondering how you apply classes to tags and objects. Well, you use the following format for tags:
<TAG CLASS="classname">Text or Object</TAG>
Where TAG is any tag you want, it could be
<B> or <BODY> or anything you want. classname is
the name of the class you want that particular tag to have (but not any
others of the same kind on the page, otherwise you would just define the
style for the tag in the header as explained above).
An example is:
<B CLASS="bluetext">Some text</B>
which would give you:
Some text
You can specify that large portions of the web page inherit the class by using two special tags, <SPAN> and </SPAN>, and <DIV> and </DIV>. These you can put round any number of elements in the page and they will all inherit the style defined by that class. The format is:
<SPAN CLASS="classname">Any Element of the page</SPAN>
This format is the same for the <DIV> tag. The <DIV> is used for large containers, such as a whole page of text, whereas <SPAN> is used for smaller page elements, words or even letters. An example of the way these two tags are used is:
<SPAN CLASS="bluetext">Any Element of the page</SPAN>
Which results in:
Any Element of the page
Lastly, you can specify different classes for one type of tag. This means you could have, for example, 5 different classes for the <P> tag:
P.normal
P.red
P.green
P.bold
P.italic
These are defined just like any other class or style, as follows:
<STYLE TYPE="text/css">
<!--
P.normal {font-size: 12pt; font: arial;}
-->
</STYLE>
These different classes for one type of tag are used as follows (using the <P> from above as the example):
<P CLASS="normal">Text with the normal style</P>
<P CLASS="red">Text with the red style</P>
<P CLASS="green">You get the picture...</P>
One thing you might be wondering about is can you have a different style of tag when you've specified a style for that tag already? the answer is yes you can, and the way to do it is simply call another class from the tag you want to be different from all the rest of the same kind of tag.
An example is when you have specified the following:
<STYLE TYPE="text/css">
<!--
LI {font-size: 12pt; font: arial; color: blue;}
.redtext {color: red;}
-->
</STYLE>
<UL>
<LI>A list item with the normal class
<LI CLASS="redtext">A list item using the "redtext" class.
</UL>
This gives the following result:
- A list item with the normal class.
- A list item using the "redtext" class.
Tags can also have what are called inline styles defined in them. This simply means that styles can be defined in the HTML code rather than having to be specified as classes in the header between the <STYLE> tags. The format is as follows:
<TAG STYLE="attribute: setting;">Any page Element</TAG>
An example is:
<U STYLE="font-weight: demi-bold; color: green;">Some text with an Inline Style</U>
Which results in:
Some text with an Inline Style
The other way of introducing styles to a page is by linking a stylesheet file to the web page. This enables you to be able to modify the styles which affect a whole group of pages by editing one file, which is especially good if you want your whole site to look reasonably the same, or at least have the same text fonts and sizes. The way you link to external stylesheet files is using the following code on the header (between the <HEAD> and </HEAD> tags):
<LINK REL=STYLESHEET HREF="path/to/stylesheet/.css" TYPE="text/css">
The path/to/stylesheet/.css is the exact URL of the stylesheet.
External Style Sheets are created by simply defining the styles as shown but without any HTML tags in the file, so for example, this could be an external style sheet:
LI {font-size: 12pt; color: green;}
.boldgreen {font-weight: bold; color: green;}
The style sheet is then saved as a file with the .css extension. As an example, lets say I've created a file called "homepage.css". I would link to it by putting the following in the header of the page/s that used it:
<LINK REL=STYLESHEET HREF="homepage.css" TYPE="text/css">
Something special you can do is make different styles for links depending what status they have: whether they are unvisited, visited or active (when a link is clicked it flashes it's active colour). The way to do it is as follows:
A:link {attribute: setting}
A:visited {attribute: setting}
A:active {attribute: setting}
Where the attribute and setting are the normal way styles are defined. The A:link is for unvisited links, the A:visited for visited links, and the A:active for active links. These style definitions are like any others and go between the <STYLE> tags in the header.
Style Sheets support the following properties:
| Attribute | Description | Possible Values | Example |
|---|---|---|---|
| font-size | Sets the size of the font in points | any number in points (pt) pixels (px) centimetres (cm) inches (in). |
{font-size: 12pt} |
| font-family | Sets the actual font | Typeface name Font Family name |
{font-family: courier} |
| font-weight | Sets thickness of type. | extra-light light demi-light medium demi-bold bold extra-bold |
{font-weight: bold} |
| font-style | Sets text in italics or not | normal italic |
{font-style: italic} |
| line-height | Sets the distance between bottoms of each line of text. | points (pt) inches (in) centimeters (cm) pixels (px) percentage (%) |
{line-height: 24pt} |
| color | Sets color of text. | color-name RGB triplet |
{color: blue} |
| text-decoration | Underlines or highlights text. | none underline italic line-through overline blink |
{text-decoration: underline} |
| margin | Sets the value for all the margins. | Numbers separated by commas in the order: top, right, bottom, left. If only one value is specified, it applies to all four margins. | {margins: 12, 34, 4, 34} |
| margin-left | Sets distance from left edge of page. | points (pt) inches (in) centimeters (cm) pixels (px) |
{margin-left: 1in} |
| margin-right | Sets distance from right edge of page. | points (pt) inches (in) centimeters (cm) pixels (px) |
{margin-right: 1pt} |
| margin-top | Sets distance from top edge of page. | points (pt) inches (in) centimeters (cm) pixels (px) |
{margin-top: -20px} |
| text-align | Sets justification. | left center right justify |
{text-align: right} |
| text-indent | Sets distance from left margin. | points (pt) inches (in) centimeters (cm) pixels (px) |
{text-indent: 0.5in} |
| background-color | Sets background images or colors. | URL color-name RGB triplet |
{background-color: #33CC00} |
| a:hover | Used once in the style definition to specify the colour links go when the cursor is over them. | color-name RGB triplet |
<STYLE TYPE="text/css"> A:hover {color: #0000FF; } </STYLE> |
| height | Specifies the height of an object. | points (pt) inches (in) centimeters (cm) pixels (px) |
{height: 48px} |
| width | Specifies the width of an object. | points (pt) inches (in) centimeters (cm) pixels (px) |
{width: 57pt} |
| letter-spacing | The spacing between the letters in a word. | A number in em s (1em is the space taken up by the letter m) | {letter-spacing: 3} |
| background-image | Used to specify an image as a background. | Filename URL |
{background-image.url(back.gif)} |
| background-repeat | Whether and how the background is tiled. | repeat-x repeat-y repeat |
{background-repeat: repeat} |
| background-position | If the background doesn't repeat, you'll probably want to position it. | top bottom center left right The format is first the horizontal parameter and then the vertical. |
{background-position: right, center} |
| background-attachment | How the background behaves when the page scrolls. | fixed [background doesn't move as you scroll, so you can have an image that is the background only at the top of a page] scrolling [as normal, the default]. |
{background-attachment: fixed} |
| word-spacing | The space between words | em | {word-spacing: 6 } |
| vertical-align | The vertical alignment of an object | baseline sub [that means subscript] super [superscript] text-top [aligned with the top of the paragraph text] text-bottom middle top bottom x% [where x is a number indicating the %age distance from the baseline, +ve or -ve] |
{vertical-align: text-top} |
| text-transform | Changes the text to a different case. | capitalize [the first letter of each word] uppercase lowercase none |
{text-transform: capitalize} |
| padding-top padding-bottom padding-left padding-right |
Used for tables, to define the distance of the cell wall from the text. | Any unit of measurement, or a percentage. | {padding-top: 23px} |
| padding | Sets the value for all padding. | Any unit of measurement, or a percentage. | {padding: 10px} |
| border-top border-bottom border-right border-left |
Sets the type of border on each side of an object. | [One of the following border types] none dotted dashed solid double groove ridge inset outset [and then a colour]. |
{border-top: dashed red} |
| border-top-width border-bottom-width border-right-width border-left-width |
Set the thickness of an object's separate borders. | Any unit of measurement, a percentage, or one of the following: thin medium thick |
{border-top-width: 4px} |
| border-width | Set the thickness of all of an object's borders. | As above. | {border-width: medium} |
| border-color | Color of all of an object's borders. | Any colour. | {border-color: red} |
| border-style | Style of all of an object's borders. | none dotted dashed solid double groove ridge inset outset |
{border-style: groove} |
| border | Group all the border attributes together for all of an object's borders. | Order for specification is: width style color |
{border: thick dashed blue} |
| float | Similar to ALIGN in HTML. | left right none |
{float: right} |
| clear | Same function as <BR CLEAR="x"> | none right left leftright |
{clear: left} |
| display | How text with the style is displayed. |
none [isn't displayed] |
{display: block} |
| white-space | How blank spaces and new lines in the code are displayed. |
normal |
{white-space: nowrap} |
| list-style-type | The type of list markers (bullets) that are displayed. | disc circle square decimal [normal numbers] lower-roman [e.g. i, ii, iii] upper-roman [e.g. I, II, III] lower-alpha [e.g. a, b, c] upper-alpha [e.g. A, B, C] none |
{list-style-type: square} |
| list-style-image | The image used as a bullet in a list. | The URL from an image, bullet.gif can be changed to the filename or Internet address you want. | {list-style-image: url(bullet.gif)} |
| list-style-position | How the lines in a list are placed. | inside [second and subsequent lines are justified with the item
marker] outside [default, subsequent lines are indented] |
{list-style-position: inside} |
| list-style | Group all the list-style attributes together. | Order is: list-style-type list-style-image list-style-position Note that you don't normally have both list-style-type and list-style-image. |
{list-style: circle inside} | position | How objects are positioned on a page. | absolute [you specify the exact left and top distances] relative [co-ordinates relative to the previous object] static |
{position: relative} |
| visibility | If the object the style is applied to is visible or not. | inherit [takes the visibility of the parent object, e.g. text in
a table inherits the table's visibility] visible hidden |
{visibility: hidden} |
| overflow | How text that doesn't fit into a container is displayed. | hidden [what doesn't fit gets cut off] visible [text "overflows" out of the container] scroll [scrollbars appear if doesn't fit] auto |
{overflow: scroll} |
| z-index | The stacking order of layers. The lower the index the higher up the stack. This defines when two or more layers are on top of eachother which is displayed. | auto a number value, such as 1 or 2... |
{z-index: 1} |
| cursor | The style of cursor the user's pointer takes on when they pass it over the object with this style. |
hand |
{cursor: hand} |
Possible colour names are:
- black
- silver
- gray
- white
- maroon
- red
- purple
- fuchsia
- green
- lime
- olive
- yellow
- navy
- blue
- teal
- aqua
There are a few more attributes which are only supported by Internet Explorer 4.0, such as filter, which can produce drop shadows on text, (and other effects), page-break, and clip.
Well, this has been a rather long tutorial, but I think you'll agree it's been worth it.
