What is CSS?

CSS stands for Cascading Style Sheets
Styles define how to display HTML elements
Styles were added to HTML 4.0 to solve a problem
External Style Sheets can save a lot of work
External Style Sheets are stored in CSS files

Benefits of Cascading Style Sheets

In HTML 4.0, most HTML formatting elements have been deprecated, meaning that, although they are still supported by browsers, the World Wide Web Consortium (W3C) recommends that they no longer be used. Web designers are to use CSS instead.
The major benefits of CSS are:

Cleaner code
- Easier to maintain
- Speedier download
- Better for search engine optimization
Modular code
- Style rules can be applied to multiple pages
- Consistency of design
- Easier to Maintain
Design Power
- Precise control of position, size, margins, etc.

CSS Rules

CSS rules are statements that define the style of an element or group of elements. The syntax is as follows:

Syntax

selector {property:value; property:value; property:value}

Each property:value pair is a declaration. Multiple declarations are separated by semi-colons. The selector defines which elements are affected by the rule. Take a look at the following rule.

p {
 color:darkgreen;
 font-family:Verdana;
 font-size:10pt }

This rule specifies that all paragraph text should be darkgreen and use a 10-point Verdana font.

CSS Comments

Comments in CSS begin with "/*" and end with "*/". See the example below.

p {
 color:red; /* All paragraphs should be red */
}

Selectors

The are several different types of selectors:

Type
Descendant
Child
Class
ID
Attribute
Universal

Selectors identify the element(s) affected by the CSS rule. There are several different types of selectors, including type selectors, descendant selectors, class selectors, and ID selectors

This rule specifies that the text of every element should be darkgreen and use a 10-point Verdana font.

Descendant Selectors

Descendant selectors specify elements by ancestry. Each "generation" is separated by a space. For example, the following rule states that tags within tags should have red text.

p strong {
 color:red;
}

With descendant selectors generations can be skipped. In other words, the code above does not require that the tag is a direct child of the tag.

Child Selectors

Child selectors specify a direct parent-child relationship

p > strong {
 color:red;
}

Class Selectors

Almost all elements can take the class attribute, which assigns a class name to an element. Class names are created in style sheet with rules defined for class selectors. Class selectors begin with a dot and have arbitrary names. For example, the following rule creates a class called "warning," which makes the text of all elements of that class bold and red.

.warning {
 font-weight:bold;
 color:#ff0000;
}

Following are a couple of examples of elements of the warning class.

class="warning">WARNING

Don't go there!

If the class selector is preceded by an element name, then that selector only applies to the specified type of element. To illustrate, the following two rules indicate that h1 elements of the class "warning" will be underlined, while p elements of the class "warning" should not be.

h1.warning {
 color:#ff0000;
 text-decoration:underline
}
p.warning {
 color:#ff0000;
 font-weight:bold;
}

Because both rules indicate that the color should be red (#ff0000), this could be rewritten as follows.

.warning {
 color:#ff0000;
}
h1.warning {
 text-decoration:underline;
}
p.warning {
 font-weight:bold;
}

Note that you can assign an element any number of classes simply by separating the class names with spaces like this:

Syntax

...

ID Selectors

As with the class attribute, almost all elements (see footnote) can take the id attribute, which is used to uniquely identify an element on the page. ID selectors begin with a pound sign (#) and have arbitrary names. The following rule will indent the element with the "maintext" id 20 pixels from the left and right.

#mainText {
 margin-left:20px;
 margin-right:20px;
}
id="mainText">
 This is the main text of the page...

Attribute Selectors

Attribute selectors specify elements that contain a specific attribute. They can also specify the value of that attribute.
The following selector affects all links with a target attribute.

a[target] {
 color:red;
}

The following selector would only affect links whose target attribute is "_blank".

a[target="_blank"] {
 color:red;
}

The Universal Selector

The unversal selector is an asterisk (*). It matches every element.

* {
 color:red;
}

Grouping

Selectors can share the same declarations by separating them with commas. The following rule will underline all i elements, all elements of the class "warning" and the element with the id of "important."

i, .warning, #important {
 text-decoration: underline;
}

Precedence of Selectors

In the event that rules conflict:

The rule with the more specific selector takes precedence.
In the event that two selectors have the same specificity, the rule specified later in the document takes precedence.

Determining a Selector's Specificity

Imagine your selectors are stacked as follows with the ones on top having the highest specificity:

Declarations in the style attribute have no selector and have the highest precedence.
Selectors with id attributes (e.g, h1#foo {}) have the next highest precedence.
Selectors with other attributes (e.g., h1.foo and a[target]) or pseudo-classes (e.g, a:hover) have the next highest precedence.
Selectors with element names (e.g, h1) but no other attributes have the next highest precedence.
The universal selector (*) has the lowest precedence.

To figure out the exact specificity, follow this process:

Start with 0,0,0,0.
If the declaration is found in the style attribute, change the first digit to 1, giving you 1,0,0,0. In this case, you have the highest possible specificity and can stop calculating.
For each time the condition in level 2 is met, add 1 to the second digit.
- For example, for ol#foo li#bar add 2 (1 for each id), giving you 0,2,0,0.
For each time the condition in level 3 is met, add 1 to the third digit.
- For example, for ol#foo li#bar a[target] add 1, giving you 0,2,1,0.
For each time the condition in level 4 is met, add 1 to the fourth digit.
- For example, for ol#foo li#bar a[target] add 3 (1 for each element name), giving you 0,2,1,3.

When comparing two selectors' specificity, start with the left-most numbers. If one has a higher number than the other, than it is more specific. If they are the same, look to the next number and so on.

The Cascade

Web designers can define style rules in three different places:

In an embedded style sheet.
In an external (or linked or imported) style sheet.
Inline in an element.

Embedded Style Sheets

Embedded style sheets appear in the style element in the head of an HTML page. The code below shows a page with an embedded style sheet.

Code Sample: CrashCourse/Demos/EmbeddedStyleSheet.html





Embedded Style Sheet


class="warning">WARNING

class="warning">Don't go there!

Code Explanation

As shown below, the screen output of the file above is different from the print output.
The screen output will look like this:
The print output will look like this:

div andspan

The div and span tags are used in conjunction with Cascading Style Sheets. By themselves, they do very little. In fact, the tag has no visual effect on its contents. The only effect of the
tag is to block off its contents, similar to putting a
tag before and after a section on the page.

Like most tags, the
and tag can take the class, id, and style attributes. It is through these attributes that styles are applied to the elements. The tags are used like any other HTML tags and can be nested within each other any number levels.

Code Sample: CrashCourse/Demos/DivAndSpan.html Div and Sthe upper-left hand corner

Code Explanation

This page will render as follows.

Exercise: Divs and Spans

Duration: 10 to 20 minutes.

In this exercise, you will add class and id attributes to div and span tags to an already existing HTML page. The HTML page already contains an embedded style sheet, which you will not need to modify. Your goal is to make the page render as follows.
There are no step by step instructions. Review the rules in the embedded style sheet and apply classes and ids as appropriate.

Where is the solution?

Units of Measurement

CSS allows you to specify font size, border size, margins, padding, etc. using many different units of measurement. The table below shows the units available.

Unit	Description	Example
px	Pixels	margin-top: 10px;
pt	Points	font-size: 12pt;
in	Inches	padding-top: .5in;
cm	Centimeters	top: 5cm;
mm	Millimeters	left: 45mm;
pc	Picas	bottom: 12pc;
em	Ems	font-size: 1.5em;
ex	Exs	font-size: 1.5ex;
%	Percentage	width: 80%;

Pixels (px)

The measurement unit most often used for designing web pages is pixels. A pixel is not an absolute measurement like, for example, an inch or a point. The actual size of a pixel depends on the resolution and size of a user's monitor. Consider an image that is 900 pixels wide. If the monitor resolution is set to 800 by 600 pixels, then the image will not fit on the screen. However, if the monitor resolution on the same computer is set to 1024 by 768 pixels, the image will fit with room to spare.

Points (pt)

Points should be reserved for print. There are 72 points in an inch.

Inches (in), Centimeters (cm), and Millimeters (mm)

Although these are the most common units of measurement in life, they should be avoided in Web design.

Picas (pc)

Picas should be reserved for print. There are 6 picas in an inch.

Ems (em)

An em (or Mutt) is a relative unit that refers to the size of the letter "M" in a font. Because em is a relative rather than absolute measurement, it is often used in Web design.

Exs (ex)

The "x-height" is the height of font's lowercase "x". Exs are used to set the size of content based on the size of the surrounding font.

The Inherit Value

Many properties take the value inherit. This specifies that the property value should be inherited from the parent element. If such a property is left undefined, the implicit value is inherit.

@import

The @import rule is used to import one style sheet into another. There are two syntaxes for using @import: