CSS Selectors

Expression Web 4 & CSS:  Targeting HTML with CSS Selectors

Style Declarations, or Rules, begin with a CSS Selector. The Selector is very important because it tells the web browser which HTML element to Style. Selecting is a very important skill to master.  On my DVDs and Online Lessons, I teach you several ways to choose the best selector.

Selector Defined

A CSS Selector targets, or 'selects', the particular HTML page element to be styled by a particular Style Rule. 

  

 

 Some Selectors will style only part of an HTML Element.  For instance, we often use Class Selectors to change the color of a word or two within an entire paragraph.  We'll review how to do this shortly.

  

Learn the Core Selectors

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. 

•  ID
• Class
• Tag or Element
• Descendant
• Pseudo-Class
• Universal

 

HTML Attributes are very important because they are often used to "hook" a selector to the HTML.  For instance, ID Selectors are 'hooked' to HTML elements via the ID Attribute.  (Expression web adds this html attribute for you behind the scenes.)

Here's an Example:  The Selector is #container, which is an ID selector.  We will use this selector to target a specific div tag on the page.

<div id="container"></div>

Notice the html id attribute "container" hooks the CSS Style to the HTML Div.

It's done the same way with Class Selectors and Descendent Selectors.

ID Selectors

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.   In other words, ID  Selectors must be unique.  A perfect example is the Layout.  Use an ID Selector for each div of the CSS Layout. 

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.

For instance, place a div tag on your web page.  Then place your cursor inside this div so as to choose the div.  Now click on New Style in the Manage Styles Panel.  This will open the Style Builder.

Look at the Style Builder

The first thing we must do in the Style Builder, is type in a CSS Selector.  So, type the following for the Selector:  #container

#container will be applied to the div you selected once you click the apply button.  Expression Web will add some HTML for you so that the web browser knows to apply the #container style to this particular div.

HTML ID Attribute is added to the HTML for you.  This is how the web browser knows which style goes to which div (as far as ID selectors go).

Example:  #container Selector will match the HTML ID Attribute:  <div id="container">

top of page

Class Selectors

A Class Selector is indicated by a period. 

For instance,  .bold_text  is a class selector that I defined.  Any time I want to make a word or two bold, I simply apply this style to the text.

• Class Selectors must begin with a period followed by a letter.  Cannot use a number immediately after the period. 
• A Class Selector can be used as many times as needed on a single web page.
• You are required to use the period at the beginning, but you can use any words you would like to name the selector.
• It is common for class selectors to be used to style only a portion of an element.  However, they can also be used to style any element that will occur on a web page more than one time.
• The HTML Class Attribute is used to match the class selector to the HTML Element to be styled.  (Expression Web takes care of this for us.)
• Or, the tag is used to apply the class style to a portion of an HTML Element.

Check out Using Class Selectors

top of page

Tag or Element Selectors

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.  The HTML tag for body is <body>.

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 of page

Descendent

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 and target of the Selector.  A comma means and.

top of page

Universal

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 and padding.  There is something called a "CSS Reset".

  top of page

Pseudo Class Selectors

Pseudo Class Selectors are used to style the four states of a hyperlink.

• a:link
• a:visited
• a:hover
• a:active

 

top of page

 

Other CSS Selectors

Once you learn the Selectors that were just reviewed, move on to Sibling & Adjacent Selectors.  Likewise, :first-line and :first-letter can come in handy. 

More about these Selectors is on the way.  Be sure to check back.