If you are familiar with html you already know that it is limited in how it can be used to lay out a page. There are also many limitations in expanding attributes to: color, align and background elements, etc. If you wish to do mark-up on many of the tags in your page it can become quite tedious. It is also a real pain if you need or want to make some style change to your page(s). The easiest method is to keep your pages quite simple using basic html tags. If this isn't for you; if the artist within you wants more control over the display of your page; then style sheets are the quickest and easiest way to design and maintain your pages.
There are three methods in which to apply style sheet mark-up within your site.
So, what does the mark-up look like for each of the definitions?
Let us use a paragraph tag as an example
<p style="color:#ff0000">
This is what it would look like when placed within a page. The <p> tag has the additional identifier "style" added. Within the style identifier you define the style for the element. A listing of possible attribute styles you can add to the tag can be found on the CSS Attributes page.
All of the style mark-up must be placed within a single group of double quote marks. If you wish to add more mark-up for a tag use a semi-colon to seperate each pair group. Such as this:
<p style="color:#ff0000; font-weight:bold; background-color:#00fa9a; text-indent: 20px;">
This is how it will be rendered on a page.
There are two parts to each mark-up... the attribute, such a font-weight and the value of that attribute such as bold; each pairing must be seperated by the use of the colon (:). ei font-weight:bold
Now the sad part... no browser supports all of the CSS attributes. IE4 and above browsers do a fair job of rendering the proper display. They also use more of them. Netscape browsers renders some of them them less well or not at all. With the release of Netscape 6 this problem has been greatly lessoned. Perhaps in time browsers will give full support to all of the CSS1 standards. There are CSS2 standards, but this is not well supported by any browser at this time. I will not talk at this time about CSS2.
By the way, you may see some people using the short method of placing CSS on their page, such as;
font: italic bold 14pt 'Times Roman';
This is the short form for:
font-style:italic; font-weight:bold; font-size:14pt; font-face:'Times Roman';
A type of short hand but be aware that it is not well supported in Netscape 4 browsers. I use the longer version to avoid the problem.
As listed earlier this mark-up goes within the head of the document. Here is an example using the info in the above paragraph.
<style type="text/css"><!--If you want to style more elements you place the tag between the <style><!-- and the --></style> tags. One beneath the other. You may have noticed the use of single quotation marks ' ' that held the words Times Roman. It is important to remember when using font type names, that if the name is made up of two words such as Times and Roman, the quotes must be used to hold the name together.
The best part about using the style in the head of the document is that you only have to define the style once and it is used by every element of the same tag throughout the page. In this example, all paragraphs would have the exact same formating. To change all of the paragraphs and how then render you make changes to what is found in the head definition only.
Now we come to the question; "what if I want the same style to be used throughout all of the pages in the same directory?" I have used this method myself to define how all the pages in one category will look. An example of such is in "Answers to Man's Concerns." To format every page I simply needed to create a text file that had all the style mark-up within it." This is what would be found in the text file:
p {font-style:italic;
font-weight:bold;
font-size:14pt;
font-face:'Times Roman'}
Notice the absence of the "<style type="text/css"><!--" line. In the text file it is not necessary to write this or its closing part out. So how do we get the information in this file to work on the web page we have? Simply reference the text file in the head of the document. It will look like this:
<link rel="stylesheet" type="text/css" href="mystyles.css">
Of course you can name the file anything you wish. As for the .css you can save it as a text file as I do or you can SaveAs and add the css extension. In my case the link looks like this for "Answers for Man's Concerns":
<link rel="stylesheet" type="text/css" href="mcstyle.txt">
Of course using the .css ending for the file is the proper way. I just wanted to show you there are other ways to save the files. If you can, use the proper method. Some day when we move over to Xhtml mark-up, the change will be easier to make.
Here is the beauty of Cascading Style Sheets; you can use all three methods in your site and all for the same page if you wish. How so? You can use an external reference file to give the general mark-up as you would like to use in your site. If you want to change some aspect, such as a particular element within one page, you can give the definition in the head to affect all those tags. An example would be to indent the paragraphs on the page so that they start 20 pixels from the left. Adding this aspect to the head of the page will affect only that page. You could also change one of the aspects such as font-weight value to bolder instead of bold. It will change the font weight only in the page where it is found.
This does continue down even further. If you wanted to change just one paragraph, add it as an inline style. Again, the change would only affect that one paragraph. You could break it down further and change one word or even just one letter. Why does this work? Because it degrades gracefully. The closer you are to the thing being changed, the more control you have over it. It works like this:
The External affects every page that is linked to it in your site. The Embed in the head affects only the one page and takes precedence over any external css file. The Inline affects one single element in the page and takes precedence over external and embed style definitions.
Here is a page using the three examples within it.
So, enough for now. Try a few of the tags. Play around with them. Become familiar with what they are, how they're used, and what they look like. In fact... what even works. I suggest simply opening a blank page and trying to use them inline at first. We will go a little deeper in the next page.
Author: Joseph Raymond (nuB1)
21 March, 2001
go to: CSS Index Page