Difference between revisions of "Cascade Style Sheets"
| Line 1: | Line 1: | ||
Cascade Style Sheet (CSS) | |||
== Cascade Style Sheet == | |||
A CSS is made up of two parts: the selector and declaration. The selector states which tag the rule applies. The declaration stats what happens when the rule is applied. | |||
The declaration is made up of two elements: a property and value. A declaration must end with a semicolon. | The declaration is made up of two elements: a property and value. A declaration must end with a semicolon. | ||
| Line 17: | Line 19: | ||
h3 {font-style:italic;}</pre> | h3 {font-style:italic;}</pre> | ||
===Contextual Selectors=== | === Contextual Selectors === | ||
Contextual selectors use more than one tag in the selector. The tag closest to the declaration is the targeted tag. The additional tag(s) state where the target tag must be located in the markup up in order for target tag to be affected. Contextual selectors have spaces between them. | Contextual selectors use more than one tag in the selector. The tag closest to the declaration is the targeted tag. The additional tag(s) state where the target tag must be located in the markup up in order for target tag to be affected. Contextual selectors have spaces between them. | ||
Contextual selector examples | ===== Contextual selector examples ===== | ||
<pre><html> | <pre><html> | ||
<head> | <head> | ||
| Line 46: | Line 48: | ||
[http://www.gotopinion.info/styles/contextual_selector_3.html Contextual example 3] | [http://www.gotopinion.info/styles/contextual_selector_3.html Contextual example 3] | ||
===Child Selectors=== | === Child Selectors === | ||
Apparently IE on Windows ignores so I'll skip this for now and return to it later. | Apparently IE on Windows ignores so I'll skip this for now and return to it later. | ||
<center>[[web development|Back to Web Development]]</center> | <center>[[web development|Back to Web Development]]</center> | ||
Revision as of 12:29, 15 March 2008
Cascade Style Sheet (CSS)
Cascade Style Sheet
A CSS is made up of two parts: the selector and declaration. The selector states which tag the rule applies. The declaration stats what happens when the rule is applied.
The declaration is made up of two elements: a property and value. A declaration must end with a semicolon.
Multiple declarations can be contained in a single rule.
Multiple selectors can be contained in a single rule. A comma must be used after each selector except the last.
h1, h2, h3 {color:red; font-weight:bold;}
Multiple rules can be applied to the same selector.
h1, h2, h3 {color:red; font-weight:bold;}
h3 {font-style:italic;}
Contextual Selectors
Contextual selectors use more than one tag in the selector. The tag closest to the declaration is the targeted tag. The additional tag(s) state where the target tag must be located in the markup up in order for target tag to be affected. Contextual selectors have spaces between them.
Contextual selector examples
<html> <head> <title>Contextual Selector Example 1</title> <link href="style_sheets/contextual_selector_example_1.css" rel="stylesheet" type="text/css"> </head> <body> <h1>Contextual selectors are <em>very</em> selective.</h1> <p>This example shows how to target a <em>specific</em> tag using the document hierarchy.</p> <p>Tags only need to be descendants <span>in the <em>order stated</em> in the selector</span>; other tag can be in between and the selector still works.</p> </body> </html>
NOTE: The only difference between example html sheets is the style sheet that links them which is noted below for convenience.
em { color:red }
p em {color:red }
p span em {color:red}
Child Selectors
Apparently IE on Windows ignores so I'll skip this for now and return to it later.