CSS MADE EASY Web Design for Beginners

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 red:

h2 {color:red;}

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:red;
  font-family:arial;
  letter-spacing:10px;
}

In the above example all h3 tags will have red 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 green;}

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. Result:

Example

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

h3 {border:1px solid green;
    padding-left:20px;
    }

Result:

Example

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

body {background:silver;}

As well as using the background property to highlight a word:

.highlight {background:yellow;}

Add class="hightlight" to a span tag like this:

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

Result:

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 can be purchased at cafepress.com/easycss.152013227. It includes a download link to FREE bonus CSS designed webpage templates you can use for practice or to build websites.

© 2014 CSS Made Easy