Cascading Style Sheets (CSS)
Introduction
Cascading style sheets (CSS) have quickly become one of the most popular web page utility tools used on the Net. Due to their simplicity of use and the ability to save time and effort, they are a web designers dream come true (well OK, they are pretty good).
CSS is a simple programming language that can be used to easily control the design of a web page, page's or even an entire site.
What Are Style Sheets
Style sheets are not as grand as they sound: they are just a few lines of code that are generally entered in between the <head> and </head> sections of the HTML of a web page to perform some simple action.
Where a style sheet is used to do the same action on a number of similar pages, the style sheet coding within the <head> will 'talk' to a master style sheet on the hosting server.
Tip: Right click on this web page and choose 'view source'. At the top of the text sheet page (that appears) you will see a style sheet (in <style> and </style> marks) that sets the default action for ALL the links on this page.
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
There are three different types of style sheets that can be used:
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" href="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}
|
