www. Expression - Web - 3 .com
1.866.363.5633

New Online Store

 

•   

 Training DVDs & Products

• DVD Sets

 

 

 

 

CSS Selectors

What is a CSS Selector?

CSS Selectors are used to 'Select' the particular HTML page element that a Style Rule is intended to style.

A Style Declaration (or "Style Rule", or just "Style") begins with a CSS Selector.  See Anatomy of a  Style Declaration.

The Core CSS Selectors that you must learn include the following:

1. 1.  ID Selector
2. 2.  Class Selector
3. 3.  Tag or Element Selector
4. 4.  Descendant Selector
5. 5.  Dynamic Pseudo Class Selectors

 

1. ID Selectors

We use the # pound sign to indicate an ID Selector, and we combine this with a descriptive word of our choice, which describes the element we are targeting to style.

ID Selectors must be unique.  In other words, any particular ID Selector can only be used one time on a web page.  For instance, ID Selectors are commonly used to style div tags that make up the Layout. 

Each div will be given a unique ID Selector, such as #container, #header, #left-col, and so on. 

The ID Selector must match the id attribute in the HTML.  This part is taken care of for you by Expression Web.   But for those brave enough to write their own code, #container must match the html ID attribute. 

The "id" in the above code is the HTML ID attribute.  This attribute must match the Selector in order for the style to be applied to the div tag.

 

2. Class Selectors

A Class Selector is commonly used to style just a portion of an HTML Element. 

For instance, if you would like to change the color of just a few words in a paragraph, you can use a class selector to select those words and apply the color of your choice.

A Class Selector begins with a period (.) You can reuse one class style as many times as you would like on any given web page.

Example:    .bold-red {color: red; font-weight: bold; }

 

To apply this style in Expression Web 3:

• 1) highlight the text that you want to make bold and red,
• 2) then right click on the .bold-red style listed in the Manage Styles Panel
• 3) and choose Apply Style  

 

3.  Tag or Element Selectors

Tag Selectors are HTML Tags without the angle brackets.  They target a particular HTML tag on your web page.

Example:  Style paragraphs.  <p> is a paragraph tag.  The Tag Selector is the letter p.

 

4.  Descendant Selectors

A Descendant Selector is used to style nested elements. 

For instance, when we insert paragraphs inside a div element on a web page, we are nesting those paragraphs.  Take it one step further, the div is the parent element while the paragraphs are the Descendant elements. 

(We could even say the paragraphs are child elements, however, since child selectors are not supported by certain IE browsers, I'm skipping the child selector and going right to the Descendant.  A child is a descendant anyway.)  (more on this later)

We can style these specific paragraphs differently then all other paragraphs on your site by using a Descendant Selector.

A Descendant Selector is used when a Style needs to be very specific. So instead of styling all paragraphs on a web site by creating the selector "p", we will create a Descendant Selector such as, #page-content p.

#page-content p

      This selector targets all paragraphs located inside the #page-content div of a layout. 

The same thing applies when styling lists and list items. 

#top-nav ul
#top-nav li
#top-nav a
etc...................

5.  Dynamic Pseudo-Class Selectors

Used to Style the various states of Hyperlinks

A hyperlink is how we link web pages together and how we help folks navigate our sites.   Every web browser applies certain default styles to our hyperlinks, just as it does to many other elements on a web page. 

Where do these default styles come from?  ---> Each web browser has it's own Internal Style Sheet, and that style sheet is applied to our web pages.  We can and must over-ride the Browser defaults in order to take control over the styles and thus the appearance of our pages.

By default, hyperlinks are blue and underlined.  However, after a person clicks on a hyperlink it turns purple.  This is the Visited State of a hyperlink and is a Usability strategy that helps viewers keep track of which links they've clicked and which they have not.

Another Default State of a Hyperlink is the Active State.  This is the very moment you click on a hyperlink.  By default, when you click on a link, it will briefly become red.

What about the Hover?  You know, I cannot recall every seeing a default hover state.  But, we can certainly define a hover effect for our hyperlinks. 

 

The Pseudo-Class Selectors

a - means 'anchor', which is the text of the hyperlink.  This is really what we're styling.

a:link  - the normal or unvisited state of a hyperlink. 

a:visited  - the visited state of a hyperlink.

a:hover   - what happens when someone hovers their cursor over a hyperlink.

a:active  - the very moment when you click on a link.

**It is very important that you specify these Selectors and their attached Delcaration Blocks (Styles) in the order listed above.  If you do not specify the styles in the order listed above, there's a good chance they will not be applied correctly.

Now that you know the Defaults of  a hyperlink, it's time to change those defaults and make the hyperlinks "fit in" with our own page designs.

Note:  In reality, you would combine a pseudo selector with an ID or Class selector to make a Descendent Selector so that you style only those links in a certain section of your layout.

Since I teach everyone to use ID Selectors to make a Layout, let me rephrase the confusing sentence above: 

We must use Descendent Selectors to exert precise control over which particular hyperlinks we are styling.  If we don't, we may end up with a mess in our paragraphs and other content.  (this is another tutorial in and of itself.  so just trust me on this.)

EXAMPLE:  Which div are the hyperlinks nested inside of that you want to style?  Let's say they are in the div styled as the #top-nav.  Therefore, in order to style only those hyperlinks in the #top-nav, we would create the following Descendent Selectors:

• #top-nav a
• #top-nav a:link
• #top-nav a:visited
• #top-nav a:hover
• #top-nav a:active  (optional)

 

Those folks who purchase my DVDs will learn how to take it one step further and group some of the above selectors together so as to save time.