call us now!

08 9459 5730

0402 142 559

Cheap web design services in Perth! Your local web designer in Perth. Quality low cost web design that you can afford.

CSS Selectors and the structure of CSS Rules

As mentioned in the introduction of CSS, CSS rule consists of two parts:

  1. A selector, which defines the type (s) of HTML element (s) to which the style rule applies.
  2. A series of declarations, consisting of properties and values, that define the style.

In this section, we’ll take a look at all the different kinds of selectors that available to you in CSS.

css selectors

Universal Selector ( * )

The universal selector is defined with a star sign ( * ) . The universal selector matches every element in the document. I never use this selector in my design, but if you want to make all HTML elements have the same colours then you can use universal selector.

In this example, all elements in the page are given a text color of red.

*
{
     color:red;
}

Element Type Selector (a, p, h1, ul, ol)

Unlike the universal selector that matches any HTML element, an element type selector only matches elements with the element type name. For example, p(paragrahp), h1 (heading 1), a (hyperlink) etc...

In this example, we specify the text and background color of all hyperlinks in HTML document. They will appear as red text on a black background.

a
{
     color: red;
     background-color: black;
}

ID Selector ( # )

The ID selector is used to specify a style for a single, unique element. The id selector uses the id attribute of the HTML element, and is defined with a ( # ). For example, <div id="main-content"></div>

An ID selector lets you target a single HTML element within a page. IDs must be unique within a document; no two HTML elements in a single document should have the same ID.

The style rule below will be applied to the element with id header. You define the ID in your HTML document like this
<div id="header"</div> then style the header division with CSS.

#header
{
     background-color: blue;
     text-align:center;
}

Class Selector ( . )

The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements. This allows you to set a particular style for any HTML elements with the same class.

The class selector uses the HTML class attribute, and is defined with a ( . ). No space is permitted between the period and the name of the class.

Example:

First you need to create a HTML element with a class name. In the example below, we have a class division in our HTML called gallery. <div class="gallery"></div>. All HTML elements with the class name gallery will be floated to the left.

.gallery
{
     float:left;
     width:200px;
     height:150px;
}

You can also specify that only specific HTML elements should be affected by a class. For example, you can create a paragraph class in your HTML document; <p class="center"></p>. All p elements with a class name center will be center-aligned:

p.center
{
     text-align:center;
}

Pseudo-class Selector

Pseudo-classes are used to represent dynamic events, a change in state, or a more general condition present in the document that is not easily accomplish through other means. This may be the user’s mouse rolling over or clicking on an element. Unlike pseudo-elements, pseudo-classes have a single colon before pseudo class property.

There are 4 pseudo-class selectors:

  1. :link - refers to an unvisited hyperlink
  2. :visited – refers to visited hyperlinks
  3. :hover – signifies and element that currently has the user’s mouse pointer hovering over it.
  4. :active – signifies and element on which the user is currently clicking