Home  |  FAQs  |  Contact

CSS Crash Course

It is probable that you may want to make minor changes to some items and will need to edit the CSS file. The information below will help to deconstruct some of this code and better explain what it all means. Armed with this knowledge, you can make efficient changes as needed.

We try to organize the CSS file so it is easy to identify and locate elements. Each rule (or definition) is set to tell the browser how to display your content. First listed with be all of the HTML selectors. These are definitions for many common HTML tags. Next, come the rules for any IDs that we use. (An ID is similar to a class, but an ID can only be used once on a page.) After the ID rules we list the classes. [An ID begins with a pound sign (#) while a class begins with a period (.)] Miscellaneous classes are listed last.

By setting rules within an HTML tag, you change the way the tag displays its content. All tags keep their default behavior unless they are changed.

Below is an example of a redefined Heading 1 tag:

h1 {
color: #e2a55c;
font: bold 22px Georgia, “Times New Roman”, serif;
text-align: left;
padding: 10px 0 15px 0;}

Let’s deconstruct this rule line by line:

h1 {
This first line begins with the HTML tag to be defined followed by a space then an opening curly brace.

color: #e2a55c;
This line defines the font color. Color is followed by a colon and the actual color is shown in hex value. The line ends with a semicolon.

font: bold 22px Georgia, “Times New Roman”, serif;
This line defines the font used. The first item sets the font to “bold”, the second value sets the font size to 22 pixels, and the last items sets the font family. Note when more than one font is listed, the browser tries to use the first one listed. If that font is not found, it will then search for the second font listed. If that font is not found, it will then default to whatever serif font is set to the user’s browser default. Fonts that have more than one word for the name must be placed in quotes. The line ends with a semicolon.

text-align: left;
This sets how the text will be aligned, in this case to the left. The line ends with a semicolon.

padding: 10px 0 15px 0;
Since each browser has its own default amount of padding that it places around a heading, this rule sets a specific amount so it can be rendered the same in all browsers. Padding is now set to have 10 pixels of space at the top, no spacing on the right side, 15 pixels of space at the bottom, and no spacing on the left side. (It goes clockwise starting at the top.) The line ends with a semi-colon.

}
The rule ends with a closing curly brace.

By learning how HTML rules are constructed, you can now make changes as appropriate.

Don't be afraid to open the CSS file and look through the rules that are there. You will probably find that it is not as difficult as it appears at first glance to make some minor changes such as fonts, sizes, etc. to your site.