Here is a green paragraph.The following bold text would also display green.
In the above example, the tag is a "child" of the tag, which is a "child" of the tag. Only the tag has inline style sheet information, yet both the and the tags INHERIT that style information from the parent tag, causing their text to display with a green color. With style sheets, some properties are inheritable, and others are not. "Color", obviously, is inheritable, as is "font-size", among others. Please refer to the W3C CSS specifications for a complete listing. B. CLASS and ID In a style sheet, you define the properties of many HTML tags. Quite frequently, however, you will require variations on one or more of the styles that you have defined. To allow for these possible variations in style definitions for individual HTML tags, classes and IDs were developed. Class is an object-oriented programming term that has migrated into style sheet terminology. In style sheets, a class is a specifically defined variation on a style (as in, "mySpecialDefinition is a CLASS of thetag"). Let's look at an example to clarify this statement. Say you have set your
tag to display black text. Throughout your document, however, you have a special WARNING type of paragraph that you want to display using RED text instead of black. Now, you could use an inline style sheet to make each WARNING paragraph display with red text, but if you ever wanted to change the appearance of the WARNING paragraphs (say by making them display 24pt text in addition to the red color), you would have to go back and change each one of the inline style sheets individually to reflect that change (yuck!). Obviously, this is not an efficient method. Instead of using inline style sheets, you could define a "warning" class of paragraph in your linked style sheet. Your regular paragraphs could be set to display 14pt black text (for instance), while your warning paragraphs could be set to display 24pt red text using this special "warning" class that you have defined. That way, if any additional changes were to be made to the appearance of the warning paragraphs, all you, as a programmer, would have to do would be to change the definition of the "warning" class for the tag in your linked style sheet, and every instance of the warning paragraph in your HTML documents would be updated. How is this done? First, you have to define the "warning" class in your external style sheet. Here's an example: /* Here's the definition for the regulartag. */ P { color: black; font-size: 14pt } /* Here's the definition for the warning class of the
tag. */ P.warning { color: red; font-size: 24pt } Now, in your HTML documents (which are, of course, linked to your external style sheet), you need to use the CLASS attribute and place it within the appropriate tags, set to "warning" (the name of your class). Here's an example of text:
My first paragraph of text is perfectly ordinary. There is nothing unusual about it at all. It is rather boring, actually. It just goes on and on for the purposes of demonstration.
Now, here is my special warning paragraph. It will display in a bigger font and become red because that is how I have defined it in my linked style sheet. Yippee!
You can also use multiple class definitions for the same tag, as shown below: /* Here's the definition for the regulartag. */ P { color: black; font-size: 14pt } /* Here's the definition for the warning class of the
tag. */ P.warning { color: red; font-size: 24pt } /* Here's the definition for the caution class of the
tag. */ p.caution { color: yellow; font-size: 18pt } Just as you did with the "warning" class of paragraph, you could now refer to this new "caution" class of paragraph using the CLASS attribute in your
tag, as demonstrated below:Now, here is my special warning paragraph. It will display in a bigger font and become red because that is how I have defined it in my linked style sheet. Yippee!
This paragraph will display at 18pt with yellow text because I have defined it as an instance of the "caution" class of paragraph.
In addition to creating specific classes of particular tags, you can also create blanket classes that will affect EVERY tag. You do this by dropping the tag name in front of the class selector. To use our example from above, you could drop the tag name from in front of ".warning". This "warning" class could be applied to every HTML tag, and would read as follows: /* Here we define a class for every HTML tag affected by this style sheet.*/ .warning { color: red; font-size: 24pt } Remember: In style sheet terminology, the "." character indicates CLASS. As a general rule, the CLASS attribute can be used in ANY HTML tag to refer to a class definition in your style sheet. In other words, the CLASS attribute, as a whole, is available as an attribute for any and all HTML tags. An ID is one step more specific than a class, and will override a class definition when the two come into conflict. In all other respects, an ID is very similar to a class, EXCEPT for the fact that each ID that you define refers to one and only ONE unique object on a page. IDs are mostly used in CSS-P and Dynamic HTML. In a style sheet, IDs are referred to by their given name, preceded by a # symbol. Here is an example: /* Here is the banana ID style. */ #banana { color: yellow } You would apply this "banana" ID to any HTML tag in your HTML document using the ID attribute, as follows:Chiquita Banana is the thing for you, it's yellow and tasty and fun to chew.
Note: Quotation marks around the values for the CLASS and ID attributes are not required. You could legally state classes and IDs using the following syntax in your HTML documents:Now, here is my special warning paragraph. It will display in a bigger font and become red because that is how I have defined it in my linked style sheet. Yippee!
This text has a banana in it.Remember: IDs each refer to one and only one object on a page. CLASSes can be called by many objects on a page. C. Pseudo-Class (the Anchor tag) Unlike ordinary HTML tags, the tag has three separate states of being: link, visited and active. Ordinary style sheet classes and IDs, being designed for only one state of display, cannot account for this multiplicity of style states, all of them manipulated by the UA (user-agent, or Web browser). Pseudo-classes were therefore invented to allow formatting to be created for the tag. At this time, there is only ONE tag that is affected by the pseudo-class: the tag. Unlike ordinary classes, which are set off from their associated tag using a "." character, pseudo-classes use the ":" character. The syntax in a style sheet would be as follows: A:link { color: blue } /* unvisited link */ A:visited { color: purple } /* visited link */ A:active { color: red } /* active link */ Because only the tag is affected by the pseudo-class, you may safely eliminate the "A" from the style definitions above, as demonstrated here: :link { color: blue } /* unvisited link */ :visited { color: purple } /* visited link */ :active { color: red } /* active link */ The color property may be defined using ordinary #RRGGBB hexidecimal values; any color that you can define using the LINK/VLINK/ALINK attributes of the BODY tag, you can also define using a hexadecimal value in your pseudo-class. :link { color: #0000FF } /* unvisited link */ :visited { color: #FF00FF } /* visited link */ :active { color: #FF0000 } /* active link */ You may define pseudo-classes with properties other than color. I would recommend proceeding with caution, as the pseudo-classes will also affect things like hyper-linked image borders, etc. Pseudo-classes may be used in contextual selectors: DIV A:link { color: #0000FF } Note: Netscape Communicator 4.0 does not recognize the ":active" pseudo-class. If you want an active hyper-link color other than the default to appear when a user views your page using the Netscape browser, you must be certain to define the ALINK attribute of the tag on an HTML page. In fact, I would always recommend setting your BODY tag attributes (LINK ALINK VLINK, etc), even if you are setting them in your style sheet. This allows for older browsers to see SOME sort of color for the links, even if they do not understand the CSS syntax. Warning: The anchor pseudo-class MUST be defined when using style sheets. This is due to a flaw/feature in the implementation of the font-color property in Internet Explorer 3.0. If you color text using style sheets, this font-color definition will override the browser default hyper-link color properties, turning all hyper-links the same color as the surrounding text when viewed using Internet Explorer. Netscape Communicator 4.0 does not have this flaw in implementation; with Netscape, hyper-link colors are only overridden if the style sheet contains specific formatting information regarding those hyper-links. D. Cascade When we talk about a "cascade" in style sheets, we're really referring to a resolution of conflict. Since multiple styles can simultaneously act upon an HTML document, some sort of system has to be in place to resolve conflict in cases where the style sheets don't agree with one another. Style sheets have certain elementary rules of cascade, which we have already discussed. As you already know, a user can set the preferences for his/her browser to display Web pages using any font in any size, and control the manner of display of a great many additional features; these user settings overrule the browser's default settings. This is an instance of cascade conflict resolution. Linked style sheets, for their part, overrule both the default browser settings AND the user's preference settings for the appearance of Web pages. Further, embedded style sheet formatting always overrules linked style sheet formatting, and inline style sheets always overrule both embedded and linked style sheets. There are additional proposed rules for cascade, and you may refer to the W3C CSS specifications for more information. There are still many places where cascade conflict resolution varies from browser to browser. You should proceed with caution when combining multiple style sheets, in fact. Let's look at a special case in cascade conflict resolution. You have an external style sheet that defines all paragraphs as having purple-colored text. You have a special ".warning" class of paragraph that makes the text have a red color. In your HTML documents, you have used the CLASS attribute in a number of paragraphs to give them the "warning" red text color. In ONE of your HTML documents, you have defined an embedded style sheet that colors all the paragraph text blue. The question is this: If you have a paragraph that has been assigned the "warning" class style on the HTML document with the blue paragraph text, should that "warning" paragraph be colored red, in accordance with the external style sheet, or blue, in accordance with the embedded style sheet for the document? Well, one would assume that, since you bothered to assign it the "warning" class in the first place, that paragraph should become RED, right? Netscape would agree with you on that, and the "warning" paragraph would turn red in Netscape Communicator 4.0. However, Microsoft would DISAGREE with you, and the "warning" paragraph would turn BLUE in Internet Explorer 3.0. Example: "style1.css" /* style1.css yourName -- email@company.com */ P { color: purple } P.warning { color: red } Example: "document1.html"
This paragraph of text is ordinary. See how it uses the standard purple color.
This paragraph of text is assigned to the "warning" class. Notice how it uses the red color appropriate for that class.
Example: "document2.html"This paragraph of text is formatted using the embedded-style-sheet-defined blue text. We've overriden the linked style sheet's purple text color with the embedded style sheet.
This paragraph of text is assigned to the "warning" class. Uh oh. In Internet Explorer, this paragraph turns blue, but in Netscape Communicator, this paragraph becomes red. Wouldn't it be most logical to have it become red, since we've assigned the paragraph to the "warning" class?
The above example uses just text color to make its point, but ALL style properties would be affected in the same manner in this conflict between Netscape's and Microsoft's interpretation of cascade conflict resolution in regards to embedded style sheets. A workaround for this conflict is to RESTATE every class and ID definition you might use within the embedded style sheets you place into HTML documents. This could get very cumbersome, however, in the event of changes to your class and ID definitions. If you plan to use classes and IDs in your style sheets, it is probably best to AVOID embedded style sheets entirely, if you can manage to do so. There are certainly more inconsistencies between Microsoft and Netscape browsers regarding cascade conflict resolution (and many other things) than the ones I have mentioned above. Remember to test everything that you are planning in regards to style sheets on BOTH browsers, and to make CONSERVATIVE plans. Until cascading style sheets stabilize as a technology, there will be any number of inconsistencies and problems which you, as a web designer and programmer, will have to work around. Units of Measurement Each style sheet property has its own list of potential values. However, when units of measurement are called for, there are three types: relative, percentage, and absolute. Relative Units: em: The height of the element's font (example: "0.5em") ex: The height of the lowercase letter "x" (example: "1.25ex") px: Pixels, relative to the "canvas" (usually, as viewed on a user's monitor) (example: "24px") Percentage Units: %: Percent (example: "50%") Percentage units can be either positive or negative (default is positive). When needed, use either a "+" sign (for positive) or a "-" sign (for negative). Place this indicator immediately before the numerical value. Example: "-25%", "50%" Absolute Units: in: Inches (example: ".5in") cm: Centimeters (example: "1cm") mm: Millimeters (example: "12mm") pt: Points (1pt = 1/72 inch) (example: "24pt") pc: Pica (1pc = 12pt) (example: "3pc") Remember: When using these units of measurement in style sheets, make certain NOT to put a space between the number and the abbreviation representing the type of unit involved. For instance, DON'T use "12 pt", but DO use "12pt". Units of Color When defining color in style sheets, you may use either hexadecimal code (#RRGGBB) or one of sixteen named color values. Named Colors: Black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal, aqua. Warning: These named color values are NOT consistent from browser to browser and platform to platform. If you want consistent color, you must use hexadecimal values. Web-safe color values: Netscape-safe, or Web-safe, color values involve combinations of the follow hexidecimal values: 00, 33, 66, 99, CC, FF. For instance, here are a few Web-safe color values: "#33CCFF", "#000000", "#FFCC66" Here are a few values that are NOT Web-safe: "#33AAFF", "#34AADF", "#FCDDFF" Again, hexadecimal code breaks the colors down into three positions: #RRGGBB. The first two digits represent the Red, the second two digits represent the Green values, and the third two digits represent the Blue values. Each of these two digits, in hex, represents a number from 0 to 255, which is the complete range of each color in the RGB color pallete. When using Photoshop, or any other image-editing software that uses a base10 color picker, remember the following chart: Base 10 vs. Base 16 0 00 51 33 102 66 153 99 204 CC 255 FF For instance, a color that is #3300CC in hex would be Red: 51 Green: 0 Blue: 204 in a standard color picker. Property: color Example: P { color: yellow } Cascading Style Sheet Properties Definitions Font and Font Style Properties Property: font-family Example: P { font-family: "Times", "Times New Roman", serif } "font-family" is the property to use when assigning specific, named fonts to an HTML tag. With this property, you can assign any font to display in a user's browser, even specialty fonts like "Univers", "Benguiat" or "Amigo"; this, of course, assumes that the user has such special fonts loaded onto their computer. You should include at least one font name that is absolutely standard, such as "Times", "Times New Roman", "Palatino", "Courier", etc. Font names should be separated by commas. As a last resort, you should make certain to include one of the generic font names given below; otherwise, the browser may revert to the default browser font. There are five generic font names: serif: displays font like "Times" or "Times New Roman" sans-serif: displays font like "Helvetica" or "Arial" monospace: displays font like "Courier" or "Courier New" cursive: displays font like "Zapf-Chancery" or "Script" fantasy: displays font like "Western" or "Comic" Note: font-family is the only CSS property which uses quotation marks to delimit its values. The font names should be spelled, in mixed case, exactly as they would display in a user's Font menu on their computer; if you don't spell these names using mixed case in this manner, font-family will not operate correctly. Warning: fantasy and cursive are not fully implemented. Property: font-size Example: P { font-size: 24pt } Outside of the regular units of measurement for font sizes, you may also indicate font size using these relative units: xx-small, x-small, small, medium, large, x-large, xx-large. (Medium is the standard size, about 10 to 12 points. Each size is 50% larger or smaller than the size adjacent.) smaller: 50% smaller than the parent element's font larger: 50% larger than the parent element's font Property: font-style Example: P { font-style: italic } If you want italic or oblique styles, use this property. Values: normal, oblique, italic Property: font-weight Example: P { font-weight: bold } If you want bold text, use this property. Values: normal, bold You may also state font-weight using values, in increments of 100, from 100-900. 100 is the thinnest possible font-weight, while 900 is the heaviest possible font-weight. These font weights will only operate correctly if the user has a variety of versions of one font face loaded into their computer, which encompass everything from Light, Book, Medium, Bold, Black, etc. Example: P { font-weight: 200 } Property: text-decoration Example: P { text-decoration: underline } If you want underlines, strike-throughs or (Netscape-only) blinks, use this property. Values: underline, line-through, (blink) Review: font-family: "font name", "second font name", genericFontName font-style: italic font-weight: bold text-decoration: underline text-decoration: line-through More Text Formatting Property: text-indent Use this property to indent the first line of text. You can also set this to a negative number if you want the first line of text to hang off the left edge of the paragraph (if you do this, be sure to set the "margin-left" property to a positive number, or your text might disappear off the edge of the browser window). Value: any valid unit of measurement Property: line-height This property deals with the "leading", or the amount of space allotted vertically to each line of text. Values: any unit of measurement (point sizes recommended), a percentage (which is relative to the parent tag's line-height property), or "normal" Property: text-align This property allows you to set the alignment of a block of text: right, left, center. justify, where the text lines up on both the right and left margins, is only enabled in Netscape Communicator 4 and IE 4; Internet Explorer 3.0 will display justified text with a left alignment only. Values: right, left, center, (justify) Margin, Border, and Padding Properties According to the W3C, there are four conceptual parts of each element on a given HTML page: 1) The element itself. 2) The padding around the element. With tables, you encountered padding with the CELLPADDING attribute, where space was placed around text or elements within the bounds of a table cell. Padding is essentially the space between the element and its border. 3) The border of the element. Borders can be visible or invisible, and can have width of their own. 4) The margin around the element. A margin is the space between the border of an element and the edge of the page, or the space between the border of an element and its neighbor (if a neighbor also has a certain amount of margin attached to it, then that additional margin will be added to the space separating the two elements). Unfortunately, margin, border and padding properties have not been implemented consistently or completely in Netscape and Microsoft products. Margin works completely, but the others do not (see Webreview.com for comments). Property: margin Value: any valid unit of measurement Description: sets the margin for an element evenly, all the way around (top, right, left, and bottom). To set individual portions of the margin separately, use the following specific properties: margin-left, margin-right, margin-top, margin-bottom Theoretically, padding and border will operate in the same fashion. Property: padding Value: any valid unit of measurement padding works, setting space around an element evenly. Individual adjustments to padding-left, padding-right, padding-top, padding-bottom, however, may not work across all browsers. Property: border Value: integer representing pixel width, and color hex code Example: P { border: 1px #CC3333 } Border does not work uniformly across browsers. Setting individual portions of the border using border-left, etc, does not work properly at all. Backgrounds Background colors and images may now be applied to any element on a page, not just the BODY area. That means that individual paragraphs or DIV tags can have their own colors. Property: background Value: hex code for color, URL for background image using the following syntax: BODY { background: url(./graphics/myBackground.gif) } Notice how there are NO quote marks used in calling the url information? Rather, we now use the url() call to hold the relative or absolute url information for the location of the background image. We may assign a background color using the following syntax: BODY { background: #FFFFFF } We may also assign a background color AND a background image, just by placing a space between the two values: BODY { background: #FFFFFF url(./graphics/myBackground.gif) } We could also assign this background formatting information to a paragraph: P { background: #FFFFFF url(./graphics/myBackground.gif) } There is a great deal more which can be said about the background property. There are additional background properties which control the repeat, or tile, of a background image, the positioning of a background image, and any number of other tweaks and tricks. Unfortunately, these have not all been implemented consistently from browser to browser; please review http://www.webreview.com for the latest information. The IMG tag DO NOT format the IMG tag in CSS; doing so will cause severe problems involving the flow of text around left- or right-aligned images. Continue to use the traditional BORDER, ALIGN, VSPACE and HSPACE attributes in each