Christopher Roberts Website Logo
Christopher Roberts Website Slogan: Fun, education, and animation...
Loading...
  
News
RSS FeedRSS Feed

24, Mar. 12: New Online Home
On the 9th of March 2012, I purchased the domain name ChristopherRoberts.co.uk. Basically I bought the same domain as this, but without the dash... more >>

24, Mar. 12: 2012 News
Well, it's been a long time since I have done a news update! I had some news to publish, but as it is now 2012, I have archived the 2011 news... more >>

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Get a flash bar on your website!
Top Corner

Style Sheets

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 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 Sheet

Bellow are come links toStyle Sheets I have made, that you can download and use.

Sample Style Sheet simple

Sample Style Sheet complex
Bottom Corner 
 
©Christopher Limited - Find out more about Christopher Roberts