| 
27, May. 11: Sebastian's Games
Recently I have been adding loads of new games to my Sebastian Roberts (my brothers) website. There are a few non flash games there, but now there are loads off cool games from... more >>
13, May. 11: Technology Bloggers
A few months ago I gave up my technology blog in order to become part of a much bigger project. One month ago today, I launched a blog called Technology Bloggers. This was to become a fantastic... more >>
Get a flash bar on your website! |
| | | IntroductionStyles 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 very simple 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 fonts, 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 SheetBellow are come links toStyle Sheets I have made, that you can download and use.
Sample Style Sheet simple
Sample Style Sheet complex |
| |
 | |
|
