1. CSS comes after HTML
By David J. Young

2. Agenda Web pages created with CSS CSS 101 Tools Demo CSS Concepts
CSS Shortcuts
CSS based page design
Tools
Demo

3. CSS Example 1

4. CSS Example 2

5. CSS Example 3

6. CSS Example 4

7. CSS Example 6

8. CSS Example 7

9. CSS Example 7

10. CSS Example 8

11. CSS Example 9

12. CSS Samples Q: What is different about all of the samples?
A: Each presentation (look & feel) is completely different
Q: What is the same in all the samples?
A: The content.
That is, the (X)HTML is identical.

13. Example 10

14. HTML for all Examples

15. What is CSS? CSS stands for Cascading Style Sheets
Styles define how to display HTML elements
Styles are normally stored in Style Sheets
Styles were added to HTML 4.0 to solve a problem
External Style Sheets can save you a lot of work
External Style Sheets are stored in CSS files
Multiple style definitions will cascade into one
HTML tags were originally designed to define the content of a document. They were supposed to say "This is a header", "This is a paragraph", "This is a table", by using tags like <h1>, <p>, <table>, and so on. The layout of the document was supposed to be taken care of by the browser, without using any formatting tags.
As the two major browsers - Netscape and Internet Explorer - continued to add new HTML tags and attributes (like the <font> tag and the color attribute) to the original HTML specification, it became more and more difficult to create Web sites where the content of HTML documents was clearly separated from the document's presentation layout.
To solve this problem, the World Wide Web Consortium (W3C) - the non profit, standard setting consortium, responsible for standardizing HTML - created STYLES in addition to HTML 4.0.
Styles sheets define HOW HTML elements are to be displayed, just like the font tag and the color attribute in HTML 3.2. Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in your Web, just by editing one single CSS document!
CSS is a breakthrough in Web design because it allows developers to control the style and layout of multiple Web pages all at once. As a Web developer you can define a style for each HTML element and apply it to as many Web pages as you want. To make a global change, simply change the style, and all elements in the Web are updated automatically.

16. Why CSS? Separates content from presentation
Semantic HTML for authoring web pages
Non-Semantic HTML
Semantic HTML
<div class="title">
This is my headline
</div>
<br />
<div class="sub-header">
this is a sub header
<div class="content">
this is a paragraph of content, it contains some <b>bold</b> text and some <span class="blue">colored</span> text.
this is a second paragraph
<h1>This is my headline</h1>
<h2>this is a sub header</h2>
<p>
this is a paragraph of content, it contains some <strong>bold </strong> text and some <span class="highlight"> colored</span> text.
</p>
<p> this is a second paragraph </p>

17. CSS Concepts
Before you can understand CSS, you need to first understand a few key concepts:
Variations
Media Types
Importance
Inheritance
Origin
Rules
Ruleset
Properties
Selectors
Specificity

18. Variations CSS 1 CSS 2 CSS 2.1 CSS 3
The first CSS specification to become an official W3C Recommendation is CSS level 1, published in December Among its capabilities are support for:
Font properties such as typeface and emphasis
Color of text, backgrounds, and other elements
Text attributes such as spacing between words, letters, and lines of text
Alignment of text, images, tables and other elements
Margin, border, padding, and positioning for most elements
Unique identification and generic classification of groups of attributes
CSS 2
CSS level 2 was developed by the W3C and published as a Recommendation in May A superset of CSS1, CSS2 includes a number of new capabilities like absolute, relative, and fixed positioning of elements, the concept of media types, support for aural style sheets and bidirectional text, and new font properties such as shadows.
CSS 2.1
CSS level 2 revision 1 or CSS 2.1 fixes errors in CSS2, removes poorly-supported features and adds already-implemented browser extensions to the specification. While it was a Candidate Recommendation for several months, on June 15, 2005 it was reverted to a working draft for further review. It was returned to Candidate Recommendation status on 19 July 2007.
CSS 3
CSS level 3 is currently under development. The W3C maintains a CSS3 progress report. CSS3 is modularized and will consist of several separate Recommendations. The W3C CSS3 Roadmap provides a summary and introduction.

19. Browser Support for CSS

20. Media Types All Used for all media type devices
Aural Used for speech and sound synthesizers
Braille Used for braille tactile feedback devices
Embossed Used for paged braille Printers
Handheld Used for small or handheld devices
Print Used for printers
Projection Used for projected presentations, like slides
Screen Used for computer screens
TTY Used for media using a fixed-pitch character grid, like teletypes and terminals
TV Used for television-type devices

21. Importance There a two levels of importance
Normal
Important (made using !important declaration)
Both Authors and Readers can make !important declarations
In CSS1, author !important declarations overruled reader declarations
In CSS2, reader !important declarations overrule author declarations
All rules default to a normal importance
Both authors and readers have the ability to specify style sheets. When rules between the two conflict, the author's rules will win out over reader's rules of otherwise equal weight. Both author's and reader's style sheets override the browser's built-in style sheets.
A user may override the author’s rules by using the !important declaration. For example, a user may require large font sizes or special colors due to vision problems, and such a user would likely declare certain style rules to be !important, since some styles are vital for the user to be able to read a page.

22. Inheritance
Virtually all selectors which are nested within other selectors will inherit the property values assigned to the outer selector unless otherwise modified. For example, a color defined for the BODY will also be applied to text in a paragraph.
There are some cases where the inner selector does not inherit the surrounding selector's values, but these should stand out logically. For example, the margin-top property is not inherited; intuitively, a paragraph would not have the same top margin as the document body.

23. Importance
Generally speaking styles will "cascade" into a new "virtual" style sheet by using the following order, where the last item carries the highest importance:

24. Origin Origin is where styles originate User Agent Style Sheets
Browser Defaults
C:\Program Files\Mozilla Firefox\res\html.css
User Style Sheets
Ignore cheap-effect tags
blink { text-decoration: none !important }
marquee { -moz-binding: none !important }
Visually impaired
html { font-size: 24pt !important }
Author Style Sheets
External style sheet
Internal style sheet (inside the <head> tag)
Inline style (inside an HTML element)

25. Rules
A style sheet consists of a list of rules. Each rule or rule-set consists of one or more selectors and a declaration block. A declaration-block consists of a list of semicolon-separated declarations in braces. Each declaration itself consists of a property, a colon (:), a value, then a semi-colon (;).

26. Properties Text and Fonts font line-height letter-spacing word-spacing
font-family
font-size
font-weight
font-style
font-variant
line-height
letter-spacing
word-spacing
text-align
text-decoration
text-indent
text-transform
vertical-align
white-space
Colours and Backgrounds
color
background-color
background
background-image
background-repeat
background-position
background-attachment
Tables
table-layout
border-collapse
border-spacing
empty-cells
caption-side
Generated Content
content
counter-increment
counter-reset
quotes
Paged Media
page-break-before
page-break-after
page-break-inside
orphans
Widows
Misc.
cursor
direction
unicode-bidi
Positioning and Display
position
top
right
bottom
left
clip
overflow
z-index
float
clear
display
Visibility
Lists
list-style
list-style-type
list-style-image
list-style-position
The Box Model – dimensions
width
height
min-width
max-width
min-height
max-height
The Box Model - padding, margin, outline and borders
padding,
padding-top, padding-right,
padding-bottom, padding-left
border,
border-top, border-right,
border-bottom, border-left
border-style,
border-top-style, border-right-style, border-bottom-style, border-left-style
border-color,
border-top-color, border-right-color, border-bottom-color, border-left-color
border-width,
border-top-width, border-right-width, border-bottom-width, border-left-width
outline
outline-style
outline-color
outline-width
margin,
margin-top, margin-right,
margin-bottom, margin-left

27. Selectors
Selectors are used to declare which elements a style applies to, a kind of match expression. Selectors may apply to all elements of a specific type, or only those elements which match a certain attribute; elements may be matched depending on how they are placed relative to each other in the markup code, or on how they are nested within the document object model (DOM).

28. Selectors Element Selectors element { } Class Selectors .classname { }
ID Selectors #idname { }
Descendant Selectors ul li { }
Child Selectors ul > li { }
Adjacent Sibling h1 + p { }
Attribute Selectors img[src|="vacation"] { }
Daisy Chaining #id element.class { }
Group Selectors h1,h2,h3 { }
Universal Selectors * { }
Psuedo-Classes a:hover { }
Psuedo-Elements p:first-letter { }

29. HTML relates to CSS Element Selectors Class Selectors ID Selectors
<p> styled by
p {color: red; }
Class Selectors
<p class=“code"> styled by
p.code {color: cyan; font-family: courier }
or .code {color: #F0F; font-family: courier }
ID Selectors
<p id="sig"> styled by
p#sig {color: cyan; }
or #sig {color: #F0F; }

30. ID vs Class A unique ID can only be used only “once” on a HTML page
IDs are usually associated with “layout” regions or areas
A class can be used any number of times

31. Selector Specificity
A selector's specificity is calculated as follows:
count 1 if the declaration is from a 'style' attribute rather than a rule with a selector, 0 otherwise (= a)
(In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)
count the number of ID attributes in the selector (= b)
count the number of other attributes and pseudo-classes in the selector (= c)
count the number of element names and pseudo-elements in the selector (= d)
The specificity is based only on the form of the selector. In particular, a selector of the form "[id=p33]" is counted as an attribute selector (a=0, b=0, c=1, d=0), even if the id attribute is defined as an "ID" in the source document's DTD.
Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the specificity.
Some examples:
* {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

32. Practical Specificity
HTML Elements <p>, <div>, <h1>
CSS Classes .center, .hilight
CSS ID #content, #navbar
Inline Styles style="text-align: center"

33. Cascade Order
Find all declarations that apply to the element and property for the target media type.
Sort according to importance (normal or important) and origin (author, user, or user agent). In ascending order of precedence:
user agent declarations
user normal declarations
author normal declarations
author important declarations
user important declarations
Sort rules with the same importance and origin by specificity of selector: more specific selectors will override more general ones. Pseudo-elements and pseudo-classes are counted as normal elements and classes, respectively.
Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself.

34. Cascade Conflicts
Find all declarations that match a particular element
Sort declarations by weight and origin
Sort selectors by specificity
Sort by order specified

35. What color is P element text?
Example
<HEAD>
<STYLE type="text/css">
p.std { color: magenta; }
#x97z { color: red; }
p { color: green; }
body { color: yellow; background-color: #000;}
</STYLE>
</HEAD>
<BODY>
<P ID="x97z" class="std" style="color: cyan">Text</P>
<P>Other Paragraph</P>
</BODY>
body { color: yellow; } /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
p { color: green; /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
p.std { color: magenta; /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
#x97z { color: red; /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style="color: cyan" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */
In the above example, Text is cyan, and Other Paragraph is green.

36. Inserting Style Sheets
External Style Sheet
Link
<link rel="stylesheet" type="text/css" href="navbar.css" />
Import
<style type="text/css" url("/css/my.css"); </style>
<style url("import.css") tv,print; </style>
Internal Style Sheet
<style type="text/css">
body {margin:0;width:100%;height:100%}
body,td,input,textarea,select{font-family:arial,sans-serif}
input,textarea,select{font-size:100%}
#loading{position:absolute;width:100%;height:100%; background-color:#fff}
.cmsg{margin:1em}
.msg{font-weight:bold}
</style
Inline Styles
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

37. HTML Webpage External Style Sheets Internal Style Sheet Inline Style
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
<html xmlns="
<head>
<title> CSS comes after HTML </title>
<meta name="description" content=“CSS For programmers." />
<meta name="keywords" content=“CSS, HTML, Tutorial" />
<style type="text/css" media="screen">
@import url("
@import url("
</style>
<link rel="stylesheet" type="text/css" href=" media="print" />
<style type="text/css“>
body {margin: 0; padding: 0; background-color: }
/head>
<body id="EyeBrow">
<div id="content" style="text-align:left;"> …
</div>
</body>
External Style Sheets
Internal Style Sheet
Inline Style

38. External CSS Files menu HTML1 layout navbar HTML2 <link> @import

39. CSS Sample /* basic elements */ html { margin: 0; padding: 0; } body {
font: 75% georgia, sans-serif;
line-height: ;
color: #555753;
background: #fff url(blossoms.jpg) no-repeat bottom right;
h3 {
font: italic normal 1.4em georgia, sans-serif;
letter-spacing: 1px;
margin-bottom: 0;
color: #7D775C;
a:link {
font-weight: bold;
text-decoration: none;
color: #B7A5DF;
/* specific divs */
#container {
background: url(zen-bg.jpg) no-repeat top left;
padding: 0 175px 0 110px;
margin: 0;
position: relative; }
#intro {
min-width: 470px;
/* using an image to replace text in an h1. This trick courtesy Douglas Bowman, */
#pageHeader h1 {
background: transparent url(h1.gif) no-repeat top left;
margin-top: 10px;
width: 219px;
height: 87px;
float: left;
#pageHeader h1 span {
display:none
.accesskey {
text-decoration: underline;

40. Shorthands or #full { border-width: 1px; border-style: dotted;
border-color: #ff0000; } or
#shorthand {border: 1px dotted #f00;}

41. CSS Shorthand Border » *-width *-style *-color
Margin » *-top *-right *-bottom *-left
Padding » *-top *-right *-bottom *-left
Font » *-style *-variant *-weight *-size *-height *-family
List-Style » *-type *-position *-image
Background » *-color *-image *-repeat *-attachment *-position

42. Shorthand Declarations
margin-top: 25px;
margin-right: 0;
margin-bottom: 5px;
margin-left: 0;
margin: 25px 0 5px 0;
margin: 10px;
margin: 10px 10px 10px 10px;
margin: 10px auto;
margin: 10px auto 10px auto;
margin: 10px auto 15px;
margin: 10px auto 15px auto;
25px
5px

43. Colors color_name A color name (e.g. red)
rgb(x,x,x) An RGB value (e.g. rgb(255,0,0))
rgb(x%, x%, x%) An RGB percentage value (e.g. rgb(100%,0%,0%))
#rrggbb A HEX number (e.g. #ff0000)
The W3C HTML and CSS standards have listed only 16 valid color names:
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow
However, see for a list of 140 color names supported by all major browsers.

44. Length Units Absolute Relative in inch cm centimeter mm millimeter
pt point (1 pt is the same as 1/72 inch)
pc pica (1 pc is the same as 12 points)
Relative
em 1em is equal to the current “M” size. 2em means 2 times the size of the current “M” . E.g., if an element is displayed with a “M” of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the “M” that the reader uses
ex one ex is the x-height of a “x” (x-height is usually about half the “M”-size)
px pixels (a dot on the computer screen)
% percentage

45. HTML Tags Deprecated <basefont> <center> <font>
<strike>
<s>
<u>
Discouraged
<b>
<i>
<big>
<small>
<tt>

46. Comments CSS uses “C” Style comment Syntax
/* Comment here */ p { margin: 1em; /* Comment here */ padding: 2em; /* color: white; */ background-color: blue; } /* multi-line comment here */
Comments cannot be nested

47. Centering <center> is deprecated Suggested to use CSS instead
{text-align: center; } only centers text
Centering HTML elements with CSS is easy, but not initially obvious
Set margin-left and margin-right to “auto”
Define an element width
div {margin: 0 auto 0 auto; width:800px; }

48. Display of HTML elements
Block
Takes up the full width available, with a new line before and after (display:block;)
Inline
Takes up only as much width as it needs, and does not force new lines (display:inline;)
Not displayed
Some tags, like <meta /> and <style> are not visible (display:none;)

49. display vs visibility selector {display: none;} &
selector {visibility: hidden;}
accomplish the same thing: The element is removed from view.
But fundamentally they work completely different. Display:none removes the element from the normal document flow. The effect is surrounding elements will be adjusted as they reflow in the document.
visibility:hidden hides the element, but it remains in the document flow. This may leave what appears to be an unexplainable “blank hole” your document.

50. Block vs Inline <div> <h1> <p> <table>
<acronym>CSS</acronym> stands for Cascading Style Sheet. A CSS style sheet <strong>can</strong> be used to create powerful web pages. Click <a href= here </a> for a sample of a CSS based web page.

51. HTML Elements Block Inline <div> <span>
Your general-purpose box
<h1> ... <h6>
All headings
<p>
Paragraph
<ul>, <ol>, <dl>
Lists (unordered, ordered and definition)
<li>, <dt>, <dd>
List items, definition list terms, and definition list definitions
<table>
Tables
<blockquote>
Like an indented paragraph, meant for quoting passages of text
<pre>
Indicates a block of preformatted code
<form>
An input form
Inline
<span>
Your all-purpose inline element
<a>
Anchor, used for links (and also to mark specific targets on a page for direct linking)
<strong>
Used to make your content strong, displayed as bold in most browsers, replaces the narrower <b> (bold) tag
<em>
Adds emphasis, but less strong than <strong>. Usually displayed as italic text, and replaces the old <i> (italic) tag
<img />
Image
<br>
The line-break is an odd case, as it's an inline element that forces a new line. However, as the text carries on on the next line, it's not a block-level element.
<input>
Form input fields like and
<abbr>
Indicates an abbr. (hover to see how it works)
<acronym>
Working much like the abbreviation, but used for things like this TLA.

52. CSS based layout
#layout
#header
#nav
#content
#sidebar
#footer

53. Positioning Schemes Normal Flow Float Absolute position: static;
Normal flow is the default scheme used for positioning. In this scheme, block boxes flow vertically starting at the top of their containing block with each placed directly below the preceding one.
position: static;
position: relative;
Float
When specified, the box is positioned vertically as it would be within the normal flow, its top aligned with the top of the current line box. But horizontally, it is shifted as far to the right or left of its containing block as possible, within that block's padding (just like other content). Surrounding inline content is then allowed to flow around the opposite side.
Absolute
In absolute positioning, block boxes are removed from the normal flow and have no effect on boxes in that flow. Like floated elements, absolutely positioned elements are always treated as block-level elements. As such, they establish a new containing block for any descendants, i.e., any elements contained within the absolutely positioned element.
position: absolute;
position: fixed;

54. Static Positioning {position: static;}
position:static is the default scheme used in normal flow positioning. In this scheme, block boxes flow vertically starting at the top of their containing block with each placed directly below the preceding one. Inline boxes flow horizontally from left to right.
Take note that vertical margins are collapsed in the normal flow. That is, instead of adding the bottom margin of a box to the top margin of the one immediately below it, only the larger of the two values is used:

55. Relative Positioning {position: relative;}
When an element specifies {position:relative;} it is initially positioned following the normal flow rules. Surrounding boxes are positioned accordingly. Then, the box is moved according to its offset properties.

56. Float Positioning {float: left;}
Floating is achieved by setting the float property on an element's style to either left or right. Special rules apply to floated elements.
When specified, the box is positioned vertically as it would be within the normal flow, its top aligned with the top of the current line box. But horizontally, it is shifted as far to the right or left of its containing block as possible, within that block's padding (just like other content). Surrounding inline content is then allowed to flow around the opposite side.

57. Absolute Positioning {position: absolute;}
When an element specifies {position:absolute;} The position of an absolutely positioned element is determined by its offset values: top, right, bottom and left. These values work in much the same way as with relatively positioned elements.
But unlike relative positioning, where the offsets are measured from the element's position in the normal flow, an absolutely positioned element is offset from its container block.

58. Fixed Positioning {position: fixed;}
Fixed positioning is a special case of absolute positioning. For fixed elements, the containing block is always taken to be the viewport of the browser window. A fixed element does not move when a web page is scrolled as all other elements do.

59. Clear
{clear: left;}
The CSS clear property is used to control flow when using the float property. Using CSS clear, you can specify whether to keep one or both sides of an element "clear" (i.e. no elements can appear on the side that is clear).

60. Box Model

61. Box Model Hack p { background: #ff9999; border: 5px solid #ff0000;
padding: 25px;
width: 160px; /* IE */
voice-family: "\"}\" ";
voice-family: inherit;
width: 100px; /* FF */ }
html>body p {
width: 100px;
160px
100px
border
content
padding
5px
25px

62. Quirks Mode
To maintain compatibility with the greatest possible number of web pages, modern web browsers are generally developed with multiple rendering modes
standards mode: pages are rendered according to the HTML and CSS specifications
quirks mode: attempts are made to emulate the behavior of an older browser to support the large body of legacy documents

63. DOCTYPE (Almost) Standards Mode
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
Quirks Mode
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Almost Standards Mode maintains the "traditional" vertical sizing of table cells according to the CSS2 specification. "Almost standards" mode rendering matches "standards" mode in all details except for one. The layout of images inside table cells is handled the same way "quirks" mode operates. This means that sliced-images-in-tables layouts are less likely to fall apart in browsers when in either "quirks" or "almost standards" mode, rather than "standards“ mode

64. DHTML Some Dynamic HTML effects can be accomplished with CSS Rollovers
Button pushes

65. Common Mistakes
Using an HTML tag because of the way it looks, not for its meaning
Inserting presentation into your HTML
Adding an ID or Class to all HTML elements so that it is a selector for CSS
Using “=“ instead of “:” in declaration
Not preserving case: ID & Class names are case-sensitive

66. Best Practices Make sure you’re using a good DOCTYPE
Order styles in file
HTML selectors at top
ID selectors together (especially those used for layout)
Place class and pseudo-class selectors last
Add notes
Use em or %, not px
Add {border: 1px solid red;} to elements in your CSS to help debug layout, positioning or spacing
Always terminate your declarations with a semicolon (;)
Do not use the HTML tables for layout

67. Tools
Firefox with Firebug
1st Page 2000 in Realtime Preview mode

68. Demo

69. Firebug Demo P element Box Model Styles Look at CSS Viewing colors
Viewing images
Editing TechRepublic “print media”

70. References http://www.htmldog.com http://www.csszengarden.com

71. Questions?