Learning CSS - Step 1- The Basics

[mike mckenzie]

I will not take credit for the actual documentation. The original documentation comes from my very talented co-worker Jason Larose

I figured alot of people could benefit from some of this information. So ill post a section once a week or so for the benefit of the group.

Learning CSS Part 1: Basics

HTML/XHTML

In order to get a full understanding of how CSS styles HTML, we’ll need to get a basic understanding of HTML and XHTML (Extensible Hypertext Markup Language). The biggest difference between HTML and XHTML is that XHTML is more strict and less forgiving than HTML. For example, in HTML it is okay to write, while in XHTML, it will return an error. Therefore, it is always in best practice to create your HTML in all lowercase tags. Also in XHTML, all tags must be closed.

For example:<p> </p>, <br/>,<hr/>, <img src="#"/>.

It is always in best practice to write in XHTML. There are 2 different types of tags: inline and block-level. Inline tags allow multiple instances of that tag to be placed on the same line (a, em, span, strong, img). Block-level elements allow only one instance per line, placing the next tag below the one before it (table, p, h1, div, ul, li, ol).

A doctype is also important as it can effect the rendering of the CSS.

---

CSS Syntax/Overview

CSS (Cascading Style Sheets) styles the HTML. The syntax for CSS is as follows: selector { property: value; }

The selector is the HTML tag, id (#), or class (.) being styled. The styles are stated within curly braces. The property is what is being styled (margin, padding, font-size, etc) and the value] is the value of the property (10px, 100%, #000000). It is always best to end a "property: value;" declaration with a semicolon. This can make or break your styles.

An id (#) refers to the identity of the element being styled. I can only be used once per page, therefore, it is best to use it to describe an area of the page ( #wrapper, #header, #footer, #bodyContent ). A class (.) refers to any HTML tag that is receiving special treatment. For example: p.quote, a.externalLink, li.highlighted. While HTML tags can receive more than one class separated by a space, it can only receive one id. <p class="class1 class2 class3" id="id1"> </p>

Inline, Embedded and External Styles

CSS cascades, meaning that an elements' style inherits any style previously called for that element. For example, if there is a style of p { color: #FF0000; } at the top of a CSS file, any call for a styled p after that will inherit the #FF0000 color.

• An external style sheet is located in an external file, "filename.css."
• An embedded style is located in the head of the HTML file, between tags, overwriting any specific style declared in the external style sheet.
• An inline style is located on the tag itself, declared as style="margin: 0; color: #000000;"

"Classitis" / "Divitis"

Classitis is a term for the overuse of unnecessary classes on an element. Such as in the example below, where the h1 is the only tag within the div.
<div> <h1 class="headerText">Heading</h1> </div>

It is best to directly target the h1.

Divitis is a term for the overuse of unnecessary divs in the markup. For example: <div> <div align="center"><h1>Heading</h1></div> </div>

The<div align="center">adds unnecessary markup to the HTML, when it can just be applied to the h1 CSS style. Font Control Below are style properties used in styling text:

 

• font-weight: declares bold or normal
• font-style:declares italic or normal
• font-size: declares the font size (10px)
• font-family: declares the font used. This uses a comma-separated list so that if one font is unavailable, then the next font is read, until it has the declaration of a sans-serif (Verdana, Arial, Helvetica, sans-serif;). If your font name has two words separated by a space, you need to enclose them in quotes ("Lucida Grande", "Arial Black", "Century Gothic";).
• line-height: declares the line height of the font. It is best to set this to 50% more than the font size as this provides the user with visual "comfort" while reading. ie: 12px/18px, 10px/15px, 18px/27px.
• text-decoration: declares whether text has an underline, overline, line-through, blink, and none.
• text-align: declares whether text is aligned left, right, center, or justified
• letter-spacing: declares the width of the space between letters
• word-spacing: declares the width of the space between words

Most of these can be declared in one line:

font: normal 12px/18px Verdana, Arial, Helvetica, "Century Gothic", sans-serif;

The order being: (font-weight or font-style) font-size/line-height font-family.