748 - 0
yes

SFBPC – CSS Explained

2011-02-16 at 06:24 pm BlogBlog  RSSRSS  Subscribe

CSS (Cascading Style Sheet)

CSS

This is a brief explanation of how CSS works.

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.

Last 5 posts by shan1


View Counter: 1,768 views


6 Responses to “SFBPC – CSS Explained”

  1. Thank you! I know html, but find css very confusing.

    Likes: Thumb up 0

  2. Ya no kidding! I was lost at Selector lol :-?

    Likes: Thumb up 0

  3. thank you so much!

    Likes: Thumb up 0

  4. I really thank you Shan for taking the time to do all this for the people here at FB!

    Wonderful job!

    Likes: Thumb up 0

  5. Thank you Shan1 for sharing -- Peace and love -- Byron

    Likes: Thumb up 0

Leave a Reply

You must be logged in to post a comment.