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 {

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:


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

h3 {border:1px solid green;



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


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