Difference between revisions of "Cascade Style Sheets"
| Line 35: | Line 35: | ||
The second line states '''any tags with "specialtext" class will be bold'''. | The second line states '''any tags with "specialtext" class will be bold'''. | ||
The third line states ''' | The third line states '''"specialtext" class must be within the context of p tag for rule to apply'''. | ||
<pre> | <pre> | ||
| Line 58: | Line 58: | ||
[http://www.gotopinion.info/styles/class_selector_example_1.html | Class Selector Example 1] | [http://www.gotopinion.info/styles/class_selector_example_1.html | Class Selector Example 1] | ||
=== Skipping the restrictions of hierarchy === | |||
The line states '''span tag can be a descendant of any tag with specialtext class''' | |||
<pre>.specialtext span { color:blue; } | |||
=== | |||
The | |||
<pre> | |||
.specialtext { | |||
</pre> | </pre> | ||
<center>[[web development|Back to Web Development]]</center> | <center>[[web development|Back to Web Development]]</center> | ||
Revision as of 15:16, 15 March 2008
Cascade Style Sheets (CSS)
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>
Contextual Class Selectors
You can combine tag and class name to make a selector more specific.
The second line states any tags with "specialtext" class will be bold.
The third line states "specialtext" class must be within the context of p tag for rule to apply.
p { font-family: Helvetica, sans-serif; }
.specialtext { font-weight:bold; }
p.specialtext { color:red}
You can further specify by adding more tags.
The fourth line states span tag within a paragraph with "specialtext" class will be italicized
p { font-family: Helvetica, sans-serif; }
.specialtext { font-weight:bold; }
p.specialtext { color:red}
p.specialtext span { font-style:italic; }
Skipping the restrictions of hierarchy
The line states span tag can be a descendant of any tag with specialtext class
.specialtext span { color:blue; }