|
|
In the early days of web site design, prior to version 4.0 browsers, the only way to define how text looked, i.e. font size, colour etc. was to individually tag each bit of text. For example to set a piece of text to font size 3, colour green and font to Arial required the following HTML code :
|
<FONT SIZE=3 FACE="ARIAL"COLOR="GREEN">
|
which results in - This is text in green, font arial size=3
|
To make your web site have a consistent look you would need to tag all your text using the above HTML. This is all very well when you are building your site as you just need to remember to tag the text as you build. Once you have uploaded your web pages onto your site you have a constant design theme that runs throughout your site.
|
However, you now want to update all your green tags to be blue. To do this you have to edit every page with the tag. You're bound to miss some and loose the consistent theme your site had. A far easier option is to use style sheets. A style sheet is a template which contains style rules which can be used to set formatting for HTML tags.
|
A style sheet is a text file with the extension .css (which stands for Cascading Style Sheets). Define all your styles in this file and link to it from your web pages. So now when you have to amend all the green tags to blue you only have to edit the single .css file.
|
Firstly, to link to a Style Sheet file from your HTML code you need to put the link in the HEAD tags of your HTML page as shown below.
|
<LINK REL=stylesheet HREF="stylesheet.css"TYPE="text/css">
|
Now any page that includes the above tag will display the same style.
|
The .css file is made up of a number of tags, which relate to HTML tags within your HTML document. These tags have a number of properties, which define the style of the tag. These properties are held within {} brackets and have two parts, a selector and a declaration which are separated by a colon. For example a definition for the <H1>tag could be like this -
|
H1 {font-size:20pt;text-decoration:underline; font-family:Helvetica,Arial;color:red}
|
The properties above are fairly self-explanatory. The font-family property allows for a number of fonts to be selected. The browser selects the first font and if that is not on the target machine it then selects the next font in the list. This is because all fonts currently used on web sites use fonts that are on the browsing machine, so it's best to stick with the standard fonts for your web site. The color property can be expressed by either name (e.g. blue) or by the RGB value (e.g. in hex "#FFFFFF").
|
The font-family property can also include a generic family name. The generic font family is usually used as a last alternative. The following generic families are available -
|
| 'serif' (e.g. Times) |
| 'sans-serif' (e.g. Helvetica) |
| 'cursive' (e.g. Zapf-Chancery) |
| 'fantasy' (e.g. Western) |
'monospace' (e.g. Courier)
|
Quotes are required around font names that contain spaces e.g. BODY {font-family : "my new font", fantasy}
|
Font size can be expressed in a number of ways:- absolute size are descriptive terms used by the browser and range 'xx-small' to 'xx-large', relative size allows text size to be relative to the parent object and can either be 'larger' or 'smaller', percentage allows the font size to be expressed as a percentage of the inherited size, e.g. H1 {font-size:125%) set H1 to be 125% larger than the regular body text.
|
The font-style attribute adds emphasis to the text and can either be 'normal', 'oblique' or 'italic', while the font-weight attribute adds 'normal', 'bold', 'bolder', 'lighter' emphasis. The font-weight property can also be expressed as a value of 100, 200 ... 900 where each number indicates a weight that is at least as dark as its predecessor. A 'normal' weight is valued at 400, while 'bold' is valued at 700.
|
Selectors can also be grouped together, as shown below which turns all H1, H2 and H3 text red.
|
H1, H2, H3 {color:red}
|
Another use of the .css file is to define your own tags, which you can include in your HTML. Consider the following example from my .css file -
|
.styletext {font-size:10pt; font-family:verdana;color:red}
|
You then group elements together in "classes" applying the same rule to that class by putting the following HTML code around your text, you can use the tag property within your web page.
|
<FONT CLASS=styletext>text</FONT>
|
Stylesheets can also be used for pinpoint positioning of objects as well as layering of images.
|
You can also include style rukes within your HTML document by via the <STYLE> tag. This tag usually appears within the <HEAD>of your HTML document, looking something like:
|
| <HEAD> |
| <STYLE TYPE="text/css"> |
| ...style rules go here |
| </STYLE> |
</HEAD>
|
Where HTML elements lack any style rules they can inherit the style rules of any elements that they are enclosed within. For Example :
|
| <HEAD> |
| <STYLE TYPE="text/css"> |
| B {color : green} |
| </STYLE> |
| </HEAD> |
| <BODY> |
| <B> |
| Click <font size="+1">here</font> to continue |
| </B> |
| </BODY> |
</HTML>
|
Here, since the <FONT> tag does not have any style inherits the style rule of the <B> tag which encloses it.
|
Some HTML tags also have pre-defined classes, the most well-know being the anchor element A, which has the following pre-defined classes :
|
A:link - refers to all hyperlinks in the document, A;visited - refers to all visited hyperlinks in the document, A:active - refers to the last hyperlink selected and A:hover - refers to the hyperlink the mouse pointer to currently hovering over. Using these hyperlinks you can use style sheets to allow different styles to be applied to each pre-defined class.
|
As well as the above font properties CSS also allow you to control spacing, alignment and appearance of text. Here are some examples -
|
{text-decoration: underline} */ under line text
{text-decoration: overline} */ display a line over text
{text-decoration: line-through} */ display text with a line through
{letter-spacing: 30px} */ controls the amount of space between characters
{text-indent: 10px} */ indent the first line of each paragraph
{text-align: left/right/center/justift} */ text horizontal alignment
{vertical-align: baseline/text-top/text-bottom/middle/sub/super/top/bottom}
*/ text vertical alignment
{text-transform: capitalise} */ capitalise first characters
{text-transform: uppercase} */ capitalise all characters
{line-height: 60px} */ alter space between lines
{background-image: url("http://yoursite.com/home.gif")}
*/ set background image for element
{background-attachment: scroll/fixed}
*/ scroll or not scroll image when page scrolled
{background-repeat: repeat/repeat-x/repeat-y/no-repeat}
*/ Tile image horizontally/vertically
{background-position: left/right/center/top/middle/bottom}
*/ location of background image
{margin-top/margin-bottom/margin-right/margin-left: 10px} */ specify margins
{margin: 5px 10px 5px 10px} */ set all margins in one go
{margin: 5px} */ set all margins in one go
{border-top-width/border-bottom-width/border-left-width/border-right-width:10px}
*/ specify border sizes
{border-width: 15px} */ specify all borders
{padding-top/padding-bottom/padding-left/padding-right:10px}
*/ specify padding sizes
{padding: 15px} */ specify all padding sizes
{list-style-type: disc/circle/square/decimal/lower-roman/upper-roman/
lower-alpha/upper-alpha} */ specify list item marker
{list-style-image: url("bullet.gif")} */ specify own list marker image
|
Include comments in your style sheets by enclosing the comments like /* comment */
|
The following units of measurement can be used to specify stylesheet values
|