How to Customize WordPress

Customize WordPress Style

To customize your WordPress based website, it is useful to have some knowledge about CSS. CSS stands for cascading style sheet:

“Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including SVG and XUL.” (Wikipedia)

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

On WordPress based sites styles are defined in an external file called style.css which is to be found in the Theme folder (wp-content/themes/the_theme/). Some themes use multiple style sheets, others offer an array of style sheets you can chose from (usually from the dashboard where you may select between different color schemes or looks).

yorgo design

Basic CSS Syntax

The syntax is simple and consists of only 3 parts:

selector { property: value }

  1. The selector:  defines the the html element you want to style, such as the body, header, footer, sidebar and so on.
  2. The property: defines what you want to style of the selected element, such as background, font-family, padding, margin.
  3. The value: defines the style you want to apply to the property of the element selected, such as the color code, size, name of the font.

Each selector can have multiple properties and each property can have multiple values.

The property and value are separated by a colon; they are contained within curly brackets. Multiple properties are separated by semi-colons.

Multiple values are separated by commas and if a value contains more than one word we surround it with quotation marks.

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

Inheritance

Nested elements inherit the properties of the containing element. The font from the above example will be inherited by all elements contained in the body, unless you make specific changes, for example for headings (usually titles and sub-titles):

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

From this example you see that we apply the style to multiple elements, by sticking them into one selector, whereas the elements are separated by commas.

Commenting Tags

You can add comments to your style sheet for explanatory notes.

/*My comment*/

Start your comment with a forward slash and then an asterisks and end it with an asterisks followed by a forward slash.

Note

If you have followed to this point, you have understood the basics and the logic behind the syntax of css. We need now to learn some more about the terminology used by CSS to define values, properties and selectors before attacking our style sheet. But that’s another topic.

Leave a Reply

Your email address will not be published. Required fields are marked *