How to Customize WordPress

To cus­tomize your Word­Press based web­site, it is use­ful to have some knowl­edge about CSS. CSS stands for cas­cad­ing style sheet:

“Cas­cad­ing Style Sheets (CSS) is a style sheet lan­guage used to describe the pre­sen­ta­tion seman­tics (the look and for­mat­ting) of a doc­u­ment writ­ten in a markup lan­guage. Its most com­mon appli­ca­tion is to style web pages writ­ten in HTML and XHTML, but the lan­guage can also be applied to any kind of XML doc­u­ment, includ­ing SVG and XUL.” (Wikipedia)

I clear text: CSS defines the style and look of the web site and of its content.

On Word­Press based sites styles are defined in an exter­nal file called style.css which is to be found in the Theme folder (wp-content/themes/the_theme/). Some themes use mul­ti­ple style sheets, oth­ers offer an array of style sheets you can chose from (usu­ally from the dash­board where you may select between dif­fer­ent color schemes or looks).

The syn­tax is sim­ple and con­sists of only 3 parts:

selector { property: value }

1. The selec­tor:  defines the the html ele­ment you want to style, such as the body, header, footer, side­bar and so on.
2. The prop­erty: defines what you want to style of the selected ele­ment, such as back­ground, font-family, padding, margin.
3. The value: defines the style you want to apply to the prop­erty of the ele­ment selected, such as the color code, size, name of the font.

Each selec­tor can have mul­ti­ple prop­er­ties and each prop­erty can have mul­ti­ple values.

The prop­erty and value are sep­a­rated by a colon; they are con­tained within curly brack­ets. Mul­ti­ple prop­er­ties are sep­a­rated by semi-colons.

Mul­ti­ple val­ues are sep­a­rated by com­mas and if a value con­tains more than one word we sur­round it with quo­ta­tion marks.

body{
background:#eaeaea;
font-family:Tahoma,"Trebuchet MS",sans-serif;
}

Nested ele­ments inherit the prop­er­ties of the con­tain­ing ele­ment. The font from the above exam­ple will be inher­ited by all ele­ments con­tained in the body, unless you make spe­cific changes, for exam­ple for head­ings (usu­ally titles and sub-titles):

h1,h2,h3,h4{
font-family:Georgia,"Times New Roman", serif;
}

From this exam­ple you see that we apply the style to mul­ti­ple ele­ments, by stick­ing them into one selec­tor, whereas the ele­ments are sep­a­rated by commas.

You can add com­ments to your style sheet for explana­tory notes.

/*My comment*/

Start your com­ment with a for­ward slash and then an aster­isks and end it with an aster­isks fol­lowed by a for­ward slash.

If you have fol­lowed to this point, you have under­stood the basics and the logic behind the syn­tax of css. We need now to learn some more about the ter­mi­nol­ogy used by CSS to define val­ues, prop­er­ties and selec­tors before attack­ing our style sheet. But that’s another topic.

Related posts:

1. Cus­tomize Word­Press with Semi­oman­tics XO
2. Ele­gant Word­Press by Semiomantics
3. Trans­par­ent Word­Press Theme Design
4. Trans­par­ent Word­Press Semi­oman­tics XO
5. Block­quote, Pul­lquote and Code

This entry was posted on October 20, 2010 at 2:40 pm and is filed under CSS, Featured Main, Web Design. You can follow any responses to this entry through the RSS 2.0 feed.