CSS Properties- Templates Lesson

Now that we understand how the CSS styles interact with each other, let's take a look at the properties which are used to create a style. Here is the standard format for creating styles:

tag       {property:value; property:value;}

For example a style which controls the H3 tag would look like this.

H3       {font-size:12px; font-family:Verdana, Arial, sans-serif;}

The syntax is similar, yet different than HTML. Curly braces are used instead of angle brackets, colons replace equal signs, and there are no quotes.

There are several properties which can be used to create a style, they have been categorized into 5 types which are descried below.

1. Font properties allow us to declare the "font-size" in points, pixels, percentages, ems and keywords. Quite a tongue twister!! Just deciding what unit of measure you will use, can be a challenge. "Font-family", "font-weight" and "font-style" are other properties which are commonly used.

2. Next come text properties. Cascading style sheets make a distinction between "font" properties and "text" properties. Font properties control text size, style, and formatting. Text properties determine text alignment, leading, and allow a first line indent.

Now let's discuss my favorite text property, "line-height" which allows me to control the leading between lines of text. This value can again be assigned in a wide variety of ways, just like font-size.

P       {font-size:12px; line-height:18px;}

This style will produce paragraphs of text which display in a format of 1.5 line spacing, it uses a font style to declare a size of 12 pixels, and a text style to declare line leading of 18 pixels.

P       {font-size:12px; line-height:24px;}

Produces a double spaced look.

Additional text properties include "text-decoration" (just in time for Christmas :-), which allow for underlined, strikethrough, and overline. The "text-align" and "text-indent" properties also allow us to justify text, and set a first line indent. This may not sound like a big deal, but for years these 2 tricks were very difficult achieve with HTML tags. There were many clunky work arounds, but no clean and simple solution. Well... with CSS properties the problem is solved.

3. Color and background properties can really cut down on the amount of code you need to type. Have any of you ever created a table with one row and one cell, just so you could create a text block with a pale blue background? Well throw out the table tags and give your tired fingers a rest. By using a "background-color" property a text block, list item, or table element can be assigned any background color you choose. There are also properties for "color", "background-image" and "background-repeat".

4. By using box properties we have an opportunity to think both "inside and outside" of the box. CSS assumes that all elements on a Web page fit into a rectangle. The box properties allow you to control the size, appearance and position of these boxes and the elements they contain. This group of styles is most commonly used to set margins and offset images and text.

5. Finally we can use CSS properties which allow us to control the appearance of items in an ordered and un-ordered list. We can identify an image which will mark each list item (bye bye bullets). The "list-style-type property" allow us to control the text symbol or number assigned to the list item. Using CSS classes can come in handy when customizing the look of a list.