CSS Notes

Introduction

Not all examples given are practical. They are there to make a point.

It also should be noted that a tag is not an element. An element normally includes a start tag, content and an end tag. Except those elements that are defined as normally open.

Getting Started

selector { declaration }

selector { property: value }

Selectors and declarations can be grouped:

selector { property: value; property: value }

Notice the coma ( , ) separating the selectors and the semicolon ( ; ) separating the declarations.

body, h1, h2, h3, h4, h5, h6, p, b, i, ol, ul, li, table, td, big, cite, del, dfn, em, img, ins, kbd, pre, small, samp, s, sub, sup, tt, u, var, anchor pseudo-classes (link, visited link and active link).

The basic properties and values are similar to what we're already used to, except that they're formatted differently. Allot of them reference color, size, style, family, alignment, margin, weight etc. There are however, many more we can use with CSS. Also, we can make changes to some elements that we never could without CSS.

body {
background-image: url(urloftheimage.jpg);
background-color: #ffffff;
color: #000000;
}

body {
background: url(urloftheimage.jpg) #ffffff;
color: #000000;
}

body { background: url(urloftheimage.jpg) #ffffff; color: #000000; }

However, it's always best to write code in a way that's easy to read, understand and edit.

h1 {
color: #dc143c;
font-size: 27pt;
font-weight: normal;
text-align: center;
}

This process can be continued for every element on the page by addressing each element with it's own properties and values.

Now all text within <p> and </p> will be dark blue, 23pt (size 5) in size and center aligned.

This is a comment example:

We connect these rules to the body of the page by simply using the elements used as selectors.

This is an example (without a background image), where

Which would look like this:

Contextual Selectors

selector selector { property: value }

For example, if you want all emphasized text within bold text to be blue, you could do this:

Then in the body of the page you could put:

Which would render:

Contextual selectors can be grouped.

Notice the coma ( , ) between the selector groups.

b em, h4 em { color: #0000ff; }

<h4><em>Contextual</em> Selector Example</h4>
<b>I can't <em>emphasize</em> enough the <em>significance</em> of Cascading Style Sheets.</b>

Contextual Selector Example

Class And ID

We can name a class or id anything we want to, as long as it begins with a letter (a - z). After that the name can also have numbers (0 - 9) and hyphens ( - ). They can also include some characters from ISO 10646 and some escaped characters. I keep it simple by starting a class or id with a letter and then use letters and numbers after that. Although classes are not case sensitive, it is a good idea to use lower case, as the future of markup language will require that.

p.txt1

Then in the body any p element that has txt1 will be affected.

p.txt1 {
background: #f0f8ff;
color: #00008b;
font-size: 19pt;
font-style: italic;
}

<p class="txt1"> This is an example of using class to change text. </p>

This is an example of using class to change text.

.txt1

Then we can use that class on any element including span or div. This time I'll use span:

This is an example of using class to change text.

With span we can affect a single word or letter with css:

This is an example of using class to change text.

i {
background: #f0f8ff;
color: #00008b;
font-size: 19pt;
font-style: italic;
}

This is an example of using class to change text.

#txt2

An id is pointed toward a specific, one time use. Unlike a class where we can use the same class more than once, an id is for one particular instance. For example:

Can be applied to one element only.

Now that it's been applied, we can't go ahead and use it on another element.

Anchor Pseudo-Classes

Here are the selectors for link, vlink and alink:

Notice the colon ( : ) between the a and link, the a and visited, and the a and active.

Here are examples from this page:

As you can see I've kept them very basic, I only changed the color. I could have had all different sizes, alignment, family, style, decoration, and any other properties and values I wanted. An important point to make here is text-decoration: none. PC viewers find it anoyying that links are usually underlined. By using text-decoration: none, the underline will be removed from the links. Most PC viewers will appreciate that consideration.

Putting It All Together

Which would look like this:

This is a very basic example. Even with the limited compatibility, there's much more we can do with CSS to make our pages more efficient, simpler and W3C compliant.