Web Design Summary 3
How CSS Works
Topic 1: Ways of Styling Your Document
One way of styling your document is through Inline Styles.
Inline style uses the style attribute directly inside a line of your html. Their scope is very restricted. An inline style only affects the tag to which it is attached. It is not generally reccomended to use this frequently in you document.
Another way of styling is through Embedded Styles. This puts a style attribute in the head portion of your html document. The scope of embedded styles is limited to the page that contains the styles. Page styles override style sheet styles, but they lose out to attributes you define in inline styles.
One last way is through Linked Styles.
Linked styles is essentially placing a link to your CSS document in the head portion of your html document. You can link your style sheet to as many XHTML pages as you want with a single line of code in the head of each XHTML page
Topic 2: Pseudo-Classes
Psuedo-classes cause something to happen to the markup of your document when certain events occur. They are most commonly used with anchor links. The four psuedo-classes for anchor links are:
Link
Visited
Hover
Active
Note here that you dont have to use all four of these states, but you do have to use them in the specific order shown above.
Topic 3: Using Contextual Seletors
Contextual selectors allow you to be more specific with your syling and ability to make changes to a specific part of code without having to do too much extra markup in your XHTML. If you write a rule where you simply use the tag name as the selec- tor, then every tag of that type is targeted. For example, by writing
p {color:red;}
every paragraph would have red text.
But what if you only want one particular paragraph to be red? To target tags more selectively, you use contextual selectors.
Example:
div p {color:blue;}
Now only paragraphs within div tags would be blue.
As you can see in the example above, contextual selectors use more than one tag name (in this case, div and p) in the selector. The tag closest to the declaration (in this case the p tag) is the tag you are targeting. The other tag or tags state the containing ancestor tag(s) in which the target tag must be contained for it to be affected by the rule.
If your're not able to get specific enough, you can use child-selectors. Another way would be to create a class or ID div.