| Home Web | Top Bottom | Contents Prev Next |
What is CSS?
Where Do You Put the CSS Code?
CSS Rules, Selectors and Properties
The color Property
The text-align Property
Example
CSS (Cascading Style Sheets) provides a method for specifying formatting information for your web pages.
|
The original purpose of HTML was to specify the structure of the document rather than the details for formatting the document. Before CSS came into being, many features were added to HTML to help format the document. The formatting features of HTML were not only difficult to use, they caused unnecessary constraints. CSS provides much more control over the formatting, and has the additional bonus of being much easier to use than the formatting tags and attributes of HTML. It also increases flexibility: different formatting rules can be applied when printing a document than when displaying it, for example. |
The drawback to CSS is that it is relatively new, and many of the browsers that are currently in use don't support CSS very well.
IE 3 was the first browser to include CSS support, but its support falls far short of even the first CSS standard, CSS1.
Netscape 4 was the first Netscape version to support CSS, and it had the best CSS support of any browser at the time it was released. But Netscape 4 is quite old now, and its CSS support lags far behind newer browsers from Microsoft: IE 4 and newer.
A newer CSS standard, CSS2, provides a lot more facilities beyond CSS1, but support for CSS2 is almost non-existent except in the very latest browsers. The even more recent CSS3 has virtually no support at this time.
IE 4 and newer have pretty good CSS support, but the Microsoft browsers don't support all of the features of CSS and they support some of the features in a non-standard way.
Netscape 6 and the Mac version of IE 5 are the first browsers that attempt to implement full and standard support for CSS1 and at least partial support for CSS2.
Here are some general rules:
Browsers that support CSS have pretty good support for font control: text color, font face, that sort of thing.
CSS also provides facilities for controlling margins and for drawing borders, and support for these facilities vary a lot more.
CSS provides facilities for positioning elements on the screen. Support for these facilities is very poor in the older CSS-enabled browsers.
CSS is a language separate from the HTML/XHTML language. When you use CSS, you embed the CSS code within the HTML/XHTML page by using a <style>...</style> tag. The <style> tag must be placed in the head section of the document (some browsers may act on a <style> tag in the body section, but others such as Netscape 4 will ignore it).
Older browsers that don't have CSS support won't understand what a <style> tag is and will ignore it. These browsers will display the CSS code as part of your page. To prevent this, you put the CSS code inside an HTML comment. CSS-aware browsers understand that the CSS code is to be processed even though they are enclosed in HTML comments.
Here's an example of a head section of a document that uses CSS:
<head> <title>Your title is here</title> <style type="text/css"> <!-- Your CSS code goes here --> </style> </head>
type="text/css" tells that browser that the code in the <style> tag is CSS. There are other style languages such as XSL and JavaScript Style Sheets, so the browser needs to know which style language you're using.
The CSS code that you put in the <style> consists of one or more rules. Each rule consists of two parts: a selector that identifies what element(s) on the page are affected by the rule, and style information. The style information is enclosed inside curly brackets {}.
<style type="text/css"> <!--
selector { style information }
selector { style information }
...
--> </style>
selector can be any of the following:
The name of a tag: p applies the rule to all <p> tags in the document.
A list of tags separated by commas: i,b applies the rule to all <i> tags AND to all <b> tags in the document.
A list of tags separated by spaces: i b applies the rule to only those <b> tags that are nested inside <i> tags.
The style information consists of a list of properties and values. Specify the property name followed by a colon (:), your value, and a semicolon (;). Unlike HTML, values are not usually enclosed in quotes, and they may not work if you code quotes where they're not expected. Netscape is particularly picky about requiring you to code the style information exactly right.
<style type="text/css"> <!--
selector { property: value; property: value; ... }
selector { property: value; property: value; ... }
...
--> </style>
For now, I'm just going to introduce a couple of properties.
The color property can be used to specify the color of the text you want to display.
The 16 IE-named colors such as black, white, red, blue, yellow, purple and green can be specified by name: color: black;
For most colors you specify a # sign followed by six hexadecimal digits: color: #fc6902;
|
Hexadecimal digits are similar to the decimal digits (0-9) that you're familiar with, but have 16 values instead of just 10. The digits 0-9 are used for the first 10 values and the characters a-f represent the remaining values. The six digits are comprised of two digits each for red, green and blue (RGB). Red is represented as #ff0000, for example, which has the largest possible value for red and zeroes for green and blue. If all colors are fully present (#ffffff), the color is white. If no colors are present (#000000), the color is black. If equal amounts of red, green and blue are present (as in #818181), the color is a shade of gray. You may eventually learn a few of the combinations that you use frequently by heart, but generally you'll want to refer to a color chart. There are a lot of different color charts available on the net (you can find links to a number of them in my bookmarks section under HTML). The following link will open my own color chart in a new window so that you can refer to it easily while working here: My color chart is divided into three sections. The first section is a set of 140 Netscape-named colors. These colors are not web-safe colors, and may look dithered when viewed on a computer that is running in 256-color mode, though most look pretty good even in that mode. A few of the lighter colors appear as white in 256-color mode. The names (such as lightskyblue) are recognized by both Netscape and IE, but they are not recognized by other browsers such as Opera — it's better to use the hex representation for these colors. The second section is a set of 16 Internet Explorer named colors. These include ones such as red, black and white. Most if not all browsers recognize these 16 names, and these are web-safe colors. The third section is the complete set of web-safe colors. Web-safe colors are those in which the red, green and blue components are 00, 33, 66, 99, cc or ff. There are 6x6x6 (216) such colors. Web-safe colors are supposed to be safe to use in 256-color mode on all computers. |
The text-align property specifies alignment, just like the align attribute of the <p> tag. Its values are the same: left, right, center and justify. You'd normally only want to specify text-align for block tags such as <p>, not for inline tags such as <i> or <b>. In fact, browsers that support CSS correctly will ignore text-align for an inline tag (but not all browsers support CSS correctly!).
Here's some example code that illustrates the things I've talked about on this page. Feel free to experiment. Make sure you understand why each element is displayed in the color shown.
This example includes some "naked" text (text that is not inside a block tag). Notice that the p rule is NOT applied to naked text (exception: IE 3 applies the p rule to naked text!).
This code validates perfectly under HTML transitional. Try changing the doctype to a strict doctype by removing " Transitional" and validating. You'll find that the naked text is no longer allowed.
Try removing text-align: right from the p rule and adding it to the i,b rule. If you have Netscape 4 available, you'll find that it gives quite a different interpretation to this than do IE or Netscape 6!
Note: When you validate the code, only the HTML code is checked. There are some CSS validators available as well, and I'll talk about those later.
CSS is a vast subject, and I've just begun to scratch the surface. As we proceed, I'll introduce more properties and selectors, and I'll show you how the class, style and id HTML attributes fit into CSS.
| Home Web | Top Bottom | Contents Prev Next |