CSS comes after CSS comes after HTMLHTML

By David J. YoungBy David J. Young

AgendaAgenda

Web pages created with CSSWeb pages created with CSS CSS 101CSS 101

CSS ConceptsCSS Concepts CSS ShortcutsCSS Shortcuts CSS based page designCSS based page design

ToolsTools DemoDemo

CSS Example 1CSS Example 1

CSS Example 2CSS Example 2

CSS Example 3CSS Example 3

CSS Example 4CSS Example 4

CSS Example 6CSS Example 6

CSS Example 7CSS Example 7

CSS Example 7CSS Example 7

CSS Example 8CSS Example 8

CSS Example 9CSS Example 9

CSS SamplesCSS Samples

Q:Q: What is different about all of the What is different about all of the samples?samples?

A:A: Each presentation (look & feel) is Each presentation (look & feel) is completely differentcompletely different

Q:Q: What is the same in all the samples? What is the same in all the samples? A:A: The content. The content.

That is, the (X)HTML is identical.That is, the (X)HTML is identical.

Example 10Example 10

HTML for all ExamplesHTML for all Examples

What is CSS?What is CSS?

CSSCSS stands for stands for CCascading ascading SStyle tyle SSheets heets Styles define Styles define how to displayhow to display HTML elements HTML elements Styles are normally stored in Styles are normally stored in Style SheetsStyle Sheets Styles were added to HTML 4.0 Styles were added to HTML 4.0 to solve a to solve a

problemproblem External Style SheetsExternal Style Sheets can save you a lot of can save you a lot of

work work External Style Sheets are stored in External Style Sheets are stored in CSS filesCSS files Multiple style definitions will Multiple style definitions will cascadecascade into one into one

Why CSS?Why CSS?

<div class="title"><div class="title"> This is my headlineThis is my headline

</div></div><br /><br /><br /><br /><div class="sub-header"><div class="sub-header">

this is a sub headerthis is a sub header</div></div><br /><br /><div class="content"><div class="content">

this is a paragraph of content, it this is a paragraph of content, it contains some <b>bold</b> text and contains some <b>bold</b> text and some <span some <span class="blue">colored</span> text.class="blue">colored</span> text.

this is a second paragraphthis is a second paragraph</div></div>

<h1>This is my headline</h1><h1>This is my headline</h1><h2>this is a sub header</h2><h2>this is a sub header</h2><p><p>

this is a paragraph of content, this is a paragraph of content, it contains some <strong>bold it contains some <strong>bold </strong> text and some <span </strong> text and some <span class="highlight"> class="highlight"> colored</span> text.colored</span> text.

</p></p><p> <p> this is a second paragraph this is a second paragraph </p></p>

• Separates content from presentationSeparates content from presentation• Semantic HTML for authoring web pagesSemantic HTML for authoring web pages

Semantic HTMLNon-Semantic HTML

CSS ConceptsCSS Concepts

Before you can understand CSS, you need to Before you can understand CSS, you need to first understand a few key concepts:first understand a few key concepts: VariationsVariations Media TypesMedia Types ImportanceImportance InheritanceInheritance OriginOrigin RulesRules RulesetRuleset PropertiesProperties SelectorsSelectors SpecificitySpecificity

VariationsVariations CSS 1CSS 1

The first CSS specification to become an official W3C Recommendation is CSS level 1, The first CSS specification to become an official W3C Recommendation is CSS level 1, published in December 1996. Among its capabilities are support for:published in December 1996. Among its capabilities are support for:FontFont properties such as typeface and emphasis properties such as typeface and emphasis Color of text, backgrounds, and other elements Color of text, backgrounds, and other elements Text attributes such as spacing between words, letters, and lines of text Text attributes such as spacing between words, letters, and lines of text AlignmentAlignment of text, images, of text, images, tablestables and other elements and other elements Margin, border, padding, and positioning for most elements Margin, border, padding, and positioning for most elements Unique identification and generic classification of groups of attributes Unique identification and generic classification of groups of attributes

CSS 2CSS 2CSS level 2 was developed by the W3C and published as a Recommendation in May 1998. A CSS level 2 was developed by the W3C and published as a Recommendation in May 1998. A superset of CSS1, CSS2 includes a number of new capabilities like absolute, relative, and fixed superset of CSS1, CSS2 includes a number of new capabilities like absolute, relative, and fixed positioningpositioning of elements, the concept of media types, support for aural style sheets and of elements, the concept of media types, support for aural style sheets and bidirectional text, and new font properties such as shadows.bidirectional text, and new font properties such as shadows.

CSS 2.1CSS 2.1CSS level 2 revision 1 or CSS 2.1 fixes errors in CSS2, removes poorly-supported features and 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 adds already-implemented browser extensions to the specification. While it was a Candidate RecommendationCandidate Recommendation for several months, on June 15, 2005 it was reverted to a working 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.draft for further review. It was returned to Candidate Recommendation status on 19 July 2007.

CSS 3CSS 3CSS level 3 is currently under CSS level 3 is currently under developmentdevelopment. The W3C maintains a . The W3C maintains a CSS3 progress reportCSS3 progress report. CSS3 . CSS3 is modularized and will consist of several separate Recommendations. The W3C CSS3 is modularized and will consist of several separate Recommendations. The W3C CSS3 Roadmap provides a summary and introduction.Roadmap provides a summary and introduction.

Browser Support for CSSBrowser Support for CSS

•http://www.quirksmode.org

Media TypesMedia Types

AllAll Used for all media type devicesUsed for all media type devicesAuralAural Used for speech and sound synthesizersUsed for speech and sound synthesizersBrailleBraille Used for braille tactile feedback devicesUsed for braille tactile feedback devicesEmbossedEmbossed Used for paged braille PrintersUsed for paged braille PrintersHandheldHandheld Used for small or handheld devicesUsed for small or handheld devicesPrintPrint Used for printersUsed for printersProjectionProjection Used for projected presentations, like slidesUsed for projected presentations, like slidesScreenScreen Used for computer screensUsed for computer screensTTYTTY Used for media using a fixed-pitch characterUsed for media using a fixed-pitch character

grid, like teletypes and terminalsgrid, like teletypes and terminalsTVTV Used for television-type devicesUsed for television-type devices

ImportanceImportance

There a two levels of importanceThere a two levels of importance NormalNormal Important Important (made using (made using !important!important declaration) declaration)

Both Authors and Readers can make !Both Authors and Readers can make !important declarationsimportant declarations

In CSS1, author !important declarations In CSS1, author !important declarations overruled reader declarationsoverruled reader declarations

In CSS2, reader !important declarations In CSS2, reader !important declarations overrule author declarationsoverrule author declarations

InheritanceInheritance Virtually all selectors which are nested within other Virtually all selectors which are nested within other

selectors will inherit the property values assigned to selectors will inherit the property values assigned to the outer selector unless otherwise modified. For the outer selector unless otherwise modified. For example, a example, a colorcolor defined for the defined for the BODYBODY will also be will also be applied to text in a paragraph.applied to text in a paragraph.

There are some cases where the inner selector does There are some cases where the inner selector does not inherit the surrounding selector's values, but these not inherit the surrounding selector's values, but these should stand out logically. For example, the should stand out logically. For example, the margin-topmargin-top property is not inherited; intuitively, a paragraph would property is not inherited; intuitively, a paragraph would not have the same top margin as the document body.not have the same top margin as the document body.

OriginOrigin

Origin is where styles originate Origin is where styles originate

User Agent Style SheetsUser Agent Style SheetsBrowser DefaultsBrowser DefaultsC:\Program Files\Mozilla Firefox\res\html.cssC:\Program Files\Mozilla Firefox\res\html.css

User Style SheetsUser Style SheetsIgnore cheap-effect tagsIgnore cheap-effect tags

blink { text-decoration: none !important } blink { text-decoration: none !important } marquee { -moz-binding: none !important }marquee { -moz-binding: none !important }

Visually impairedVisually impairedhtml { font-size: 24pt !important }html { font-size: 24pt !important }

Author Style SheetsAuthor Style Sheets External style sheet External style sheet Internal style sheet (inside the <head> tag) Internal style sheet (inside the <head> tag) Inline style (inside an HTML element)Inline style (inside an HTML element)

RulesRules

A style sheet consists of a list of A style sheet consists of a list of rulesrules. Each rule . Each rule or rule-set consists of one or more or rule-set consists of one or more selectorsselectors and and a a declaration blockdeclaration block. A declaration-block consists . A declaration-block consists of a list of semicolon-separated of a list of semicolon-separated declarationsdeclarations in in braces. Each declaration itself consists of a braces. Each declaration itself consists of a propertyproperty, a colon (:), a , a colon (:), a valuevalue, then a semi-colon , then a semi-colon (;).(;).

PropertiesPropertiesText and FontsText and Fontsfont 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 BackgroundsColours and Backgroundscolor background-color background background-image background-repeat background-position

background-attachment

The Box Model - padding, The Box Model - padding, margin, outline and bordersmargin, outline and borderspadding, 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

Positioning and Positioning and DisplayDisplayposition top right bottom left clip overflow z-index float clear display Visibility ListsListslist-style list-style-type list-style-image

list-style-position

The Box Model – dimensionswidth width height height min-width min-width max-width max-width min-height min-height max-heightmax-height

TablesTablestable-layout border-collapse border-spacing empty-cells caption-side Generated Generated ContentContentcontent counter-increment counter-reset quotes

Paged MediaPaged Mediapage-break-before page-break-after page-break-inside orphans orphans WidowsWidows Misc.Misc.cursor cursor direction direction unicode-bidi unicode-bidi

SelectorsSelectors

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

SelectorsSelectors Element SelectorsElement Selectors element { }element { } Class SelectorsClass Selectors .classname { }.classname { } ID SelectorsID Selectors #idname { }#idname { } Descendant SelectorsDescendant Selectors ul li { }ul li { } Child SelectorsChild Selectors ul > li { }ul > li { } Adjacent SiblingAdjacent Sibling h1 + p { }h1 + p { } Attribute SelectorsAttribute Selectors img[src|="vacation"] { } img[src|="vacation"] { } Daisy ChainingDaisy Chaining #id element.class { }#id element.class { } Group SelectorsGroup Selectors h1,h2,h3 { }h1,h2,h3 { } Universal SelectorsUniversal Selectors * { }* { } Psuedo-ClassesPsuedo-Classes a:hover { }a:hover { } Psuedo-ElementsPsuedo-Elements p:first-letter { }p:first-letter { }

HTML relates to CSSHTML relates to CSS Element SelectorsElement Selectors

<<pp> > styled bystyled by pp {color: red; }{color: red; }

Class SelectorsClass Selectors<<pp class= class=““codecode""> > styled bystyled by

pp..codecode {{color: cyan; font-family: color: cyan; font-family: courier }courier }

oror ..codecode {{color: #F0F; font-family: color: #F0F; font-family: courier }courier }

ID SelectorsID Selectors<<pp id= id=""sigsig"> "> styled bystyled by

pp##sigsig {{color: cyan; }color: cyan; }

oror ##sigsig {{color: #F0F; }color: #F0F; }

ID vs ClassID vs Class

A unique A unique IDID can only be used only “once” can only be used only “once” on a HTML pageon a HTML page

IDs are usually associated with “layout” IDs are usually associated with “layout” regions or areasregions or areas

A A classclass can be used any number of times can be used any number of times

Selector SpecificitySelector SpecificityA selector's specificity is calculated as follows: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 (= count 1 if the declaration is from a 'style' attribute rather than a rule with a selector, 0 otherwise (=

a) a) (In HTML, values of an element's "style" attribute are style sheet rules. These rules have no (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.) 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 ID attributes in the selector (= b) count the number of other attributes and pseudo-classes in the selector (= c) 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) 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]" 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 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. "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. Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the specificity.

Some examples: Some examples: * {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */ * {} /* 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 {} /* 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 */ 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 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 */ 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 */ 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 */ 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 */ 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 */ #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 */ style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

Practical SpecificityPractical Specificity HTML ElementsHTML Elements <p>, <div>, <h1><p>, <div>, <h1>

CSS ClassesCSS Classes .center, .hilight.center, .hilight

CSS IDCSS ID #content, #navbar#content, #navbar

Inline StylesInline Styles style=style=""text-align: centertext-align: center""

Cascade OrderCascade Order Find all declarations that apply to the element and property for the target Find all declarations that apply to the element and property for the target

media typemedia type. . Sort according to importance (normal or important) and origin (author, Sort according to importance (normal or important) and origin (author,

user, or user agent). In ascending order of precedence: user, or user agent). In ascending order of precedence: user agent declarations user agent declarations user normal declarations user normal declarations author normal declarations author normal declarations author important declarations author important declarations user important declarations user important declarations

Sort rules with the same importance and origin by Sort rules with the same importance and origin by specificityspecificity of selector: of selector: more specific selectors will override more general ones. Pseudo-more specific selectors will override more general ones. Pseudo-elements and pseudo-classes are counted as normal elements and elements and pseudo-classes are counted as normal elements and classes, respectively. classes, respectively.

Finally, sort by order specified: Finally, sort by order specified: if two declarations have the same weight, if two declarations have the same weight, origin and specificity, the latter specified winsorigin and specificity, the latter specified wins. Declarations in imported . Declarations in imported style sheets are considered to be before any declarations in the style style sheets are considered to be before any declarations in the style sheet itself. sheet itself.

What color is P element What color is P element text?text?

ExampleExample<HEAD><HEAD><STYLE type="text/css"><STYLE type="text/css">

p.std { color: p.std { color: magentamagenta; }; } #x97z { color: #x97z { color: redred; } ; } p { color: p { color: greengreen; }; }

body { color: body { color: yellowyellow; background-color: ; background-color: #000#000;};}</STYLE> </STYLE> </HEAD> </HEAD> <BODY> <BODY> <P ID="x97z" class="std" style="color: <P ID="x97z" class="std" style="color: cyancyan">Text</P>">Text</P><P>Other Paragraph</P><P>Other Paragraph</P></BODY></BODY>

body { color: body { color: yellowyellow; } ; } /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 *//* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */ p { color: p { color: greengreen; ; /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 *//* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */

p.std { color: p.std { color: magentamagenta; ; /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 *//* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */

#x97z { color: #x97z { color: redred; ; /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 *//* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */

style="color: style="color: cyancyan" " /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 *//* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

In the above example, In the above example, TextText is cyan, and is cyan, and Other ParagraphOther Paragraph is green. is green.

Inserting Style SheetsInserting Style Sheets External Style SheetExternal Style Sheet

LinkLink<link rel="stylesheet" type="text/css" href="navbar.css" /><link rel="stylesheet" type="text/css" href="navbar.css" />

ImportImport<style type="text/css" media="screen">@import url("/css/my.css"); </style><style type="text/css" media="screen">@import url("/css/my.css"); </style><style type="text/css">@import url("import.css") tv,print; </style><style type="text/css">@import url("import.css") tv,print; </style>

Internal Style SheetInternal Style Sheet<style type="text/css"><style type="text/css"> body {margin:0;width:100%;height:100%} body {margin:0;width:100%;height:100%} body,td,input,textarea,select{font-family:arial,sans-serif} body,td,input,textarea,select{font-family:arial,sans-serif} input,textarea,select{font-size:100%} input,textarea,select{font-size:100%} #loading{position:absolute;width:100%;height:100%; background-color:#fff} #loading{position:absolute;width:100%;height:100%; background-color:#fff} .cmsg{margin:1em} .cmsg{margin:1em} .msg{font-weight:bold}.msg{font-weight:bold}</style</style

Inline StylesInline Styles<p style="color:sienna;margin-left:20px">This is a paragraph.</p><p style="color:sienna;margin-left:20px">This is a paragraph.</p>

HTML WebpageHTML Webpage<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><head><title> CSS comes after HTML </title> <title> CSS comes after HTML </title> <meta name="description" content=“CSS For programmers." /> <meta name="description" content=“CSS For programmers." /> <meta name="keywords" content=“CSS, HTML, Tutorial" /> <meta name="keywords" content=“CSS, HTML, Tutorial" /> <style type="text/css" media="screen"> <style type="text/css" media="screen">

@import url("http://some.domain.com/css/base.css"); @import url("http://some.domain.com/css/base.css"); @import url("http://some.domain.com/css/Blog.css"); @import url("http://some.domain.com/css/Blog.css");

</style></style><link rel="stylesheet" type="text/css" <link rel="stylesheet" type="text/css"

href="http://some.domain.com/css/print.css" media="print" />href="http://some.domain.com/css/print.css" media="print" /> <style type="text/css“><style type="text/css“>

body {margin: 0; padding: 0; background-color: } body {margin: 0; padding: 0; background-color: } </style></style>/head> /head> <body id="EyeBrow"> <body id="EyeBrow"> <div id="content" style="text-align:left;"><div id="content" style="text-align:left;"> ……</div></div></body> </body>

External Style Sheets

Inline Style

Internal Style Sheet

External CSS FilesExternal CSS Files

menu

layout

navbar

HTML1

HTML2

<link>@import

<link>@import

<link>@import

@import

CSS SampleCSS Sample/* basic elements *//* basic elements */html {html {

margin: 0;margin: 0;padding: 0;padding: 0;}}

body { body { font: 75% georgia, sans-serif;font: 75% georgia, sans-serif;line-height: 1.88889;line-height: 1.88889;color: #555753; color: #555753; background: #fff url(blossoms.jpg) no-repeat background: #fff url(blossoms.jpg) no-repeat bottom right; bottom right; margin: 0; margin: 0; padding: 0;padding: 0;}}

h3 { h3 { font: italic normal 1.4em georgia, sans-serif;font: italic normal 1.4em georgia, sans-serif;letter-spacing: 1px; letter-spacing: 1px; margin-bottom: 0; margin-bottom: 0; color: #7D775C;color: #7D775C;}}

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

/* specific divs *//* specific divs */#container { #container {

background: url(zen-bg.jpg) no-repeat top left; background: url(zen-bg.jpg) no-repeat top left; padding: 0 175px 0 110px; padding: 0 175px 0 110px; margin: 0; margin: 0; position: relative;position: relative;}}

#intro { #intro { min-width: 470px;min-width: 470px;}}

/* using an image to replace text in an h1. This trick /* using an image to replace text in an h1. This trick courtesy Douglas Bowman, courtesy Douglas Bowman, http://www.stopdesign.com/articles/css/replace-text/ http://www.stopdesign.com/articles/css/replace-text/ */*/

#pageHeader h1 { #pageHeader h1 { background: transparent url(h1.gif) no-repeat top background: transparent url(h1.gif) no-repeat top left; left; margin-top: 10px; margin-top: 10px; width: 219px; width: 219px; height: 87px; height: 87px; float: left;float: left;}}

#pageHeader h1 span {#pageHeader h1 span {display:nonedisplay:none}}

.accesskey {.accesskey {text-decoration: underline;text-decoration: underline;}}

ShorthandsShorthands

#full {#full {border-width: 1px;border-width: 1px;border-style: dotted;border-style: dotted;border-color: #ff0000;border-color: #ff0000;

}}

oror

#shorthand {border: 1px dotted #f00;}#shorthand {border: 1px dotted #f00;}

CSS ShorthandCSS Shorthand

BorderBorder » » *-width *-style *-color*-width *-style *-color

MarginMargin » » *-top *-right *-bottom *-left*-top *-right *-bottom *-left

PaddingPadding » » *-top *-right *-bottom *-left*-top *-right *-bottom *-left

FontFont » » *-style *-variant *-weight *-size *-height *-family*-style *-variant *-weight *-size *-height *-family

List-StyleList-Style » » *-type *-position *-image*-type *-position *-image

BackgroundBackground » » *-color *-image *-repeat *-attachment *-position*-color *-image *-repeat *-attachment *-position

Shorthand DeclarationsShorthand Declarationsmargin-top: 25px; margin-top: 25px; margin-right: 0;margin-right: 0;margin-bottom: 5px; margin-bottom: 5px; margin-left: 0; margin-left: 0;

margin: 25px 0 5px 0;margin: 25px 0 5px 0;

margin: 10px;margin: 10px;margin: 10px 10px 10px 10px;margin: 10px 10px 10px 10px;

margin: 10px auto;margin: 10px auto;margin: 10px auto 10px auto;margin: 10px auto 10px auto;

margin: 10px auto 15px;margin: 10px auto 15px;margin: 10px auto 15px auto;margin: 10px auto 15px auto;

25px

00

5px

ColorsColorscolor_namecolor_name A color name (e.g. red)A color name (e.g. red)

rgb(x,x,x)rgb(x,x,x) An RGB value (e.g. rgb(255,0,0))An RGB value (e.g. rgb(255,0,0))

rgb(x%, x%, x%)rgb(x%, x%, x%) An RGB percentage value (e.g. An RGB percentage value (e.g. rgb(100%,0%,0%))rgb(100%,0%,0%))

#rrggbb#rrggbb A HEX number (e.g. #ff0000)A HEX number (e.g. #ff0000)

The W3C HTML and CSS standards have listed only 16 valid color names: 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, aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow white, and yellow

However, see http://w3schools.com/css/css_colornames.asp for a list of 140 color names However, see http://w3schools.com/css/css_colornames.asp for a list of 140 color names supported by all major browsers. supported by all major browsers.

Length UnitsLength Units

AbsoluteAbsolute

inin inchinchcmcm centimetercentimetermmmm millimetermillimeterptpt point (1 pt is the point (1 pt is the

same as 1/72 inch)same as 1/72 inch)pcpc pica (1 pc is the pica (1 pc is the

same as 12 points)same as 12 points)

RelativeRelative

emem 1em is equal to the 1em is equal to the current “M” size. 2em current “M” size. 2em means 2 times the size of means 2 times the size of the current “M” . E.g., if the current “M” . E.g., if an element is displayed an element is displayed with a “M” of 12 pt, then with a “M” of 12 pt, then '2em' is 24 pt. The 'em' '2em' is 24 pt. The 'em' is a very useful unit in is a very useful unit in CSS, since it can adapt CSS, since it can adapt automatically to the “M” automatically to the “M” that the reader usesthat the reader uses

exex one ex is the x-height of one ex is the x-height of a “x” (x-height is usually a “x” (x-height is usually about half the “M”-size)about half the “M”-size)

pxpx pixels (a dot on the pixels (a dot on the computer screen)computer screen)

%% percentagepercentage

HTML TagsHTML Tags

DeprecatedDeprecated <basefont><basefont> <center><center> <font><font> <strike><strike> <s><s> <u><u>

DiscouragedDiscouraged <b><b> <i><i> <big><big> <small><small> <tt><tt>

CommentsComments CSS uses “C” Style comment SyntaxCSS uses “C” Style comment Syntax

/* Comment here *//* Comment here */p p {{margin: 1em;margin: 1em; /* Comment here */ /* Comment here */padding: 2em;padding: 2em; /* color: white; *//* color: white; */background-color: blue;background-color: blue;}}

/*/*multi-linemulti-linecomment herecomment here*/*/

Comments Comments cannotcannot be nested be nested

CenteringCentering

<center><center> is deprecated is deprecated Suggested to use CSS insteadSuggested to use CSS instead {text-align: center; }{text-align: center; } only centers text only centers text Centering HTML elements with CSS is easy, but Centering HTML elements with CSS is easy, but

not initially obviousnot initially obvious Set margin-left and margin-right to “auto”Set margin-left and margin-right to “auto” Define an element widthDefine an element width

div {margin: 0 auto 0 auto; width:800px; }div {margin: 0 auto 0 auto; width:800px; }

Display of HTML Display of HTML elementselements

BlockBlockTakes up the full width available, with a new line Takes up the full width available, with a new line before and after (before and after (display:block;display:block;))

InlineInlineTakes up only as much width as it needs, and Takes up only as much width as it needs, and does not force new lines (does not force new lines (display:inline;display:inline;))

Not displayedNot displayedSome tags, like <meta /> and <style> are not Some tags, like <meta /> and <style> are not visible (visible (display:none;display:none;))

display vs visibilitydisplay vs visibility selector {selector {display: none;display: none;}} & &selector {selector {visibility: hidden;visibility: hidden;}} accomplish the same thing: The element is removed accomplish the same thing: The element is removed from view.from view.

But fundamentally they work completely different. But fundamentally they work completely different. Display:noneDisplay:none removes the element from the normal removes the element from the normal document flow. The effect is surrounding elements will document flow. The effect is surrounding elements will be adjusted as they reflow in the document.be adjusted as they reflow in the document.

visibility:hiddenvisibility:hidden hides the element, but it remains hides the element, but it remains in the document flow. This may leave what appears to in the document flow. This may leave what appears to be an unexplainable “blank hole” your document.be an unexplainable “blank hole” your document.

Block vs InlineBlock 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=http://www.sample.com/url.html> here </a> for a sample of a CSS based web page.

HTML ElementsHTML Elements

BlockBlock

<div><div>Your general-purpose boxYour general-purpose box

<h1> ... <h6><h1> ... <h6>All headingsAll headings

<p><p>ParagraphParagraph

<ul>, <ol>, <dl><ul>, <ol>, <dl>Lists (unordered, ordered and definition)Lists (unordered, ordered and definition)

<li>, <dt>, <dd><li>, <dt>, <dd>List items, definition list terms, and definition list definitionsList items, definition list terms, and definition list definitions

<table><table>TablesTables

<blockquote><blockquote>Like an indented paragraph, meant for quoting passages of Like an indented paragraph, meant for quoting passages of

texttext

<pre><pre>Indicates a block of preformatted codeIndicates a block of preformatted code

<form><form>An input formAn input form

InlineInline

<span><span>Your all-purpose inline elementYour all-purpose inline element

<a><a>Anchor, used for links (and also to mark specific targets on a Anchor, used for links (and also to mark specific targets on a

page for direct linking)page for direct linking)

<strong><strong>Used to make your content strong, displayed as bold in most Used to make your content strong, displayed as bold in most

browsers, replaces the narrower <b> (bold) tagbrowsers, replaces the narrower <b> (bold) tag

<em><em>Adds emphasis, but less strong than <strong>. Usually Adds emphasis, but less strong than <strong>. Usually

displayed as italic text, and replaces the old <i> (italic) displayed as italic text, and replaces the old <i> (italic) tagtag

<img /><img />ImageImage

<br><br>The line-break is an odd case, as it's an inline element that 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 forces a new line. However, as the text carries on on the next line, it's not a block-level element. the next line, it's not a block-level element.

<input><input>Form input fields like and Form input fields like and

<abbr><abbr>Indicates an abbr. (hover to see how it works)Indicates an abbr. (hover to see how it works)

<acronym><acronym>Working much like the abbreviation, but used for things like Working much like the abbreviation, but used for things like

this TLA.this TLA.

CSS based layoutCSS based layout

#nav #content

#header

#footer

#sidebar

#layout

Positioning SchemesPositioning Schemes Normal FlowNormal Flow

Normal flow is the default scheme used for positioning. In this scheme, block boxes flow vertically 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.starting at the top of their containing block with each placed directly below the preceding one.

position: static;position: static; position: relative;position: relative;

FloatFloatWhen specified, the box is positioned vertically as it would be within the normal flow, its top aligned 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 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 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. content is then allowed to flow around the opposite side.

AbsoluteAbsoluteIn absolute positioning, bIn absolute positioning, block boxes are lock boxes are removedremoved from the normal flow and have no effect on from the normal flow and have no effect on boxes in that flow. Like floated elements, absolutely positioned elements are always treated as 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 block-level elements. As such, they establish a new containing block for any descendants, i.e., any elements contained within the absolutely positioned element.elements contained within the absolutely positioned element.

position: absolute;position: absolute; position: fixed;position: fixed;

Static PositioningStatic Positioning

{position: static;}{position: static;}position:static position:static is the default scheme used in normal flow positioning. In this scheme, 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 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. 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 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 bottom margin of a box to the top margin of the one immediately below it, only the larger of the two values is used: two values is used:

Relative PositioningRelative Positioning

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

Float PositioningFloat Positioning {float: left;}{float: left;}

Floating is achieved by setting the float property on an element's style to either left or Floating is achieved by setting the float property on an element's style to either left or right. Special rules apply to floated elements.right. Special rules apply to floated elements.

When specified, the box is positioned vertically as it would be within the normal flow, 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 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 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 other content). Surrounding inline content is then allowed to flow around the opposite side.side.

Absolute PositioningAbsolute Positioning

{position: absolute;}{position: absolute;}When an element specifies When an element specifies {position:absolute;} {position:absolute;} The position of an The position of an absolutely positioned element is determined by its offset values: top, right, bottom 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 and left. These values work in much the same way as with relatively positioned elements.elements.

But unlike relative positioning, where the offsets are measured from the element's But unlike relative positioning, where the offsets are measured from the element's position in the normal flow, an absolutely positioned element is position in the normal flow, an absolutely positioned element is offset from its offset from its container blockcontainer block..

Fixed PositioningFixed Positioning

{position: fixed;}{position: fixed;}Fixed positioning is a special case of absolute positioning. For fixed elements, the Fixed positioning is a special case of absolute positioning. For fixed elements, the containing block is containing block is always taken to be the viewport of the browser windowalways taken to be the viewport of the browser window. A fixed . A fixed

element does not move when a web page is scrolled as all other elements do.element does not move when a web page is scrolled as all other elements do.

ClearClear

{clear: left;}{clear: left;}The CSS clear property is used to control flow when using the float 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 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 both sides of an element "clear" (i.e. no elements can appear on the

side that is clear).side that is clear).

Box ModelBox Model

Box Model HackBox Model Hack

p p {{background: #ff9999;background: #ff9999;border: 5px solid #ff0000;border: 5px solid #ff0000;padding: 25px;padding: 25px;width: 160px; /* width: 160px; /* IEIE */ */voice-family: voice-family: ""\\""}}\\"" "";;voice-family: inherit;voice-family: inherit;width: 100px; /* width: 100px; /* FFFF */ */

}}html>body p {html>body p {width: 100px;width: 100px;

}}

content

100px

25px5px

160px

padding

border

Quirks ModeQuirks Mode

To maintain compatibility with the greatest To maintain compatibility with the greatest possible number of web pages, modern possible number of web pages, modern web browsers are generally developed web browsers are generally developed with multiple rendering modeswith multiple rendering modes

standards mode:standards mode: pages are rendered pages are rendered according to the HTML and CSS according to the HTML and CSS specificationsspecifications

quirks mode:quirks mode: attempts are made to emulate attempts are made to emulate the behavior of an older browser to support the behavior of an older browser to support the large body of legacy documents the large body of legacy documents

DOCTYPEDOCTYPE

(Almost) Standards Mode(Almost) Standards Mode

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> "http://www.w3.org/TR/html4/loose.dtd">

Quirks ModeQuirks Mode

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Almost Standards ModeAlmost Standards Mode maintains the "traditional" vertical sizing of table cells according to the maintains the "traditional" vertical sizing of table cells according to the CSS2CSS2 specification. specification. "Almost standards" mode rendering matches "standards" mode in all details "Almost standards" mode rendering matches "standards" mode in all details except for oneexcept for one. The layout of images inside . 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 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“ modelikely to fall apart in browsers when in either "quirks" or "almost standards" mode, rather than "standards“ mode

DHTMLDHTML

Some Dynamic HTML effects can be Some Dynamic HTML effects can be accomplished with CSSaccomplished with CSS RolloversRollovers Button pushesButton pushes

Common MistakesCommon Mistakes

Using an HTML tag because of the way it Using an HTML tag because of the way it lookslooks, not for its meaning, not for its meaning

Inserting presentation into your HTMLInserting presentation into your HTML Adding an ID or Class to all HTML Adding an ID or Class to all HTML

elements so that it is a selector for CSSelements so that it is a selector for CSS Using “=“ instead of “:” in declarationUsing “=“ instead of “:” in declaration Not preserving case: ID & Class names Not preserving case: ID & Class names

are case-sensitiveare case-sensitive

Best PracticesBest Practices Make sure you’re using a good DOCTYPEMake sure you’re using a good DOCTYPE Order styles in fileOrder styles in file

HTML selectors at topHTML selectors at top ID selectors together (especially those used for layout)ID selectors together (especially those used for layout) Place class and pseudo-class selectors lastPlace class and pseudo-class selectors last

Add notesAdd notes Use em or %, not pxUse em or %, not px Add Add {border: 1px solid red;} {border: 1px solid red;} to elements in to elements in

your CSS to help debug layout, positioning or spacingyour CSS to help debug layout, positioning or spacing Always terminate your declarations with a semicolon (;)Always terminate your declarations with a semicolon (;) Do not use the HTML tables for layoutDo not use the HTML tables for layout

ToolsTools

Firefox with FirebugFirefox with Firebug 11stst Page 2000 in Realtime Preview mode Page 2000 in Realtime Preview mode

DemoDemo

Firebug DemoFirebug Demo

P elementP element Box ModelBox Model StylesStyles Look at CSSLook at CSS Viewing colorsViewing colors Viewing imagesViewing images Editing TechRepublic Editing TechRepublic

“print media”“print media”

ReferencesReferences http://www.htmldog.comhttp://www.htmldog.com http://www.csszengarden.comhttp://www.csszengarden.com http://www.w3schools.com/css/default.asphttp://www.w3schools.com/css/default.asp http://www.quirksmode.orghttp://www.quirksmode.org http://en.wikipedia.org/wiki/Quirks_modehttp://en.wikipedia.org/wiki/Quirks_mode http://www.barelyfitz.com/screencast/html-training/css/positioninghttp://www.barelyfitz.com/screencast/html-training/css/positioning http://http://www.autisticcuckoo.net/archive.php?idwww.autisticcuckoo.net/archive.php?id=2004/12/07/relatively-absolute=2004/12/07/relatively-absolute

Questions?Questions?