World Wide Web Consortium (W3C) developed Cascading Style Sheets (CSS) in an effort to return HTML to its original purpose: separating information from presentation. HTML is primarily concerned with document structure, while style sheets control how the content looks (fonts, colors, italics, etc).
Think of your web page as a building. The HTML code is the blueprint used to define how the building is constructed and style sheets describe its interior design (colors, wall coverings, etc).
Developers who understand the purpose, strengths, and current limitations of style sheets use them to quickly create pages that display consistently across browsers and download faster.
Style sheets offer many advantages over current layout techniques:
- Greater page layout control: Design pages that display consistently across browsers.
- Decreased development and maintenance time: Define or update the presentation of every page in your web site from a single document if you use linked style sheets.
- Decreased download time: Style
sheets eliminate the need to include FONT tags and other HTML
tags that define style. Less code means faster download!
The main disadvantage of style sheets is lack of consistent browser support. Browsers earlier than Microsoft Explorer 3.0 and Netscape Navigator 4.0 don't support them at all. Higher browser versions support CSS inconsistently. Developers have two choices: only use CSS rules that both browsers recognize, or create a different style sheet for each browser version.
It's surprising how simple this powerful tool really is. You only need to understand a few basic concepts to get started:
- Rule: A declaration that describes how a page element should be displayed. A style sheet is a collection of rules.
- Basic Syntax: A selector (what
is affected) is changed by the declaration (the effect you
want). The syntax necessary to make H1 tags the color red would
be:
Selector Declaration - H1 {COLOR: red} - Properties and Values: A rule declaration is broken into two parts: the property of the text (font-face, color, etc) and the value you apply to the property. This is displayed as:TAG {property: value} Note the curly braces!
- Inheritance: The ability of one property to inherit the properties of an enclosing tag. For instance, if you set the <BODY>color to red, lists defined with the <LI> tag will also be red unless you make another rule that sets <LI> to a different color. Inheritance allows you to make your rules as broad or as specific as the page requires.
- Cascade: More than one style sheet can affect the presentation of a document. If style sheet instructions conflict, several rules govern which style sheet will "win". This can become quite complicated - it's not a technique for beginners.
Create A Simple Style Sheet For Your Web Page
Let's create a simple style sheet that will display consistently across browsers. Our style sheet will have the following rules:
- BODY font is Verdana, with Comic Sans
MS and Serif named as alternate fonts. BODY color is Red. H1
Heading size is 18 pt., color is Blue .H2 Heading size is 14
pt. P size is 10 pt.
Simply insert the following text inside your <HEAD> tag
<STYLE TYPE = "text/css">
BODY {FONT-FAMILY:
verdana, "Comic Sans MS",
serif; COLOR: red;}
H1 {FONT-SIZE: 18pt; COLOR: blue;}
H2 {FONT-SIZE: 14pt}
P {FONT-SIZE: 10pt}
</STYLE>
This technique embeds a style sheet in your page. A more advanced technique is to create a standalone style sheet document and then link those styles in each of your web pages. Use this method to make maintenance even easier - you merely edit your style sheet document to change the whole site.
Important Points To Remember
- Enclose properties and values in curly
braces {}.
Font colors: Note that we specified the color blue for the H1 heading tag. Since we didn't specify a color for the H2 heading tag or paragraph tag, both will inherit the color red from the BODY rule. All the tags inside the BODY tag inherit the FONT-FAMILY attribute.
Font selections: Always list several different fonts to protect your page from browsers with limited font support. List the font you prefer first, then others in descending order. It's always a good idea to include a basic font family name (like serif) at the end. In this example, a browser that doesn't recognize Verdana will display in Comic Sans. If the browser doesn't recognize Comic Sans, the display defaults to a basic serif font.
Fonts with more than one word in the name must be enclosed in quotation marks ("Comic Sans MS"). Generic font names are never enclosed in quotes.Separate multiple property declarations in a tag with semi-colons.
Future HTML Versions Will Require Style Sheets
The W3C is moving quickly to adopt style sheets as the standard. Some commonly used tags like <FONT> and <CENTER> are marked for deletion in future versions. HTML will support them for a long time, but you should become familiar with the alternatives now.
This may seem like a lot of work at first, but you'll appreciate it when you develop sites with many pages and layout options. Despite their limitations, Cascading Style Sheets are a valuable tool for developers.
CSS or Cascading Style Sheets allow you to implement a few new effects on your webpages easily. You can implement these CSS effects on your site by simply copying and pasting the code.
ROLLOVER COLOR TEXT LINKS - Have your text links change color when the mouse passes over them by inserting this code into the HEAD of your document:
<style type="text/css"><!--A:hover {color:red} --></style>
LINKS WITH NO UNDERLINE - Remove the underline from any or all of the links on your page by putting this in the HEAD of your document:
<style type="text/css"><!-- A:link {text-decoration:none} A:visited {text-decoration:none}--></style>
Or, remove the underline from individual links by forming them like this:
<a href="page.html" style="text-decoration: none">link</a>
LINKS WITH A LINE ABOVE AND BELOW THEM
This is an interesting look that works especially well as a hover attribute for your links, but can also be applied to all of your links. It will show the normal underline and a line above the link:
<style type="text/css"><!--A:hover {text-decoration:overline underline}--></style>
HIGHLIGHTED TEXT
Highlight important text on your page or words you want to stand out, easily:
<span style="background-color:yellow">highlighted text</span> Try adding it to your link hover for a neat effect:
<style type="text/css"><!--A:hover {background-color: orange}--></style>
BACKGROUND IMAGE THAT ISNT TILED
This will create a background image that doesn't repeat:
<style type="text/css"><!-- BODY {background: #ffffff url(bg.gif) no-repeat} --></style>
You can also center it, however it will be centered as the background of the entire document, not centered on the screenful:
<style type="text/css"><!--BODY {background: #ffffff url(bg.gif) no-repeat center} --></style>
. CSS Tip:
Cascading Style Sheets (CSS) were supposed to make layout with tables
obsolete. But because of browser incompatibility problems, most Web
designers still use tables instead of style sheets to control layout.
This means that style sheets and tables coexist on the same Web sites.
That mixture leads to unexpected problems in some browsers.
INDEX|
|
|
|
|
|
|
|
|