a guide to using selectors for cascading style sheets
The code used to set a either an embedded or linked style for a single tag first indicates the selector, followed by a declaration within curly brackets. The property and value of the declaration are separated by a colon and followed by a semi-colon.
For example, h1 {font-weight:bold;}. This would make all h1 headers appear as bold.
A multiple selector is very similar to a standard selector, except that it sets the same style for more than one html tag.
The above example can become a multiple selector by changing it to h1, h2, h3 {font-weight:bold;}. This would make all three headers, h1, h2, and h3, appear bold each time they appear on the page.
A contextual selector targets the style of an html tag in a specific placement within the text. It can target a tag that is a child, grandchild, etc. of other tags.
For example, if a <strong> tag is within a <p> tag, its style can be changed with the following code:
p strong {font-size:110%;}
This will create a style for all <strong> tags with a <p> tag, even if there are other tags between them. Similarly, if the tag is the grandchild of the <p> tag, let's say within a <span> tag such as:
<p>The horse jumped<span><strong>over</strong></span>the cart</p>
the tag can be controlled with p span strong {font-size:110%;}. In this case, only tags that are within both a <p> and a </span> will be affected.
The selectors must be listed in the order in which they appear in the code for the browser to apply a contextual selector.
A contextual selector can be set up to only apply when the targeted tag is the child of a specific tag. To target only the child tag, a "greater than" symbol is placed between the parent and the child tag, with the parent listed first then the child. From the example above, if the style code is
p > strong {font-size:110%;}
the style will apply only to the <strong> that immediately follows the <p> tag and not to the one following the <span> tag.
A class is used for a group of tags that will be implemented more than once on the website (for linked styles) or on the page (for embedded styles) in order to give those tags a similar look. A good example for using a class would be to set a style for a heading that is used multiple times within a website. An id is used only once for a unique item on a page that does not appear more than once.
A universal selector uses the wildcard "*" to globally set a style for all text in a document. The syntax is *{font-style:italic}. This would make all of the text in the body of the page appear in italics.
The adjacent sibling selector is used to target the style of a the second of two sibling tags, where the second immediately follows the first with no other tags in between. If the page has a numbered list, and you want to make only the first item in the list small caps, the syntax would be ul + li {font-variant:small caps;}. The remaining items in the list would not be affected by the style.
This selector targets an attribute associated with an html tag. It can apply to all occurances of the tag-attribute combination, or to a very specific occurance by including the value of the attribute. For example, span[class] {color: blue;}, would make all text within any <span> tag appear blue. If the style was span[class=example] {color: blue;}, only the text within a <span> tag that has the class "example" would be blue.
The most common pseudo classes are a set of codes that allow you to set the behavior for the link tag. They allow you to change the behavior (such as the color) of link tags as they are clicked on. The pseudo-classes are link, hover, visited, and active.
Here is an example of this code:
a:link {color:#336600;}
a:hover {color:#666633;}
a:visited {color:#669933;}
a:active {color:#99CC66;}
These styles must appear in the indicated order in order for them to work.
There are other pseudo-classes that add special effects to selectors by using recognized terms, call "pseudo classes", such as "first-child", and "focus". The syntax is selector:pseudo-class {property:value}.
An example would be em:first-child {color:blue;}. This would make every <em> tag that is a first child to another tag appear as blue. In the following example, only the first word "strong" would appear blue:
<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>
Pseudo-elements are used to add special effects such as changing the style of only the first letter of a paragraph, or adding text before or after static text on the web page.
For examaple, if you would like to make the first letter of every paragraph appear as red, the code would be:
p:first-letter {color:#FFF000;}. Now every first letter of every paragraph would be red.
Some other pseudo-elements are :after, :before, and :first-line.
