Tweet
Please note. Some basic HTML knowledge or the ability to edit the HTML coding on your pages will be required. At the end of this section CSS may still be fairly useless to you but we will soon move on and you will soon become addicted to what CSS can achieve.
Create a style sheet:
On your windows desktop do a right mouse click. From the menu that appears select NEW. From the submenu that appears click TEXT DOCUMENT. Do not write anything in this document. Save it as bvstyle.css but ensure that you save it in the same location on your hard disk as your current INDEX.HTML page. This blank page is where all of your CSS commands will exist.
Make your web pages use the style sheet:
The following line of code needs to be added to every page that will make use of your style sheet. Please note. This line of code must go in the HEAD of each page. The head of each page is located at the top. It starts with <head> and ends with </head>. Placing the code anywhere inbetween these tags will make that page 'call' the style sheet and therefore the instructions contained within.
<LINK REL=STYLESHEET TYPE="text/css" HREF="bvstyle.css">
CSS Commands:
Each CSS command is made up of 3 sections. a selector, a property and a value.
Selector:
The selector is usually a HTML command. You can define the HTML command. For example...
a = the HTML tag for a hyperlink.
p = the HTML tag for normal text.
h1 = the HTML tag for header text (maximum = 6 (for example h6)).
Property:
The property is the page element that you wish to alter. For example...
Margin = To alter the margin size around your page elements.
Font = To alter the font.
Color = To alter the colour of a text, hyperlink or other page element).
Value:
The value must be added to the property in order to define the style. This is the way in which you wish the property to be altered. For example...
Blue = Combined with the Font property above the text on your page will appear blue.
Example:
In this example we will deal with hyperlinks (HTML tag A). On your style sheet you can enter the following code. The code has been colour coded as per the definitions above.
A:link {text-decoration: none; color: #0000CC}
A:visited {text-decoration: none; color: #0000CC}
A:hover {text-decoration: underline; color: #0000CC}
Explanation:
There are three lines of code above for each hyperlink style. The normal hyperlink as it appears on your page (link), the hyperlink after it has been clicked upon (visited) and the hyperlink whilst the mouse pointer is hovered over it (hover).
Notice that all of the style properties and values are inside a set of curly brackets. You need to define the selector, in this case hyperlinks (A) and then all of the CSS commands will go inside these curly brackets.
In the code above your hyperlinks will remain the same colour permanantly as you can see by the hex colour codes that I have used. You will also see that the text decoration remains constant except when the link is hovered over in which case an underline will appear.
The only other thing to note is colons and semi-colons. Here is how it works...
define the property insert a : (colon) and then define the value. If you wish to add more styling such as font size or in the case of the example above a colour instruction then you need to seperate the commands with a ; (semi-colon). The final instruction does not require a semi-colon. This is only required to seperate the listed instructions for example...
{property:value; property:value;property:value}
This can be broken down as follows...
property:value; ....... property:value; ........ property:value
Create a style sheet:
On your windows desktop do a right mouse click. From the menu that appears select NEW. From the submenu that appears click TEXT DOCUMENT. Do not write anything in this document. Save it as bvstyle.css but ensure that you save it in the same location on your hard disk as your current INDEX.HTML page. This blank page is where all of your CSS commands will exist.
Make your web pages use the style sheet:
The following line of code needs to be added to every page that will make use of your style sheet. Please note. This line of code must go in the HEAD of each page. The head of each page is located at the top. It starts with <head> and ends with </head>. Placing the code anywhere inbetween these tags will make that page 'call' the style sheet and therefore the instructions contained within.
<LINK REL=STYLESHEET TYPE="text/css" HREF="bvstyle.css">
CSS Commands:
Each CSS command is made up of 3 sections. a selector, a property and a value.
Selector:
The selector is usually a HTML command. You can define the HTML command. For example...
a = the HTML tag for a hyperlink.
p = the HTML tag for normal text.
h1 = the HTML tag for header text (maximum = 6 (for example h6)).
Property:
The property is the page element that you wish to alter. For example...
Margin = To alter the margin size around your page elements.
Font = To alter the font.
Color = To alter the colour of a text, hyperlink or other page element).
Value:
The value must be added to the property in order to define the style. This is the way in which you wish the property to be altered. For example...
Blue = Combined with the Font property above the text on your page will appear blue.
Example:
In this example we will deal with hyperlinks (HTML tag A). On your style sheet you can enter the following code. The code has been colour coded as per the definitions above.
A:link {text-decoration: none; color: #0000CC}
A:visited {text-decoration: none; color: #0000CC}
A:hover {text-decoration: underline; color: #0000CC}
Explanation:
There are three lines of code above for each hyperlink style. The normal hyperlink as it appears on your page (link), the hyperlink after it has been clicked upon (visited) and the hyperlink whilst the mouse pointer is hovered over it (hover).
Notice that all of the style properties and values are inside a set of curly brackets. You need to define the selector, in this case hyperlinks (A) and then all of the CSS commands will go inside these curly brackets.
In the code above your hyperlinks will remain the same colour permanantly as you can see by the hex colour codes that I have used. You will also see that the text decoration remains constant except when the link is hovered over in which case an underline will appear.
The only other thing to note is colons and semi-colons. Here is how it works...
define the property insert a : (colon) and then define the value. If you wish to add more styling such as font size or in the case of the example above a colour instruction then you need to seperate the commands with a ; (semi-colon). The final instruction does not require a semi-colon. This is only required to seperate the listed instructions for example...
{property:value; property:value;property:value}
This can be broken down as follows...
property:value; ....... property:value; ........ property:value
Comment