">
Domain Registration : Discount Domain Pricing : Website and Domain Hosting : Frontpage 2000 Hosting : Website Development and Promotion : Secure E-Commerce : Shopping Cart Software : Linux and Windows NT : Graphic Design : Free Email Services : Fast Servers : Low Cost!


RESOURCES




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>

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 }
















Copyright © 1995-2003 Sidetrips™ Internet Services, Inc. All rights reserved.

Reproduction in whole or in part in any form or medium without express
written permission of Sidetrips Internet Services, Inc. is prohibited.

sidetrips.com™, hostserver.com™, registera.com™, htmlshop.com™,
and associated domains are trademarks of Sidetrips™ Internet Service, Inc.

Privacy Policy | Acceptable Use Policy | Terms of Service