Selectors

A Selector is the definition of a formatting Style that can be applied to a HTML Element.
The Selector has three basic parts:

Element {Declaration: Value}

The Declaration and Value are surrounded by {} braces and the
Declaration is separated from the value by a colon : and a space.

The Selectors relation to common HTML would be similar to this tag structure that is used to define the color of a font:

< font color=orange >

Where Font is the Element,
Color is the Declaration and
Orange is the Value of the Declaration.

Type Selectors

Type selectors are used set the definition of a certain type of element. If you wanted to assign a property to all of the <H1> elements in your document you would use the following.

<style>
H1 {color: 000fff}
</style>

The syntax is:
Element {declaration: value }

Multiple Declarations

If you would like to define more than property for your Element you can use a semicolon ; to separate Declarations.

<style>
H1 {color: 000fff ;
    font-weight: bold;
    font-size: 12pt
}
</style>

The syntax is:
Element {declaration: value ; declaration: value}

Grouping Elements

If you would like to apply the same properties to different elements you can use a coma , between the elements and use the same Declarations and Values.

<style>
H1, TD, P {color: 000fff }
</style>

The syntax is:
Element, Element, Element {declaration: value }

Parent Child Elements

Contextual elements can be combined to for a selector that will be applied only if a certain element pattern is used in the HTML.

Only works in IE4.

If you wanted all Italic characters to be Blue but only if they were contained inside a H1 headline. You could define the selector like this:

<style>
B ~ I {color: 000fff }
</style>

The syntax is:
ParentElement ~ ChildElement {declaration: value}

The following text would be bold but the Italic (e) would be rendered both Italic and Blue. However Italic text that is not contained inside a Parent B Element will be rendered just plain Italic and not blue.

<B>T<i>e</i>xt</B>

The Result would look like

Text

Sequential Selectors

When you want to define a selector that would be applied only if one element directly follows another element you can use the following format.
Only works in IE4.

<style>
/P ~ I/ {color: 000fff }
</style>

The syntax is:
/FirstElement ~ SecondElement/ {declaration: value}

And would be applied as follows:

<P>Chickens</P>
<I>happy chickens</I>

ID Elements

If you would like to define a declaration and value that you can apply to elements in your document but you do not want to apply this declaration to all tags of one type you can use an ID element and then apply that ID to your tags as you wish.

<style>
#abc123 {color: 000fff }
</style>

<P id=abc123> text </p>

The syntax is:
ID {declaration: value }

The HTML Tag referenced:
<tag id=ID>

If you would like to set up optional declarations for a single element you can apply an ID to an element. This will allow you to use varying styles within the same element.

<style>
H1 #abc123 {color: 000fff }
</style>

<H1 id=abc123> text </H1>

The syntax is:
Element ID {declaration: value }

The HTML Tag referenced:
<tag id=ID>

Class Elements

Class Elements are defined in a similar method to ID Elements. They can be applied various to HTML elements in a per element method or they can define a subset class of an element.

<style>
.chicken {color: 000fff }
</style>

<H1 class=”chicken”> text </H1>

The syntax is:
.class {declaration: value }

The HTML Tag referenced:
<tag class=”classname”>

Pseudo-Classes

The ability to change the properties of a element based on the state of the element can be accomplished by using a Pseudo Class Element.

The Anchor < A > element can have different rendering properties applied to it based upon the current state.

The possible variations include:

link – unvisited links
visited – visited links
hover – user hovers
active – active links

<style>
A:hover {color: orange }
</style>

<A href=”file.html> click here </A>

The syntax is:
element:pseudo_class {declaration: value }

Final Note

When defining your Selectors in your CSS file it is good practice to group your selectors based on their use. If you are defining for example your sidebar where ads or other blocks of information will go then group those selectors so you can find and modify them easily.

Defining your Selectors in a CSS File will allow site wide modification from one file but do not dismiss the use of inline CSS within specific elements to localize and limit formatting for specific reasons.

Your CSS File should include General and Non Changing or Specific information about how you want your pages to render. You should not try to load it with every formatting attribute that you need to apply.

A secret may be setting up basic shells that you can apply quickly in your documents.

You may want a variety of font sizes try setting up a list of selectors in your css file that can be used across your site.

#font18px {font-size:18px}
#font18pxBlue {font-size:18px;color#2784b0}

then apply them as such

<span id=”font18pxBlue”>this is 18px blue font</span>