Expression Web Tutorials

FREE Expression Web Tutorials

CSS Selectors

A Selector specifies the particular (X)HTML web page element to be styled by a particular Style Rule.  In order to have a wide range of options in styling these page elements, we have numerous Selectors we can choose to use.

Here we will review the Core CSS Selectors that will provide you with the basic skills needed to Design Web Pages.  Once you have mastered these basic Selectors and skills then you can move on to more advanced CSS Techniques. 

 

Core CSS Selectors:

  1. ID Selectors
  2. Class Selectors
  3. Element or Tag Selectors (also called Contextual Selectors)
  4. Dynamic Pseudo-Class Selectors
  5. Descendant Selectors
  6. Universal Selector

ID Selector   (#)

An ID Selector is indicated by using the pound # sign.  Use an ID Selector for page elements that occur one time on a web page.  A perfect example is the Layout.  Use an ID Selector for each div of the CSS Layout. 

#container   <---  This is an id selector.  It means there can only be on container on the web page.

The pound sign #, which is technically an octothorpe, is used to signify an ID Selector.  The word "container" in our example is just a word I chose to name my selector.  In reality, I would apply this selector to the main div of my layout.

See Anatomy of a Style Declaration

Top

Class Selector  (.)

A Class Selector is indicated by a period .  For instance,  .bold_text  is a class selector that I defined.  You are required to use the period at the beginning, but you can use any words you would like to name the selector.  However, be descriptive in naming your selectors. 

A Class Selector is applied to only a portion of a page element, not the entire element.  Furthermore, a Class Selector can be applied numerous times on a single web page.

 

To apply a class style to a page element:

  1. First create the class style. (click New Style, etc)
  2. Then highlight  the text you would like to apply the style to.
  3. Then right click on the class style you just made, and choose Apply Style.

Click Save and view in a browser.

.bold_text { font-weight: bold;} 

Top

 

Tag or Element Selector

A Tag Selector is simply the HTML tag you are styling, but without the brackets.   For instance, if you want to style an unordered list, you would use the letters ul as the selector.

A classic example is styling the body of a web page. 

 body {   
   margin: 0px;   
   padding: 0px;
}

The body is the background of the web page, and at a bare minimum, we need to remove default margins and padding by inserting zeros. In reality, Tag Selectors are typically combined with other Selectors, such as ID Selectors.  See (Descendant Selectors.)  The body style is the exception.

Top

 

Dynamic Pseudo-Class Selectors

Pseudo Element Selectors and Pseudo Class Selectors are used to style the different states of a Link.

Top

Descendant Selectors

Descendant Selectors are created to style any nested elements.  For instance, if we style a paragraph that is inside the #maincontent div, we will use a descendant selector.

 #maincontent p { font-size: 13px;}

The space between #maincontent and the letter p is intentional.  It means we are styling all paragraphs located inside the maincontent div.  If we were to use a comma instead of a space, it would change the meaning. 

A comma means and

Top

Universal Selector

The universal selector is indicated with an asterisk.  *  

The purpose of this selector is to make a style rule one time, yet it will be applied to every single element on your web pages.  The most common use of the universal selector is to remove, or zero out, all margins and padding.

I have to tell you, there is a better way to deal with default margins, padding, and other properties.  There is something called a "CSS Reset".   Use the CSS Reset instead of the universal selector to remove default margins and padding.

Top