TweetFacebookShareThis

CSS Selectors

Previous Page    Next Page

Class Selectors

Class selectors allow you to target specific elements such as the following paragraph of text (notice the period placed before the selector in the CSS) the element will be rendered bold and the text coloured blue, the heading as also been given the same class but because the p element as been put before the class selector in the CSS it will not style the heading just the paragraph with the class selector.

The CSS code would be:

p.textstyle {font-weight:bold; color:#00f;}

And the HTML code would be:

<h3 class="textstyle3">Heading</h3>

<p class="textstyle3">Class selectors allow you to target specific elements such as in this paragraph the text will be rendered bold and coloured blue</p>

Heading

Class selectors allow you to target specific elements such as in this paragraph the text will be rendered bold and coloured blue.


ID Selectors

ID selectors work like class selectors (notice the # symbol before the selector), except that they can only be used on one element per page the text will be rendered bold and the text coloured black.

The CSS code would be:

#boldblack {font-weight:bold; color:#000;}

And the HTML code would be:

<p id="boldblack">ID selectors work like class selectors, except that they can only be used on one element per page the text will be rendered bold and the text coloured black</p>


Descendant Selectors

The html element is the root it contains the head and body within its framework all elements within the head and body are descendants and share the same property values that are assigned to either the head or body elements.

The browser styles are the first in the cascade where the default styles are set by the browser, user styles can override these defaults, for example someone with a disability can alter the styles to suit their needs of accessibility, but the authors style sheet can overrule the users own style sheet, so it's good practice when creating a web page to accommodate for users disabilities.

Descendent selectors specify that styles should only be applied when the element is a descendent of another element, here the a element is a descendent of the paragraph the link is in and the link is going to be coloured black and the text made bold.

The CSS code would be:

p a {font-weight:bold; color:#00f;}

This link will take you to the World Wide Web Consortium www.w3.org

You can also specify the same set of rules for more than one selector, just place a comma between each one, you can also group multiple class and ID selectors.

The CSS code would be:

h1, p {font-style:italic; color:#00f;}

or

.headings, #paragraph {font-style:italic; color:#00f;}


Links and Pseudo-Classes

Use the CSS :link pseudo-class to specify the properties of unvisited links Link

  • a:link { } The :link pseudo-class will select any link that is defined as unvisited
  • a:visited { } The :visited pseudo-class will select any link that is defined as visited
  • a:focus { } The :focus pseudo-class selects elements that have keyboard input focus
  • a:hover { } The :hover pseudo-class selects any element when the user's cursor is over the element (mouse over)
  • a:active { } The :active pseudo-class selects any element that is currently being activated (mouse down)

So, the five link states should be written in the following order: a:link { }, a:visited { }, a:focus { }, a:hover { }, a:active { }

Rollover

The rollover effect used on a horizontal navigation bar.

A demonstration of what can be accomplished through CSS-based design
www.csszengarden.com
www.cssbeauty.com

CSS tutorial sites
www.maxdesign.com.au

Previous Page    Next Page

Recommended Books