|
|
|
|
 |
Getting Started with Cascading Style Sheets Part 2 – How to Create CSS definitions In part one we looked at what cascading style sheets can do and why they are a Good Thing. In part two we’ll be looking at creating some simple examples both within an existing page and as a separate .css file. The basic syntax for a CSS definition is as follows: Selector { property: value }
You can also put multiple property settings in a single statement separated by semicolons: Selector { property1: value1; property2: value2 }
The Selector is usually an HTML tag such as ‘H1’ or ‘P’ . The property/value pairs are where you specify the actual styles. Let’s look at an example to make this clearer. The first example modifies the H1 header tag to align the header to the centre of a web page and to colour it blue. Whilst you can modify almost any HTML tag, you cannot change its basic function. For instance, if you try to make an H1 header the same size as body text, it will be ignored. As this example is only for use in a single page, it is embedded in the <head> section rather than kept in a separate file. <HEAD> <STYLE TYPE=”text/css”> H1 { text-align: center; color: blue }
</STYLE> </HEAD> Should you wish to have this in a separate .css file you would only include the style rule itself in the file as follows: H1 { text-align: center; color: blue }
To make use of the external .css file, you need to tell your web pages about the file(s). Assuming we had a style sheet called mystyles.css, this would be done by inserting the following line in the page’s <head> section: < LINK REL="stylesheet" TYPE="text/css" HREF="mystyles.css" > This is a very powerful technique. If you had a 40 or even 400 page web site, you could have a separate style sheet controlling the layout of every page. Should you suddenly decide later on that you actually preferred red text instead of blue, you simply have to change the code in a single file to change the look of all 400 pages. A huge time saving for just a little planning ahead. Grouping You can apply the same style to several related tags via grouping. This saves repetitive lines of code and speeds up page loading. This example changes all the headers styles so they generate text in a red sans-serif font. H1, H2, H3, H4, H5, H6 { color: red; font-family: sans-serif }
Compatability As your pages may be viewed using older browsers that do not understand style sheets, you need a way to make the older browsers ignore the extra code. This is done by wrapping HTML comments around your CSS declarations as follows: <HEAD> <STYLE TYPE="text/css"> <!-- H1 { text-align: center; color: blue }
--> </STYLE> </HEAD> This way, any non CSS compliant browsers should simply ignore all the extra CSS code. Neat! So far we have only covered the very basics of using style sheets and the syntax involved. There are many more options but for now it is best to get to grips with the basics before getting too involved with all the extra features. In Part 3 we’ll look at examples that change the font and text styles on your pages.
|
