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

Blog Your Way To The Top

Blog Your Way To The Top

How Any Business Builder Can Turn A Simple Blog Into A Lead Generating, Organization Cash Cow For Any Home Based Business! Everyone knows that in order to succeed in your home based business or your MLM / Network Marketing business, you need to adopt the latest strategies when it comes to making massive money.

Get My Free Ebook


Post a comment