Introduction to CSS

Purty it up real nice

• CSS stands for Cascading Style Sheets
• Styles define how to display HTML elements
• Styles can be stored External(best), internal or inline
• External styles are stored in a .css file

p {
color: #ff0000;
}

Anatomy of a Rule

Sing with me, "the selector is connected to the property, the property is connected to the value"

Separate property and value with a colon. Separate multiple declarations with a semi-colon.

Some CSS Examples

K.I.S.S.

All paragraph text will be red

p {
color: #ff0000;
}

The background of all paragraphs will be red

p {
background-color: #ff0000;
}

The entire page will have a background color of gray

body {
background-color: #ccc;
}

The entire page will have a background color of black and a text color of white

body {
background-color: #ff0000;

color: #fff;
}

Some MORE CSS Examples

Fonts, colors, background. . oh my!

The web page text will be arial (or another sans-serif), dark blue and size medium.

body {
font-family: arial, sans-serif;
color: #000066;
font-size: medium;
}

All links will be white, bold and no underline.

a {
color: #fff;
font-weight: bold;
text-decoration: none;
}

All paragraphs will have the pback.gif image as their background

p {
background-image: url(images/pback.gif);
}

Inheritance and Classes

What did the little <em> say to the parent <p>?

Elements will inherit style(s) from their parents. Parents are simply the elements that contain other elements.

Inheritance example. In this example the <em> tag will have the same style that <p> tag has.

<p>This is simpler than it sounds.  Any elements inside this paragraph will have
the <em>same</em> style.</p>

You can override inheritance by adding a rule for the <em> tag

Classes, when you don't want all elements styled the same.

• Class names start with a period (.)
• Apply as the class attribute to elements
• Create rules for class as you would any element
• In addition to classes you have Class IDs (more soon)

CSS Class Examples

CSS is Head of the Class

Any content of the elements that the new class is applied to will be red and large

.new {
color: #ff0000;
font-size: large;
}

Example use of the new class

<p class="new">Last week to register for Sept. SAT Test.</p>

Any content of the elements that the new class is applied to will be red and large

.right_align {
text-align: right;
}

<p class="right_align">Today's Date: July 10, 2006</p>

Class IDs

Step away from the style sheet and show some ID please!

Classes are meant to be used multiple times on a page. If you are creating a class that will only be used once on each page you should make that a class ID, or just ID.

• IDs begin with the # sign in the style sheet
• Applied using the id="id_name" attribute
• Are excellent for uniquely identifying your sections (divs)

Class ID Example

Step away from the style sheet and show some ID please!

The header will have white, extra large verdana text and the image header_back.jpg will be in the background. Both the font, background and border rules use the shorthand version.

#header {
font: x-large verdana, serif;
color: #fff;
background: #000 url(images/header_back.jpg) no-repeat;
height: 120px;
border: 1px solid #ff0000

}

<div id="header">CPD CS-12</div>

The Box Model

Think inside the box!

Each box has a content area(e.g., block style elements) and optional surrounding padding border , and margin areas; the size of each area is specified by properties defined below. The following diagram shows how these areas relate and the terminology used to refer to pieces of margin, border, and padding:

Interactive Box Model(open in new window)

Validating your CSS

You should really have that looked at

The Web developer toolbar allows easy - two click - validation of your css. This is one reason of about a bazillion you should download the web developer toolbar.

Web Developer Toolbar (open in new window)