dog portraits

Lesson 5:
CSS properties

Properties are CSS commands, together with their values they tell selectors how HTML tags are to display stuff on webpages such as making text blue:

h2 {color:blue;}

There can be an unlimited amount of properties added to a selector and they can be listed in any order as long as they are contained between the curly brackets and each property is separated with semi-colon at the end of its value:

h3 {
  color:blue;
  font-family:arial;
  letter-spacing:10px;
}

In the above example all h3 tags will have blue arial text with letters that are spaced 10 pixels apart:

red arial text


Some properties can have more than one value:

h3 {border:1px solid orange;}

The three values listed will detemine the border's thickness, it's style and it's color. Notice that each value is separated by a space and the semi colon comes at the end of the last value listed.

The result would look like this:

Example


Some properties including the border property have a top, right, bottom and left counterpart property, for example:

h3 {border-left:1px solid blue;
    padding-left:40px;
    }

Result:

Example


With properties it's possible to do things HTML alone can't such as using the background property to change the background color of the webpage:

body {background:silver;}

and to highlight a word:

.highlight {background:yellow;}

When class="hightlight" is added to a span tag like this:

Guess which <span class="highlight">word</span> will be affected

the result would be this:

Guess which word will be affected


Pretty cool this CSS stuff, isn't it? There are many properties that will let you redefine just about every aspect of a webpage including designing a site's layout.

I hope you have found this little tutorial useful and informative, the full of CSS Made Easy is included with the purchase of the HTML Made Easy e-book.

MOCAHOST WEB HOSTING

Unlimited website traffic and disk space on all plans starting at $1.95 per month on 3 year plan. Money back guarantee.