// page information $page_type = "t"; $page_title = "CSS Example"; $page_keywords = "css, introduction to css, an example, introduction to css, an example"; $page_description = "Introduction to CSS tutorial. Find more tutorials and scripts at TheScripts.com, a programming and software development resource, directory and community."; $page_articletitle = "Introduction to CSS"; $page_next_url = "/clientsidescripting/dhtml/css/tutorials/introductiontocss/page1.html"; $page_next_anchor = "INPUT.TEXT"; $page_prev_url = ""; $page_prev_anchor = ""; $page_author = "Mark Hardy"; $page_byline = "Administrator, TheScripts.com"; // site header include ($_SERVER["DOCUMENT_ROOT"]."/header.php"); // begin html ?>
CSS (Cascading Style Sheets) is an extension of HTML/DHTML. It allows for you to format an entire element by defining all of its properties just once, instead of every time the element appears on your page. This is useful for two reasons, one, you can drastically reduce the size of your HTML file if you have a lot of text or table formatting, and two, it makes life a whole heck of a lot easier to just write STYLE=INTTABLE instead of BGCOLOR=336699 VALIGN=TOP and then also defining the intererior text.
In this article I will introduce you to how to use basic Cascading Style Sheets in your pages to make your life easier. Please note however that CSS is only heavily supported in the newer browsers (4.0 and higher). There is very limited to no support in previous versions of browsers.
The best way to start off any lesson, I believe, is to provide an example, and then teach you how to do the same thing. So here is your example:
INPUT.TEXT{
font-family:TrebuchetMS;
font-size:9pt;
font-weight:bold;
background-color:336699;
border-color:336699;
border-style:inset;
border-width:2px;
color:FFFFFF;
}
A {
text-decoration:underline;
color:8B0000;
}
A:HOVER{
font-weight:bold;
color:8B0000;
}
A.SUBNAV {
text-decoration:none;
color:000000;
font-size:10pt;
}