FriendBurst Blog

A CSS rule has two main parts: a selector, and one or more declarations:

.selector { property: value; }

The selector is normally the HTML element that you want to style.

Each declaration consists of a property and a value.

The property is the style attribute you want to change.

Each property has a value.

Example:

To change the existing link color, the CSS targets the link HTML element. The HTML tag for a link is “a” (stands for anchor). This tag is referred to in the CSS by calling on that tag in the form of what is called a selector. So, to change the color of the links the CSS rule would normally appear as this:

a {
color: #ffffff;
}

#ffffff is the hex code for white, so the above rule would make all the links white.

“a” is the selector, “color” is the property, “#ffffff” is the value.

CSS always follows this same “rule”. Another example:

body {
background-color: #000000;
}

The above rule would make the page background black.

Sometimes it is necessary to use either a more, or less specific selector. Example:

div.block a {
color: #ffffff;
}

The above rule only targets the block links.

* {
color: #ffffff;
}

The above rule targets all text, including links. Notice the selector. An asterisk can be used as a selector to target all elements.

It may be necessary to override default styles. In this case, adding “!important” to the value will usually work. Example:

a {
color: #ffffff !important;
}

CSS looks difficult at first, but once you get used to the structure, and the meaning of the properties and values, it is quite easy.