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:
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:
blue arial text
Some properties can have more than one value:
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:
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.
