Anyone can do this.

So far in these tutorials I've given examples to copy and paste but haven't specifically explained any of the rules behind CSS. Those rules are important though.

CSS stands for Cascading Style Sheets. A body called the W3C sets the rules:

HTML (the Hypertext Markup Language) and CSS (Cascading Style Sheets) are two of the core technologies for building Web pages. HTML provides the structure of the page, CSS the (visual and aural) layout, for a variety of devices. Along with graphics and scripting, HTML and CSS are the basis of building Web pages and Web Applications.

How CSS works

A stylesheet contains a set of rules that tell a web browser how to render a web page. Mostly render means display visually, but it could also mean how a computer voice should read aloud. The styles are hooked in to HTML elements which give information about the structure of a web page by using tags.

For example, the stylesheet might say that any text which is a paragraph should be a certain colour, a certain size, a certain line-height, a certain font-family (if possible). The style-sheet could suggest how far away from the paragraph above or below it should be, how wide, what background-colour it should have. There are lots of possibilities.

The same goes, of course, for all HTML elements, such as headings, lists, emphasis and many elements these tutorials don't even mention.

CSS makes suggestions, not immutable laws

One big difference from print is that a printed page can be defined exactly whereas a page to be viewed on a screen is affected by numerous variables over which the designer has no control. For example, a web page could be viewed on a small phone, a huge monitor, with tiny text or huge text, on brand new and high-end equipment or junky old poor quality equipment.

Those and other reasons are why styles on web pages are really just suggestions — you can't assume that what you come up with is exactly how readers will see it.

The web browser is an intermediary too and may be better or worse at handling your instructions.

CSS syntax rules

A stylesheet is a series of rules written one after the other. A rule has one or more declarations.

The rule starts by saying which HTML element or elements it should be applied to, and then the group of declarations is put inside curly braces. See below for an example.

Declarations can all be written on one line or each on its own line. Each declaration starts with a selector followed by a : and then a value and finished with a ;. Spaces and line breaks are optional.

Example fragment of a stylesheet: 

body { color:black; }

h1, h2, h3, h4, h5, h6 {
  font-family:"Gill Sans", sans-serif;
  color:white;
  background-color:black;
  font-weight: bold;
  font-size:1.4em;
  margin-bottom: 1em;
}

p {
  color: navy;
  line-height: 1.2em;
  width:95%
  margin:auto;
}

Beware

Beware typos in your CSS as they can mess up what you're trying to do. For example, spell color and center the American way.

Don't forget the colons and semicolons.

Make sure to use curly braces and not the angle brackets that HTML requires or any other style of brackets.

CSS inherits values unless overridden

In the example above the text in the body of a web page (ie, all of it) is supposed to be black, but paragraphs are set to blue. The headings will inherit that black, but because the paragraph rule is more specific, paragraphs will be rendered in navy.

There can also be more than one stylesheet. How they all interact and what takes precedence is governed by several rules of engagement.

CSS can quickly become very complex

Luckily this course isn't designed to teach anyone how to be a web designer. CSS can make people tear their hair out, because it has many more features and rules than have been mentioned here and how all those things interact becomes quite complex and often hard to fathom in practise.

Your Custom CSS should win

One simple thing to keep in mind is that if you add your own custom CSS using the Micro.Blog web interface then that should override anything that is already in place for your blog through the Theme you've chosen.

Let's say, for example, that your Theme makes all level 1 headings blue but you'd like them to be green. You could add a Custom CSS rule that says h1 { color: green; } and that will make the change.