Cascade Style Sheets: Difference between revisions
No edit summary |
No edit summary |
||
| Line 17: | Line 17: | ||
h3 {font-style:italic;}</pre> | h3 {font-style:italic;}</pre> | ||
== Contextual Selectors == | == 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. | ||
| Line 24: | Line 26: | ||
=== Contextual selector examples === | ==== Contextual selector examples ==== | ||
<pre><html> | <pre><html> | ||
<head> | <head> | ||
| Line 33: | Line 35: | ||
</pre> | </pre> | ||
=== Child selectors === | ==== Child selectors ==== | ||
Write a rule so the target tag has to be a child of a specific tag. | Write a rule so the target tag has to be a child of a specific tag. | ||
| Line 40: | Line 42: | ||
=== Contextual Class Selectors === | ==== 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 69: | Line 71: | ||
[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 === | ==== Skipping the restrictions of hierarchy ==== | ||
The line states '''span tag can be a descendant of any tag with specialtext class''' | The line states '''span tag can be a descendant of any tag with specialtext class''' | ||
<pre>.specialtext span { color:blue; } | <pre>.specialtext span { color:blue; } | ||
</pre> | </pre> | ||
== IDs == | === IDs === | ||
ID synax is similar to classes except a hash (#) symbol is used versus a class's period. | ID synax is similar to classes except a hash (#) symbol is used versus a class's period. | ||
== Difference between Classes & IDs == | ==== Difference between Classes & IDs ==== | ||
The ID can only be used once per page and a class may appear many times. | The ID can only be used once per page and a class may appear many times. | ||
| Line 86: | Line 88: | ||
If you want to apply rules to multiple tags in same page or many pages use a class. | If you want to apply rules to multiple tags in same page or many pages use a class. | ||
== Universal Selector == | === Universal Selector === | ||
The asterisk (*) means anything so this rule means all text will be blue. | The asterisk (*) means anything so this rule means all text will be blue. | ||
| Line 94: | Line 96: | ||
Another use is as the inverse of a child selector. This rule means any em tag that is at least a grandchild of the p tag, but not a child, is selected. | Another use is as the inverse of a child selector. This rule means any em tag that is at least a grandchild of the p tag, but not a child, is selected. | ||
<pre>p * em { font-weight:bold; }</pre> | <pre>p * em { font-weight:bold; }</pre> | ||
=== Adjacent Sibling Selector === | |||
Rule selects a tag that follows a specific sibling tag. p48 | |||
=== Attribute Selector === | |||
Attribute selectors use the attributes of the tag. p48 | |||
== Adding Styles to Web pages == | == Adding Styles to Web pages == | ||
| Line 99: | Line 110: | ||
Three ways to add styles to your pages. | Three ways to add styles to your pages. | ||
=== Inline === | ==== Inline ==== | ||
Add to a tag using <code>style</code> attribute | Add to a tag using <code>style</code> attribute | ||
| Line 105: | Line 116: | ||
<pre><p style="enter CSS"></p></pre> | <pre><p style="enter CSS"></p></pre> | ||
=== Embedded === | ==== Embedded ==== | ||
Add styles in the <code>head</code> of XHTML document | Add styles in the <code>head</code> of XHTML document | ||
| Line 111: | Line 122: | ||
<pre><style type="text/css">enter CSS</style></pre> | <pre><style type="text/css">enter CSS</style></pre> | ||
=== Linked === | ==== Linked ==== | ||
Style is in another document and the markup is linked to the style. | Style is in another document and the markup is linked to the style. | ||
| Line 118: | Line 129: | ||
<center>[[web development|Back to Web Development]]</center> | <center>[[web development|Back to Web Development]]</center> | ||
== Pseudo Classes == | |||
Classes that cause rules to be applied when a specific event happens. These classes are not attached to tags in markup. | |||
Revision as of 10:33, 19 May 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;}
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.
Example: The p is targeted tag. Only p tags within div tags will be red.
div p {color:red;}
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>
Child selectors
Write a rule so the target tag has to be a child of a specific tag.
p>em {color:green;}
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; }
IDs
ID synax is similar to classes except a hash (#) symbol is used versus a class's period.
Difference between Classes & IDs
The ID can only be used once per page and a class may appear many times.
If you want to identify a unique piece of your page's markup use an ID.
If you want to apply rules to multiple tags in same page or many pages use a class.
Universal Selector
The asterisk (*) means anything so this rule means all text will be blue.
* { color:blue; }
Another use is as the inverse of a child selector. This rule means any em tag that is at least a grandchild of the p tag, but not a child, is selected.
p * em { font-weight:bold; }
Adjacent Sibling Selector
Rule selects a tag that follows a specific sibling tag. p48
Attribute Selector
Attribute selectors use the attributes of the tag. p48
Adding Styles to Web pages
Three ways to add styles to your pages.
Inline
Add to a tag using style attribute
<p style="enter CSS"></p>
Embedded
Add styles in the head of XHTML document
<style type="text/css">enter CSS</style>
Linked
Style is in another document and the markup is linked to the style.
<link href="style_sheet.css" media="screen" rel="stylesheet" type="text/CSS" />
Pseudo Classes
Classes that cause rules to be applied when a specific event happens. These classes are not attached to tags in markup.