Constructing CSS Syntax Using Selectors

A Selector is used to bind properties to elements in an HTML document. They have three basic parts:

The syntax is: The HTML Tag
.class {property: value } < tag attribute="value">
 a{ color:blue}   < font color=orange >
  p{ text-align:left}  

Selector {Property: Value}

These selectors may match one or more element using patterns as shown in this image. The Property and Value are surrounded by {} braces and the Property 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 >

Type Selectors

There are numerous types of selector, this lesson will discuss some of the more common selectors types which are:

  • Type selectors
  • Multiple decelerations
  • Class selectors
  • Grouping Selectors


Type selectors are the most common and easy to understand selectors,they 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.

The selector below is a type selector, it has only 1 selector and 1 property.Notice that property and value are separated by a colon and surrounded by curly braces (e.g. { } ). This indicates that property for the selector has taken on a value. In this example, the selector body background property will take on a color of black.

selector {property:value}      =       body {color: black}

Multiple selectors are used to declare more than 1 property for a selector type. The syntax below indicate the use of more than 1 property for a selector like the example seen here. The selector p"paragraph" will be centered, with black letters, and arial font types. This paragraph has taken on three properties.

[selector] {[property]:[value]; [property]:[value]}

The format below is used more often for clarity. Like the example above, this syntax is easy to read.

[selector]
{
[property]:[value];
[property]:[value];
[property]:[value]
}

 

 
Imsg
Discussion

Blogging

E-mail

 

CSS & HTML    -    LESSON 2
C S S - S Y N T A X