Before you start changing anything to your CSS stylesheet, save the stylesheet on your computer.

To open your stylesheet.css, on your WP dashboard go to Appearance>editor and open the stylesheet (style.css). It is the last file in the right sidebar under Styles.

Make a select all, copy and past it on a texteditor like notepad or textedit; better is to paste it in a HTML editor page with Komodo Edit 8 or similar.

For this training I used the stylesheet of the Twenty Twelve Theme (I presume most of you still have this in their dashboard.

When you first take a look at this stylesheet you will be more than overhelmed. But I will try to make this sheet a little bit more comprehensive.

The first long paragraph (between /* and */) gives you an explanation of the content of the stylesheet, followed by an explanation of the sizes of fonts and lineheights.

Remark: All text between /* and*/ is ignored as commands and are explanations and structure informations.

The stylsheet starts with a reset section, putting all the possible selectors to a starting value. The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.

On line 178 ( if you have a html editor) the real stylesheet setting is starting with repeatable patterns.

Lets take a look at the first one:

/* Small headers */

.archive-title,

.page-title,

.widget-title,

.entry-content th,

.comment-content th {

font-size: 11px;

font-size: 0.785714286rem;

line-height: 2.181818182;

font-weight: bold;

text-transform: uppercase;

color: #636363;

}

You find here five elements (selectors) with the same values. If you analyse this CCS command (I think it’s self-explanatory) you will see that one important value is missing. Yes, the font family. You will find her later in your stylesheet. One of the great things of CSS,rules can override one another. If you list the same rule twice, the rule that comes last take precedence.

Going further in your stylesheet, you will see that ALL the elements of your website have their CSS format. It is not the goal of this training to make a CSS pro of you, but only to explain you the CSS coding.