 Style-Sheets Page 3 - Understanding Style Sheets (Part 1) |
| Style-Sheets Page 3 - Understanding Style Sheets (Part 1) |
More Pseudo-Gibberish - Style SheetsThe first in a two-part tutorial on Cascading Style Sheets, thisarticle explains how to create and use style rules across your Web site,and then demosntrates a few basic CSS properties. Also included:inheritance, classes, contextual selectors and some lightbulb jokes.
print this article SEARCH DEV SHED |
Next on the basic concept list: inheritance, classes, pseudo-classes and contextual selectors. Let's take them one by one. Inheritance:Inheritance basically means that HTML elements which lack a specific style rule will inherit the style rules of the elements they are enclosed within. For example, consider this snippet of code: <HTML> </HEAD> <BODY> <B> In this case, the <B> tag has a color defined in the style sheet, while the <FONT> tag doesn't have any style rule defined for it. Since the <FONT> tag is enclosed within the <B> tags, it inherits the style rule defined for the <B> tag - in this case, the colour red.
<HTML> </HEAD> <BODY> <P CLASS="question"> </BODY> In this case, we've defined two classes, "question" and "answer", with appropriate style rules for each (note the manner of their definition within the <STYLE> tags, and the period prefix). Next, we've invoked the appropriate style rules by adding the CLASS attribute to the HTML tags within the body of the document.All the text within tags which are marked as part of the class named "question" will appear in red, while all the text within the "answer" class will appear in blue.Thus, CSS gives you a simple and elegant way to group otherwise unrelated tags together, and apply a common style rule to them. Pseudo-classes:Unlike what the name suggests, these are actually pre-defined classes for certain HTML tags. The most well-known of these are the pseudo-classes defined for the anchor element A - it Contextual selectors:Contextual selectors are a lot like conditional statements - the style declarations that follow them are invoked only when certain conditions are met. For example, suppose you'd like all bold italic text in your document to appear in blue Arial. Your contextual selector would look like this: <HEAD> Go on, try it yourself. Do I look like I'm lying?
blog comments powered by Disqus |
|  |
|
/ 33 
What is CSS?
