Style Sheets are basically a set of design rules that you need create only once and use them over and over.
These rules (eg. say, you don't want the hyperlinks on your website to be underlined see example 3 below ) can then be applied anywhere on your site without having to repeatedly give the 'no underlining' command to each and every hyperlink.
Still not convinced. Well imagine you have a 1000 page web site and you decide that you want to change the headings on each page from green to blue. This would be a major task to undertake, involving going through each HTML page and changing each heading by hand.
If you have used a style sheet this would be a five minute job. By changing the colour in the style sheet rules that you made for the page headings (the <H2> tag for instance>), that would then change the colour of all headings with the <H2> tag in your web page.
CSS, HTML, Netscape Navigator and Internet Explorer
HTML (Hyper Text Markup Language) is the main language used for the design of websites. If you already have some knowledge of HTML then you will find learning CSS very easy as they share most of the same tags: <bold>, <p> etc. In the main, Internet Explorer and Netscape Navigator both support CSS. Embedded code (see below) will work in every type of browser: there can be issues with external (see below) style sheets.
Types Of Cascading Style Sheets
Inline: This is where the CSS rules are added within a HTML tag in the body (<body> and </body> sections) of the document. This way is quite limited as only that one tag would be changed by its rules.
Embedded: The CSS in written in the <head> and </head> sections of the HTML page. Any tags in the document that relates to the CSS will be affected by it. Embedded code will work in every type of browser.
External: A new document needs to be made and this will hold all of the different CSS rules for the whole website. By putting a link to this document in the <head> and</head> of each page in your website, the rules will apply to each page. This type of style sheet would seem to be the most useful although at the moment they are not 100% compatible/reliable in some browsers and some operating systems, although this can be overcome by more specific coding which goes beyond this article.
Creating an External Style Sheet
Using your favourite text editor (Notepad for instance) create a new document called 'filename.css'. Decide on the rules that you want to apply to your website (see example 1 below) and then save it.
In the head of every web page that you want to follow those rules ,write a link to the CSS document (see example 2 below).
All that's left to do is FTP (upload) both the CSS file and the HTML file online and with a bit of luck, you should have much more control over the design of your website.
Tip: If your going to use any of the following code, copy and paste the code into a text editor/document (Notepad) to ensure you do not copy any of the HTML from this web page. Then past into the relevant part of your HTML web page.
example 1
embedded
The code below will change the colour, font family (type), and size of every heading that is within the <h2> and </h2> HTML tags. This can be placed either in a external CSS file or in the head of a HTML file.
<style type="text/css">
h2 {color:black;
font-family:Arial;
font-size:14pt;}
</style>
Tip: If you are intending to use these rules in an external style sheet (see examples 2 and 3), there is no need to use the <style type="text/css"> and </style> tags.
Example 2
external
This short piece of code would be placed in the <head> and</head> sections of a HTML page. By writing in the address of your CSS document, the HTML page will then be linked to an external CSS file and will then follow its style rules.
<link rel="STYLESHEET" type="text/css" xhref="http://www.yourwebsite/yourstylesheet.css" />
Example 3
embedded
To remove all underlines from links from a page, as we have with this page you are viewing, put this code in between the <head> and </head> sections of the HTML page.
<style type="text/css">
a:link{text-decoration:none}
a:active{text-decoration:none}
a:visited{text-decoration:none}
a:hover {color: #FF0000}
</style>
external
The code below is also used to remove all underlines from links, but can be used on as many pages as you desire. By putting the code in its own CSS file, it no longer needs style attributes (<style type="text/css">and </style>). Now any HTML page with a link to this file will follow the CSS style rules.
a:link{text-decoration:none}
a:active{text-decoration:none}
a:visited{text-decoration:none}
a:hover {color: #FF0000}
Relevant Articles
