Style Sheets 

<link href="myFirstStyleSheet.css" rel="stylesheet"  type="text/css">
 
The above line of code links your external style sheet called ‘myFirstStyleSheet.css
to the HTML document. You place this code in between the <head> </head>  tags in your web page. 


.my3rdNewStyle {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-weight: bold;
   font-size: 12pt;
   color: #FF0000;
}
 In the above example I have created a series CSS classes  that can be applied to any HTML tag like so: 
<h2 class=”my3rdNewStyle”>My CSS styled  text</h2>
 
When you apply a CSS class to it, the CSS code overrides the default size that you would normally get with an <h2> tag in favor of the size specified in the CSS class. So now you can see that CSS can override default HTML tag behavior!
In the above examples, I have CSS code where I define my CSS classes and then ‘apply’ them to various elements in the page. Another way to apply CSS is to globally redefine an HTML tag to look a certain way:

h1 { font-family: Garamond, "Times New Roman",  serif; font-size: 200%; }
 What this CSS code does is set the font style and size of all <h1> tags in one shot. Now you don’t have to apply a CSS class as we did before to any <h1> tags since they are automatically all affected by the CSS style rules.

Here is another example of where I give the whole page bigger margins:
body { margin-left: 15%; margin-right: 15%; }
As you can see, you can redefine any tag and change the way it looks! This can be very powerful:
div {
   background: rgb(204,204,255);
   padding: 0.5em;
   border: 1px solid #000000;
}
The above CSS code sets that any <div></div> tag will now have a background color of ‘rgb(204,204,255)’ and have a padding of 0.5em and a thin 1 pixel border that is solid black.

LINK

In this last example I will show you the ‘super cool’ CSS code that allows you to create link roll-over affects without images:
a:link { color: rgb(0, 0, 153) }
a:visited { color: rgb(153, 0, 153) }
a:hover { color: rgb(0, 96, 255) }
a:active { color: rgb(255, 0, 102) }
The above CSS will cause your links to change color when someone hovers their mouse pointer over it, instant rollovers with no images! One important note with the above code, is that it is important that the style declarations be in the right order:
“link-visited-hover-active”,
 
Labels: