Style sheets are html 4's most powerful feature and most extensive addon. Here you will gain the knowledge needed to ensure your styles will achieve the effect you desire in both Netscape Navigator and Internet Explorer! Even experienced programmers will learn a thing a two here. There are three ways in which you can implement styles. External styles, Internal styles and local styles. Each is described in detail below. I recommend beginners start with Internal styles as they are the easiest to understand. To begin with , the syntax may look a little daunting to html programmers, but you will soon realize there are really only three new parameters. These are :
1: the opening brace { and closing brace } meaning group
2: the colon : meaning equals
3: the semicolon ; meaning next or new line
Internal style sheets
Below is a simple example you can copy to your html page. Internal styles are placed at the top of your page between the opening and closing <head> tags. The syntax is placed between opening and closing <style> tags like this:
<head>
<style>
b { color:red; font-size:15px; }
</style>
</head>
'b' represents the bold tag or <b> </b>. Everything between the 'braces' is what will be used to render the bold tag every time you use it. color:red; translates to color equals red, next. font-size:15px; translates to font size equals 15 pixels, next. You must add the px so that both MSIE and NN will understand your styles. If you leave it out NN will ignore the whole group. MSIE as always , is more forgiving. Enter the <b> </b> a few times anywhere on your page. Now watch as your styles change every one of them. A computer WILL NOT forget to change the hard to see tag.
Another example of Internal styles. This style will apply to all the links of a given page.
Once again 'a' represents all the <a href=""> tags. text-decoration:none; translates to no underline , no shadow, nothing. The next line deals with the hover attribute ( IE4+ NN6+ Opera 5+ ). This style will be executed when a user hovers their mouse over a link. The color and size remain the same , however while the mouse pointer is over the link , the link will be underlined.
Let's say you want one or two of the twenty links on our page to contain a different set of properties. You could either use local styles ( described below ) which override Internal styles or you could use what's known as a class of styles. To use a class, first you define it then you add it to a particular tag. The following demonstrates a class named "smalllink"
When defining a class dont' forget to start with a period '.' . This period is not used in the class attribute of the actual tag. Let's say you where creating a twenty page site. To ensure all twenty pages look exactly the same and have a common pleasing feel you would use External style sheets.
External styles sheets
As you have probably guessed, this guide is using an external style sheet. Every page of this tutorial uses the h1 tag for the page header (red), the h2 tag for sub titles (green) and the h3 tag for any code (black). If I was to change the value of the h2 tag to read color:blue , every subtitle on every page of this guide would automatically be changed from green to blue. Amazing! Within a minute, I could create a new and look feel for this whole guide.
To create an external style sheet open a new file and name it mystyle.css . Save it to the same directory your html files are located at. Define your styles just as above, except don't need use <style> or < head or any other tag for that matter. So your external style sheet's code might look like this:
a {color:ff9951;text-decoration:none;font-size:20px}
a:vlink {color:ff9951;text-decoration:none;}
a:hover {color:red;text-decoration:underline;}
a:alink {color:red;text-decoration:none;}
To use this css file , in between the opening and closing <head> tags , you will need to add the following tag.
Thats it. Your 're done. Place the same <link> tag in as many html documents as you please. Remembering that external styles are overridden by internal styles which in turn are overridden by local or inline styles.
Local styles
Local styles are applied to individual tags within the body of your html doc. The most common tag being the <Div> </Div> tag. This is the tag that is replacing all deprecated tags. Let's start by using the tag in its basic form. Instead of using <center> </center> which has been deprecated ( disapproved of ), use this:
<Div align="center">You can type text or add any other tag here</Div>
The effect
You can type text or add any other tag here
To place the contents of a <div> tag precisely where you would like them, replace the align="" attribute with style="" like this:
<Div style="position:absolute;left:0;">You can type text or add any other tag here</Div>
The effect
You can type text or add any other tag here
The position can either be absolute or relative to the previous <div> tag and must be added to the style. You can add the contents on one div tag directly over of the contents of another div tag. Use the z-index property to do this. Below is a table of some of the many properties styles use. Do not underestimate the power of styles as I did. Learn to use them and begin to see some the amazing possibilities. The more you use them the better your pages will become. To get a full list you can either download a free css editor or any good html editor.
value
description
position:
Absolute or relative to last style. Must be added when positioning elements.
left:
any number
Number of pixels from left side of window
top:
any number
number of pixels from top of window
z-index:
any number
Used to overlay elements, the higher the number the higher the element sits
width:
any number
sets width of the style, to stop wrap
height:
any number
sets height
color:
any predefined or hex color
sets color of text , do not use the # in hex colors
visibility:
show or hide a layer, can only be changed on user initiated events using javascript
font-size:
#px
Size of text. The # represents any number. You must add the px for it to work in MSIE and NN
font-weight:
Normal of bold text
Changing the color of scrollbars
Internet Explorer, from Version 5.5, allows you to change the scrollbar's color. The easiest way is to change the base color from the default. Enter any color name or RGB hexadecimal value.
body{ scrollbar-base-color: #909000; }
If you would like to change the look further, here is an example that has the same effect, but uses the full list of attributes. You can also have the color change on the onmouseover event, discussed in our JavaScript tutorial.
Download the file to any folder. Un compress it. (You will need winzip or any other decompressor). It will extract files to a folder named Bradbury. Open this folder then open the Topstyle folder. There may be another topstyle folder and inside this you will find TSlite.exe . Execute it (open it). Now you should have the program open. At the very top in the Edit menu select 'New selector'. Choose a tag you want to work with and press ok. You should now see a full list of properties on the right. Choose a property then choose a value. It has now generated the code you want. Easy. You can either save this file as an external style sheet or copy and paste the code. At the bottom of the TSlite window there will be a preview of what you have created (as long the creation has visible elements.
You have reached the end of this tutorial. All that remain are the appendixes. I recommend you at least look at ' Appendix B Colors in hex '. Hope to see your wizardry up on the web. Good luck and remember what you see is not always what you get. Check your pages in as many browsers and as many versions as you can.
