Post by Skyrocket on Mar 30, 2006 14:12:59 GMT -5
The original vision for the Internet was to publish and share information across the world so that institutions could benefit from each other’s knowledge. The idea was not to create wonderful websites using as many colors as possible, with flashing images and designs to blow your mind. I’m telling you this because it affects how HTML is developed and how sites will be created going forward. HTML has come along way with companies such as Microsoft and Netscape developing their own additions (propriety tags) that allow you to do things like scrolling text, webpage transition effects and flashing text. The only issue is that what works in one browser will not work on another. The Worldwide Web Consortium have recognized this and come up with a solution that will allow HTML to be used in essence for its original purpose of delivering content, whilst the formatting is kept separately. This solution will also have cross-browser functionality and they’ve called it Cascading Style Sheets.
Cascading Style Sheets (CSS) gives you greater control with the formatting of your site than you can get from using basic HTML. Probably the best feature of CSS is that you can keep all the formatting information in a completely separate file to your web pages. This means that with one change in one file you can alter the formatting in one web page or hundreds of web pages in one go!
CSS is simply a text document saved with a .css extension. So you can create one in Notepad or any text editor and then save it as mystyle.css for instance. All you then need to do is put a link to this document into your webpages. This link would sit in the <head> section of the code, maybe keep it just under the <title> line so that you can always find it when you need to. The link would look like this: <link rel="stylesheet" href="mystyle.css" type="text/css" />.
OK, so on to creating stylesheets. First off I’m not going to give you a whole tutorial on stylesheets, I’ve learnt my lesson on trying to reinvent the wheel and believe me it’s a waste of time and energy, so here’s a great tutorial that’ll get you started in the world of CSS: www.webmonkey.com/webmonkey/authoring/stylesheets/tutorials/tutorial1.html
What I will do though is give you a little flavor of stylesheet coding and if you’ve read my monster of a post called Using Tables, then this’ll give you a bit of an insight as to how I’ve used stylesheets to format individual tables and different link states.
First off you’ll want to set up the general formatting of the text and colors on your site. Normally you’d do this in the <body> tag in your HTML, however we are using CSS, so we’ll do it all here. The way stylesheets work is that you assign formatting to specific areas of your website. You pick out these areas either by using the tags that are used in the HTML or you give the area a specific name using the “class” attribute.
So to set up the style for all the content that appears the <body> section you would type in something like this:
body { background-color: #ffffff; /* You can write comments like this */
color: #000000; /* This is the text color */
font-family: Arial, Tahoma, sans-serif;
font-weight: 500 /* This is the boldness of the font, range from 100 to 900 */
font-size: 12pt;
}
So as you can see, you type in the tag name (ie: body) and the in between { and } you’ll put in the different elements and their value. If you know the CSS language then you can see how easy this is!
To assign formatting to other specific areas of your site you can either use other tags or use the “class” attribute. For instance, you can make anything that appears between the header tag <H2> a red color by putting this in the CSS:
H2 {color: #ff0000;}
Now I use a lot of tables in my sites to help me keep the site neat and professional looking, plus it also allows me to assign specific styles to different areas of the site easily. All I do is add the class attribute to the table tag and give it a name. So for my link bar for instance, in the table that holds the link bar I’ve put class="linkbar". Then in my CSS I’ve assigned some specific styling to the link bar:
.linkbar {background-color: #333333;
color: #dddddd;
font-size: 10pt;
border-top: solid 3px #ffffff;
border-bottom: solid 3px #ffffff;
padding-left: 3px;
padding-right: 3px;
}
You’ll notice that I’ve put a full-stop in front of the word linkbar in the CSS, that is to tell the browser that reads the CSS that this is a class attribute and not a normal tag.
So lets say that I have hundreds of web pages linked to this CSS document. Now if I decide that it’s better to have a blue background to my link bar across all the pages then all I have to do is go into the CSS document and change the background color in the .linkbar formatting to #0000ff, and hey presto, they’ve all changed in an instant!
As well as background colors you can give table borders different styles, background images and even stretch out the font if you wanted to! So I hope you can see how powerful this can be! If you’re not convinced yet then read on and hopefully I’ll convince you.
Have you set up your links to show up different colors when you when you’ve clicked on them? This is known as link states. In basic HTML you can assign different colors to the links so that it has a different color when it has been clicked and when it’s been visited. Using CSS you can also make use of an extra link state, which is hover. This gives the link another color when you hover over it with your mouse cursor.
Well actually it gets better. Because not only can you give it another color, you can have the links set up to have no underline and then have the line appear when you hover over it. In fact the font can even change size, width, boldness. To set up the different link states you’d put the following into your CSS document:
a:link {color: #3333cc;
text-decoration: none;}
a:active {color: #3333cc;
text-decoration: none;}
a:visited {color: #33cc33;
text-decoration: none;}
a:hover {color: #cc3333;
text-decoration: underline;}
This simple piece of CSS will make all your links blue with no underline. When you hover over the link the underline will appear and it’ll turn the font color red. OK, impressed yet? If not then how about assigning different link states to different links, depending on where they are on the web page. So for instance I have a link bar which has a dark background and white text links. However on my main page the white background would make it hard to see these links, so I want the links on the white background to show up blue. The way to do this is similar to assigning the class attribute to different areas of the web page. You would simply type in the same code as above, but with a class name behind it. For example:
a:link.lb {color: #cccccc;
text-decoration: none;}
a:active.lb {color: #ffffff;
text-decoration: none;}
a:visited.lb {color: #cccccc;
text-decoration: none;}
a:hover.lb {color: #ffffff;
text-decoration: underline;}
Now all I have to do is put class="lb" in the <a> tag of each link I want assigned this format.
That’s as far as I’ll go with this subject here, I hope it’s given you some insight into how you can use CSS to format your entire website and additional sites as your business grows. The Web Monkey tutorial is excellent and should give you all the basics you need to get started. It might take a little while to get through it and learn it, but believe me, it’s worth it.
Good luck
Cascading Style Sheets (CSS) gives you greater control with the formatting of your site than you can get from using basic HTML. Probably the best feature of CSS is that you can keep all the formatting information in a completely separate file to your web pages. This means that with one change in one file you can alter the formatting in one web page or hundreds of web pages in one go!
CSS is simply a text document saved with a .css extension. So you can create one in Notepad or any text editor and then save it as mystyle.css for instance. All you then need to do is put a link to this document into your webpages. This link would sit in the <head> section of the code, maybe keep it just under the <title> line so that you can always find it when you need to. The link would look like this: <link rel="stylesheet" href="mystyle.css" type="text/css" />.
OK, so on to creating stylesheets. First off I’m not going to give you a whole tutorial on stylesheets, I’ve learnt my lesson on trying to reinvent the wheel and believe me it’s a waste of time and energy, so here’s a great tutorial that’ll get you started in the world of CSS: www.webmonkey.com/webmonkey/authoring/stylesheets/tutorials/tutorial1.html
What I will do though is give you a little flavor of stylesheet coding and if you’ve read my monster of a post called Using Tables, then this’ll give you a bit of an insight as to how I’ve used stylesheets to format individual tables and different link states.
First off you’ll want to set up the general formatting of the text and colors on your site. Normally you’d do this in the <body> tag in your HTML, however we are using CSS, so we’ll do it all here. The way stylesheets work is that you assign formatting to specific areas of your website. You pick out these areas either by using the tags that are used in the HTML or you give the area a specific name using the “class” attribute.
So to set up the style for all the content that appears the <body> section you would type in something like this:
body { background-color: #ffffff; /* You can write comments like this */
color: #000000; /* This is the text color */
font-family: Arial, Tahoma, sans-serif;
font-weight: 500 /* This is the boldness of the font, range from 100 to 900 */
font-size: 12pt;
}
So as you can see, you type in the tag name (ie: body) and the in between { and } you’ll put in the different elements and their value. If you know the CSS language then you can see how easy this is!
To assign formatting to other specific areas of your site you can either use other tags or use the “class” attribute. For instance, you can make anything that appears between the header tag <H2> a red color by putting this in the CSS:
H2 {color: #ff0000;}
Now I use a lot of tables in my sites to help me keep the site neat and professional looking, plus it also allows me to assign specific styles to different areas of the site easily. All I do is add the class attribute to the table tag and give it a name. So for my link bar for instance, in the table that holds the link bar I’ve put class="linkbar". Then in my CSS I’ve assigned some specific styling to the link bar:
.linkbar {background-color: #333333;
color: #dddddd;
font-size: 10pt;
border-top: solid 3px #ffffff;
border-bottom: solid 3px #ffffff;
padding-left: 3px;
padding-right: 3px;
}
You’ll notice that I’ve put a full-stop in front of the word linkbar in the CSS, that is to tell the browser that reads the CSS that this is a class attribute and not a normal tag.
So lets say that I have hundreds of web pages linked to this CSS document. Now if I decide that it’s better to have a blue background to my link bar across all the pages then all I have to do is go into the CSS document and change the background color in the .linkbar formatting to #0000ff, and hey presto, they’ve all changed in an instant!
As well as background colors you can give table borders different styles, background images and even stretch out the font if you wanted to! So I hope you can see how powerful this can be! If you’re not convinced yet then read on and hopefully I’ll convince you.
Have you set up your links to show up different colors when you when you’ve clicked on them? This is known as link states. In basic HTML you can assign different colors to the links so that it has a different color when it has been clicked and when it’s been visited. Using CSS you can also make use of an extra link state, which is hover. This gives the link another color when you hover over it with your mouse cursor.
Well actually it gets better. Because not only can you give it another color, you can have the links set up to have no underline and then have the line appear when you hover over it. In fact the font can even change size, width, boldness. To set up the different link states you’d put the following into your CSS document:
a:link {color: #3333cc;
text-decoration: none;}
a:active {color: #3333cc;
text-decoration: none;}
a:visited {color: #33cc33;
text-decoration: none;}
a:hover {color: #cc3333;
text-decoration: underline;}
This simple piece of CSS will make all your links blue with no underline. When you hover over the link the underline will appear and it’ll turn the font color red. OK, impressed yet? If not then how about assigning different link states to different links, depending on where they are on the web page. So for instance I have a link bar which has a dark background and white text links. However on my main page the white background would make it hard to see these links, so I want the links on the white background to show up blue. The way to do this is similar to assigning the class attribute to different areas of the web page. You would simply type in the same code as above, but with a class name behind it. For example:
a:link.lb {color: #cccccc;
text-decoration: none;}
a:active.lb {color: #ffffff;
text-decoration: none;}
a:visited.lb {color: #cccccc;
text-decoration: none;}
a:hover.lb {color: #ffffff;
text-decoration: underline;}
Now all I have to do is put class="lb" in the <a> tag of each link I want assigned this format.
That’s as far as I’ll go with this subject here, I hope it’s given you some insight into how you can use CSS to format your entire website and additional sites as your business grows. The Web Monkey tutorial is excellent and should give you all the basics you need to get started. It might take a little while to get through it and learn it, but believe me, it’s worth it.
Good luck
