| 
24, March. 10: New Technology Blog Domain Name
Recently I have changed the location of my technology blog. It used to be part of my social blogs sub domain, but now it has its very own... more >>
21, Feb. 10: Internet Safety
How safe am I online? The answer to this question is very difficult to say, so to try and explain it I have created a new section of my site called Internet Safety, in which... more >>
|
| | |
Introduction
Styles Sheets are a way to get different colour and size, fonts onto your website, whilst being search engine friendly.
What do they look like?
All Style Sheets look basically the same. A verysimple Style Sheet
would look like this
.content {
font-size: 10px;
color: #000000;
}
This would create a page with size10, black (#000000) coloured text.
How do I structure one?
To make a Style Sheet you need to know what font you want to use, this is represented by:
font-family: Verdana, Arial, Helvetica, sans-serif;
Changing the font names will change the font displayed.
(The reason you put lots fonts is because different operating systems i.e. Windows, Mac, Linux etc, have different font, so if for example Linux does not have Arial the computer will choose another similar one from the list.)
You also need to know the font size, this is represented by:
font-size: 10px;
Changing the number will change the font size.
Another thing you need to know is the font weight, i.e. is the text bold, bolder, thin or normal? The font weight part is represented by:
font-weight: normal;
Changing the word normal to ether: bold, bolder or any number between 100 and 900, (the higher the number the bolder the text) will will change the font thickness.
Another thing you need to know is the colour of your font. This is represented by:
color: #000000;
Inputting any valid font code into the area before the ; and after the # will change the font colour.
The final bit of information you need to know is whether the text is to be underlined or not. This is represented by:
text-decoration: none;
Changing the word none to underlined will change the text to underlined text.
When you put it all together it should look something like this:
.content {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #000000;
text-decoration: none;
}
How do I link the Style Sheet to the page?
For a Style Sheet to be represented with a page, you must put a link between the <head> and </head> section of the web page to it.
<link href="/stylesheet.css" rel="stylesheet" type="text/css">
The above links to a Style Sheet so put this in the head section of your page.
If you wan to link to a certain colour or thickness of font in one specific bit of text, find the text code from your Style Sheet and put these tags around your text: <span class="your class goes here, e.g. contentbold"> your text </span>.
Bellow is a link to a simple Style Sheet, which you can download and use as you wish.
A sample Style Sheet
Bellow are come links toStyle Sheets I have made, that you can download and use.
Sample Style Sheet simple
Sample Style Sheet complex |
| |
 | |  | ©Christopher Limited |
|
