People faced with adding a customization into the custom.css file for the first time are often overwhelmed by the task, even if it’s just a cut-and-paste operation. What are all these strange terms? Are there any rules for the punctuation marks?

And many find that their first attempt at customizations on their own fail because some little punctuation mark or bracket is left out.

The purpose of this article is to give you a basic understanding of the syntax of CSS — how the statements are put together and the punctuation rules. This will help you as you begin to read and try to understand cut-and-paste customizations, as well as when you make customizations on your own. It is not a tutorial in CSS — that would take many, many pages! A good basic online CSS tutorial can be found on the w3schools.com site. It is useful not only for CSS beginners, but as a convenient reference when you’re more experienced.

CSS statements: selector, property, and value

CSS statements are made up of three parts: a selector, a property, and a value. The selector defines an element that you see on the screen, such as text or a background color. It has properties that are the individual attributes of the element being defined, and each property has a value. For example, in the definition of a red wagon, the selector would be “wagon,” the property “color,” and the value “red.”

The basic syntax of a CSS statement is illustrated below. The property and value are surrounded by curly braces. There is a colon after the property, and a semicolon after the value:

selector { property: value; }

The following example has two lines. The first is a typical CSS statement showing correct CSS syntax for a single value. The second statement has a value of two words. If a value has multiple words, put quotes around them:

example_selector { background: #000000; }

example_text_styling { font-family: "sans serif"; }

CSS statements: one line or several

You can put several CSS properties on a single line. Each property must be separated by a semicolon. To make your CSS code more readable, you can put each property and its value on a line by itself. It makes no difference to the browser how the selector is formatted. The following example has the same selector written as a single line, then broken out:

example_text_styling { font-weight: bold; color: #000000; font-family: "sans serif"; }

example_text_styling { 
	font-weight: bold; 
	color: #000000; 
	font-family: "sans serif"; 
}

CSS comments

It is a good practice to put comments into your code. It will help when you edit your code at a later date, and it helps other people understand what your code is doing. Comments are ignored by browsers.

A CSS comment begins with “/*”, and ends with “*/”. Note that you can put comments into the middle of code blocks, as in this example:

/* This is a comment */
example_text_styling { 
	font-weight: bold; 
	/* This is another comment */
	color: #000000; 
	font-family: "sans serif"; 
}

Comment marks are also useful to disable or “comment out” a block of code. All you have to do is to surround the code with beginning and ending comment marks to make it invisible to the browser, as in this example:

/* This code has been commented out */
/*example_text_styling { 
	font-weight: bold; 
	color: #000000; 
	font-family: "sans serif"; 
}*/

When to use “.custom” in front of a selector

Thesis is unique in the way it allows you to override the CSS properties and values of selectors in the core code. The way to do this is by inserting “.custom” in front of the selector. Failing to use “.custom” to override core code is bad practice and might break the theme! For example:

/* in the core code */
#header #logo { font-weight: bold; }

/* in custom.css */
.custom #header #logo { font-weight: normal; }

The one exception to this rule is when overriding the body selector. It must be followed by the “.custom” word:

/* in the core code */
body { background: #fff; color: #111; }

/* in custom.css */
body.custom { background: #000000; color: #FFFFFF; }

You do not have to put “.custom” in front of selectors, classes, or id’s that you create. It does not hurt to do so, but it is unnecessary since you are not overriding anything in the core code.

Grouping selectors

You can group selectors together that share a common property. Remember that in custom.css each selector must have “.custom” in front of it. Each selector in a group must be separated by a comma. In the following example some of the core title header elements are grouped together, and all changed to the color black:

.custom h1, .custom h2, .custom h3 { color: #000000; } 

The class selector

You may have noticed that some selectors are preceded by a period (.). This signifies that the selector is a class definition. Classes are used in HTML elements to change their behavior. Classes are often used and shared by many HTML statements on the same screen. A class definition for titles might look like this:

.my_own_title_class { color: #000000; }

This example class could be used in an HTML statement to make titles black. Note that there is no period in front of the class name when the class is used:

<p class="my_own_title_class">This is the title</p>

In custom.css you must preserve the period in front of the class definition from the core code. Note that the class selector in this example actually has two words. It is necessary to put “.custom” only at the beginning of the line:

/* in the core code */
.format_text a { text-decoration: underline; }

/* in custom.css */
.custom .format_text a { text-decoration: none; }

The id selector

You may also have noticed that some selectors are preceded by a pound sign (#). These are called id’s and are generally created for use by a single occurrence of a specific element on the screen. A typical id definition for a 125×125 ad box might look like this:

#my_own_ad_id { height: 125px; width: 125px; }

This id would be used in an HTML statement to define the size of a screen element for the ad. Note that there is no pound sign in front of the id name when it is used:

<div id="my_own_ad_id">

In custom.css, you must preserve the pound sign in front of an id definition. Note that the id selector in this example actually has two words. It is necessary to put “.custom” only at the beginning of the line:

/* in the core code */
#header #logo { font-weight: bold; }

/* in custom.css */
.custom #header #logo { font-weight: normal; }

I hope this brief introduction to CSS syntax has been helpful to you and goes toward demystifying the custom.css file. Remember that comments are always welcome, and that you can email me directly by clicking on the “Contact” button at the top of the page.

©2009 Michael L Nichols. All rights reserved.