Difference between revisions of "Cascade Style Sheets"
| Line 1: | Line 1: | ||
Cascade Style Sheets (CSS) | 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. | 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. | ||
| Line 19: | Line 17: | ||
h3 {font-style:italic;}</pre> | h3 {font-style:italic;}</pre> | ||
== 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 ==== | |||
<pre><html> | <pre><html> | ||
<head> | <head> | ||
| Line 30: | Line 28: | ||
<body> | <body> | ||
== Adding Classes & IDs == | |||
Adding classes & IDs to the tags in XHTML enables you to style without regard to document hierarchy. | Adding classes & IDs to the tags in XHTML enables you to style without regard to document hierarchy. | ||
=== Simple Use of Class === | |||
Simple use of a class p42. | Simple use of a class p42. | ||
| Line 46: | Line 44: | ||
[http://www.gotopinion.info/styles/simple_use_example.html Simple Use Example] | [http://www.gotopinion.info/styles/simple_use_example.html Simple Use Example] | ||
=== Contextual Class Selectors === | |||
You can combine tag and class name to make a selector more specific. | You can combine tag and class name to make a selector more specific. | ||
| Line 56: | Line 54: | ||
</pre> | </pre> | ||
[http://www.gotopinion.info/styles/class_selector_example_0.html | Class Selector Example] | [http://www.gotopinion.info/styles/class_selector_example_0.html | Class Selector Example 0] | ||
You can further specify by adding more tags. | |||
<pre> | |||
p { font-family: Helvetica, sans-serif; } | |||
.specialtext { font-weight:bold; } | |||
p.specialtext { color:red} | |||
p.specialtext span { font-style:italic; } | |||
</pre> | |||
[http://www.gotopinion.info/styles/class_selector_example_1.html | Class Selector Example 1] | |||
<center>[[web development|Back to Web Development]]</center> | <center>[[web development|Back to Web Development]]</center> | ||
Revision as of 13:49, 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>
== Adding Classes & IDs ==
Adding classes & IDs to the tags in XHTML enables you to style without regard to document hierarchy.
=== Simple Use of Class ===
Simple use of a class p42.
CSS contents:
<pre>
p { font-family: Helvetica, sans-serif; }
.specialtext {font-weight:bold; }
Contextual Class Selectors
You can combine tag and class name to make a selector more specific.
p { font-family: Helvetica, sans-serif; }
.specialtext { font-weight:bold; }
p.specialtext { color:red}
You can further specify by adding more tags.
p { font-family: Helvetica, sans-serif; }
.specialtext { font-weight:bold; }
p.specialtext { color:red}
p.specialtext span { font-style:italic; }