Cascading Style Sheets (1)
Cascading Style Sheets, or CSS for short, are pieces of script that are included in the <HEAD> section of your website. In a nutshell, they dictate the fonts and colours of the page without you having to use <font face="arial,verdana" size="2"> etc on the page every time you use text.
There is a lot more to CSS than that, but that's the main part of it. Let me give you an example. If you look at the source code for this page (click the button below) you will see my CSS codes in the <HEAD> section.
You will see that my code looks like this:
<style type="text/css">
body,td { font-family: verdana, arial, helvetica; color: #000000; font-size: 13px; }
A:link { text-decoration: none; color: #000080; }
A:visited { text-decoration: none; color: #800040; }
A:hover { text-decoration: underline; color: #FF0000}
</style>
...and occasionally this:
<style>.forms {background:"#BB0000"; color:"#ffffff";}</style>
Let's deal with each line, one at a time, starting with:
<style type="text/css">
This is the all-covering start of the CSS and informs the browser that there are CSS codes to follow. The next line is:
body,td { font-family: verdana, arial, helvetica; color: #000000; font-size: 12px; }
This states that the text in the body and enclosed in tables (hence the 'td' remark) are of the font family 'verdana, arial & helvetica', the default text colour will be '#000000' (or black), and the text size is 12 pixels (or font size 2).
If a different text size is required temporarily you will have to go back to the old method. So let's say you want a particular piece of text to stand out by increasing its size. You will have to say
<font size="3">text here</font>
If you want to change the font family, it would look like this:
<font face="times new roman">text here</font>
...and so on. In naturally follows that you can incorporate the two (and colours):
<font face="times new roman" size="3" color="#FF0000">text here</font>
You may have noticed that once the command is included inside the < and > tags, you don't have to repeat the word 'font'. You must close the font (</font>) otherwise every piece of text after the opening command will remain the same!
The next line is:
A:link { text-decoration: none; color: #0000FF; }
This means that all the text links are to be this colour. You can have any colour you want, but it is generally accepted that hyperlinks are blue.
Next line is:
A:visited { text-decoration: none; color: #800080; }
This line is also familiar to those of you who have written website before, and is normally included in the <BODY> tag. This line tells the browser that all visited links are to be coloured in this colour.
And the next line:
A:hover { text-decoration: underline; }
This one is for those of us who do not use underlined links by default. If this command was not included then all links would have that annoying underline like this one - a text link. It's a personal preference, but I don't like it.
By using the 'hover' command, only when the cursor is placed on a text link does the underline appear. As you have navigated you way to this page already, you will have noticed this on this website.
One thing I forgot to mention earlier. You can override the default link colour quite easily. My navigation bar on the left hand side of each page has red text links and the top ones are white. To do this just cover the link with a <font color="#FFFFFF">Text link</font>. The only disadvantage to this is that it remains white even when it has been visited, unlike other links which, as I mentioned above, change to this colour.
The next line - </style> - merely closes the CSS commands.
There are additional bits and pieces you can add / substitute, but I will save these for the next page.
Top
[1] [2] [3]
<<< Previous page
| 
