CSS properties and Values

CSS properties are assigned to the CSS selector name. You also need to provide values for the CSS properties to define the style elements for the particular CSS selector you're working with.

In the default Twenty Ten WordPress theme, for example, the first piece of markup in the Header template (header.php) is <div id="wrapper">. This ID, with the name wrapper, provides styling for the site page.

In the default Twenty Ten WordPress theme stylesheet, the CSS defined for the wrapper ID is as follows:

#wrapper { margin: 0 auto; width: 940px; background: #fff;

Every CSS property needs to be followed by a colon (: ), and each CSS value needs to be followed by a semicolon (; ).

The CSS selector is #page, which has three properties:

✓ The first CSS property is margin, which has the value of 0 auto;.

✓ The second CSS property is width, which has the value 940px (absolute, fixed pixel width).

✓ The third CSS property is background, which has the value #fff (which is the correct hex code for the color white.

✓ The fourth, and final, CSS property is padding, which has the value: 0 20px (no padding on the top and bottom, 20 pixels of padding on the right and left sides).

Table 13-3 provides some examples of commonly used CSS properties and values.

Table 13-3

Common CSS Properties and Values

CSS Property

CSS Value

Examples

background-color

Defines the color of the background (such as red, black, or white)

Markup: <div id="wrapper">

CSS: #wrapper {background-color: white}

background

Defines a background image

Markup: <div id="header">

CSS: #header {background:

url(images/header.jpg)

no-repeat;}

font-family*

Defines the fonts used for the selector

Markup: <body>

CSS: body { font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;}

color

Defines the color of the text

Markup: <h1>Website Title</h1>

CSS: hi {color: blue}

afont-size**

Defines the size of the text

Markup: <hi>Website Title</h1>

CSS: hi {font-size: 18px;}

text-align

Defines the alignment of the text (left, center, right, or justified)

Markup: <div id="wrapper">

CSS: #wrapper {text-align: left;}

* W3Schools has a good resource on the font-family property here:

http://w3schools.com/CSS/pr_font_font-family.asp

** W3Schools has a good resource on the font-size property here:

http://w3schools.com/CSS/pr_font_font-size.asp

* W3Schools has a good resource on the font-family property here:

http://w3schools.com/CSS/pr_font_font-family.asp

** W3Schools has a good resource on the font-size property here:

http://w3schools.com/CSS/pr_font_font-size.asp

Make Money Blogging

Make Money Blogging

It is fine to get started on a hosted solution like Blogger.comor WordPress.com. They will allow you to learn the basics of blogging and web publishing without spending money. As soon as you nail down these basics, however, it is vital to buy your own domain name and to purchase a web hosting package with some company.

Get My Free Ebook


Post a comment