CSS tutorial

Thursday, 29 March 2012

Introduction to CSS

Imagine you've just designed a two hundred page web site for a client (or maybe for yourself) but at the last minute your client (or you) decide the font is a little two small or the typeface should be serif instead of sans-serif? You didn't know how to use cascading style sheets (CSS) so you coded all of the pages with the old-style <font> tag. If you didn't know CSS, chances are you'd have to replace every occurrence of the old <font> tag with the new <font> tag. But if you had decided to write the site with CSS from the get-go, all you would have to do is replace one single line of code in a master file, and your entire site would be rendered immediately in your new style.

That's just one file to upload. That's a lot better than two hundred. Now you can do other things with your time. This is one major reason cascading style sheets are important. CSS makes web site maintenance easier.

a:link { } - regular link
a:visited { } - regular link already visited
a:hover { } - any link with the mouse cursor currently over it
a:active { } - the split-second a link is clicked

CSS listes 

OL { list-style-type: upper-roman; }
OL OL { list-style-type: upper-alpha; }
OL OL OL { list-style-type: decimal; }
OL OL OL OL { list-style-type: lower-alpha; }
OL OL OL OL OL { list-style-type: lower-roman; }
colors :

body { background-image: url(graphic.jpg);
color: #FFFFFF; background-color: #000000;
background-repeat: no-repeat; }

p.first{ color: blue; }

p.second{ color: red; }



<p>This is a normal paragraph.</p>

<p class="first">This is a paragraph that uses the p.first CSS code!</p>

<p class="second">This is a paragraph that uses the p.second CSS code!</p>

out put :

 This is a normal paragraph.

This is a paragraph that uses the p.first CSS code!

This is a paragraph that uses the p.second CSS code!


h4 { color: red; }

h5 { color: #9000A1; }

h6 { color: rgb(0, 220, 98); }


Most Reading