Css 2

CSS Basics
Getting started with CSS Jim Doran
In this hour
1. 2. 3. 4. Overview XHTML CSS: Nuts and Bolts Case Study site reworking with web standards and CSS
Web Standards
Web standards are the rules and guidelines developed by the World Wide Web Consortium (W3C) for authoring web sites.
Web Standards
CSS support is improving.
IE 6, 7 and 8 [beta]
http://dean.edwards.name http://webstandards.org Could it be that if enough of us use the recommendations of the W3, the browser makers will maintain interest is supporting this interest?
The Benefits of CSS

Improved accessibility Smaller file sizes Richer styling Easy to use (really!) Target more devices Pages will last longer and are easier to maintain.
Maintainability
Index.html
About.html Other pages
styles.css
The Zen of CSS
HTML and CSS

Separate languages, but work very closely together. Before we can put the shingles on, we need to build the house.
HTML or XHTML?
Presentation versus Structure
Presentational Mark-up
<table border=0 cellpadding=0 cellspacing=0 width=100% bgcolor="336699"> <tr><td><b> <font color=#FFFFFF face="Arial,helvetica,sansserif">Search Site For:</font></b></td> <td align=right> </td></tr> </table>
Presentational Mark-up
<table border=0 cellpadding=0 cellspacing=0 width=100% bgcolor="336699"> <tr><td><b> <font color=#FFFFFF face="Arial,helvetica,sansserif">Search Site For:</font></b></td> <td align=right> </td></tr> </table>
Web Standards
We strive to keep a documents structure separate from its formatting elements, and its behaviors separate from both.
Web Standards Structure Behavior
Formatting
Marauder's Map
Flavors of HTML
To get started with web standards, we must choose a version of HTML (Hypertext Mark-up Language) or XHTML (Extensible Hypertext Mark-up Language). We do this by using a document type declaration (DTD).
Got DOCTYPE?
NO Render in Quirksmode
YES
Render in standards mode
DOCTYPE Options
HTML 4.01 Transitional Strict Frameset XHTML 1.0 Transitional Strict Frameset XHTML 1.1
Transitional is forgiving - allows the use of deprecated tags like <font>, <center>,<i> and <b>.
DOCTYPE Options
Follows the rules very closely, or throws an error. Fewer tags, more control.
DOCTYPE Options
For when one *must* use frames.
DOCTYPE Options
Not widely supported yet.
XHTML Strict 1.0

<!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-strict.dtd">
XHTML Rules
1. All tags must be lowercase
XHTML Rules
1. All tags must be lowercase 2. All tags must close
XHTML Rules
1. All tags must be lowercase 2. All tags must close (even empty tags): <img /> <br /> <meta /> <link />
XHTML Rules
1. All tags must be lowercase 2. All tags must close (even empty tags): 3. Attributes must be in quotes
XHTML Rules
1. 2. 3. 4. All tags must be lowercase All tags must close Attributes must be in quotes Tags must be nested properly
XHTML Rules
1. 2. 3. 4. All tags must be lowercase All tags must close Attributes must be in quotes Tags must be nested properly <em><p>Nesting!</p></em> (incorrect)
XHTML Rules
1. 2. 3. 4. All tags must be lowercase All tags must close Attributes must be in quotes Tags must be nested properly Note: Images must have alt attributes
Semantic Mark-up
Think of the Mark-up in HTML as adding meaning to content we are identifying our content with HTML tags so that the browser/search engine/screen reader understands exactly what we mean.
Meet the Worlds Most Active Blind Web User
<h1>WCAG Guidelines and Support Documents: Architecture and Document Specifications</h1> <h2>Introduction</h2> <p>The purpose of this document is to describe both the
overall structure of the WCAG guidelines and supporting documents and to provide specifications and instructions to guide in their creation. This document is currently a proposal, but once approved by the working group, would be used by individual teams and task forces within the working group to guide their work. It will be amended as appropriate, but will be the guiding document representing the plan and structure as agreed to by the working group. </p>
Nuts and Bolts of CSS
We use forms of style sheets everyday
Whether we were aware of it or not.
Where do we put CSS?

If we are keeping our structure separate from our presentation.
then where do we keep the presentation?
CSS can be:

Linked in an external file with a .css extension. <head> <title>CSS Basics</title> <link href=styles.css" type="text/css" media="screen /> </head>
Linked Style Sheet

Index.html
About.html Other pages
styles.css
CSS can be:

Linked in an external file with a .css extension. <head> <title>CSS Basics</title> <link href=screenStyles.css" type="text/css" media="screen /> <link href=printStyles.css" type="text/css" media=print /> </head>
Media Types
All Aural Braille Embossed Handheld Print Projection Screen TTY TV All media devices Speech and sound synthesizers Braille tactile feedback devices Braille printers Small screen handheld devices Printers Projected presentations Computer screens Fixed-pitch character grid, like teletypes and terminals Television-type devices
CSS can be:

Embedded on the page itself <head> <title>CSS Basics</title> <style type="text/css"> <!-body {color:#fff;} --> </style></head>
CSS can be:

Embedded on the page itself This will override an external style sheet. Useful for styling single pages.
CSS can be:

Defined inline in an html element. <p style=color: red; fontweight: bold;>Evening classes canceled!</p>
CSS can be:

Defined inline in an html element. Inline styles should only be used in extreme cases where an element style occurs only ONCE in an entire site.
Considerations
Inline styles will override an embedded style. Embedded styles will override a linked style. The user can specify their own style sheet.
Styles are Rules
Selector {property:value;}
Styles are Rules
Selector {property:value;} (the things to which we apply a style)
Styles are Rules
Selector {property:value;} (the style we are setting, such as text color)
Styles are Rules
Selector {property:value;} (the value we are setting, such as red)
Styles are Rules
the rule
Styles are Rules

declaration
Styles are Rules
h1 {color:red;}
Styles are Rules

Multiple declarations
Selector {property:value; property:value;}
Styles are Rules
h1 {color:red; font-size:1em;}
Selectors can be:

Any HTML tag body {font-family: arial, verdana, san-serif;} h1 {font-weight: bold;} li {display: inline;}
Selectors can be:

A class attribute <span class=redtext>Please enter your password</span> .redtext {color: red;}
Selectors can be:

An id attribute <div id=centerColumn>...</div> #centerColumn {margin: auto;}
Selectors can be applied:

Contextually
#center h1 {font-size:1.5em;} div p {margin-left:10px;} .box a {background-color:#eee;}
Selectors can also be:

Grouped
h1, h2, h3 {font-size:1.5em;} p, li {margin-left:10px;}
Summary:
Selectors can be any HTML element, a class or an ID. IDs can be used once per page Classes are generic, and can be used multiple times An ID rule will override a class and HTML selector A class will override an HTML selector
Properties
Text and Fonts Colors and Backgrounds Dimensions, padding, margin and borders Positioning and Display Lists, tables, generated content Cursors and more
Inheritance
Child elements can inherit properties from their parent element(s). <body> <h1>Welcome!</h1> . . . body {font-family: arial, verdana, san-serif;}
Box Model
Pixels are boxes. And so are HTML elements.
Box Model
Box Model
<p>Pixels are boxes.</p>
Box Model
Pixels are boxes. padding margin border
Box Model
margin padding padding Pixels are boxes. padding margin border padding margin
Box Model
<p class=box>Pixels are boxes.</p> .box { border: 1px solid #000; margin: 1em; padding: 7px; }
Who are you going to believe, me or your own eyes?

~ Groucho Marx
[Re]Design Case Study:
Bladder
Statistics
32 links on this page (7 redundant) 13.35 KB (13,667 bytes) 31 <table> tags used 32 errors in quirksmode 9 images (2 non-presentational) 331 lines of HTML
My Requirements
Keep content and layout (dont redesign this) Layout must work at 800px wide and larger One style sheet for all browsers Use web standards (of course) Must validate
Steps
1. Create a valid XHTML document, using the rules described earlier. We need a good house...
Skip Navigation
<a href="#mainContent" id="jumpLink" title="Skip Navigation">Skip Navigation</a> #jumpLink { display: block; height: 0; overflow: hidden; }
HTML Equivalents
<li>Copyright © 2008 <abbr title="Johns Hopkins University">JHU</abbr></li>
Anchors in Lists
<ul id="topNav"> <li><a href="#mainContent" id="jumpLink" title="Skip Navigation" tabindex="2">Skip Navigation</a></li> <li><a href="#" title="Appointments" tabindex="3">Appointments</a></li> <li>. . . </li> </ul>
<h1> instead of <img>
Steps
1. Create a valid XHTML document, using the rules described earlier. We need a good house... 2. Build layout with CSS (time to add the shingles).
Reset browser styles

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {margin:0;padding:0;}img {border:0;}li {list-style:none; display:inline;}h1, h2, h3, h4, h5, h6 {font-size:100%;fontweight:normal;}input, textarea, select {font-family:inherit;fontsize:inherit;}
Create Container Div styles

#header
#infoBox #leftBox #middleBox #rightBox
#footer

#header
#header { width:100%; height:113px; background:url(../images/bkHeader.jpg) no-repeat top left; }

<div id=leftBox class=boxBorder>. . . </div> #leftBox { display:inline; float: left; margin-right:20px; margin-bottom:20px; width:175px;} .boxBorder { border:1px solid #79A3F2; }
Typography
HTML (and the web) is mostly comprised of text. Yet, we find ourselves limited to a handful of safe fonts. Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Geneva
Image Replacement
However, we can safely employ an image/text replacement technique for some things...
Image Replacement
Lets pretend we needed to use Garamond in a heading, to hint at the Hopkins brand.
Image Replacement
<div id=infoBox> <h2><span>Information for:</span></h2> </div> #infoBox h2 { background:url(../images/bkHeadline.jpg) norepeat; width:189px; height:42px;} #infoBox h2 > span { height:0; overflow:hidden; display: block; }
Results
Original New
13.35 KB (13,667 bytes) 5.05 KB (5,170 bytes) 32 errors quirksmode 9 <img> images 331 lines of HTML 0 errors in strict xhtml 1.0 2 <img> images 83 lines of HTML
Tools:
Firefox Marc Gueury Tidy HTML Validator plug-in Web Developer Tool Bar plug-in CSS, HTML, 508 & WAI Validator tools http://validator.w3.org/ http://jigsaw.w3.org/css-validator/ http://www.cynthiasays.com/
Achieving accessibility, and working with web standards, is an iterative process.
Thank you
PowerPoint and PDF versions of this presentation, as well as the examples, are available online: http://jimdoran.net/css/

Css 2

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Css 2

Uploaded by

Copyright:

Available Formats

CSS Basics

Getting started with CSS Jim Doran

The Benefits of CSS

About.html Other pages

The Zen of CSS

HTML and CSS

Web Standards Structure Behavior

Render in standards mode

For when one *must* use frames.

Not widely supported yet.

XHTML Strict 1.0

Meet the Worlds Most Active Blind Web User

Nuts and Bolts of CSS

We use forms of style sheets everyday

Whether we were aware of it or not.

Where do we put CSS?

then where do we keep the presentation?

CSS can be:

Linked Style Sheet

About.html Other pages

CSS can be:

CSS can be:

CSS can be:

CSS can be:

CSS can be:

Styles are Rules

Styles are Rules

Selector {property:value;} (the things to which we apply a style)

Styles are Rules

Selector {property:value;} (the style we are setting, such as text color)

Styles are Rules

Selector {property:value;} (the value we are setting, such as red)

Styles are Rules

Styles are Rules

Styles are Rules

Styles are Rules

Selector {property:value; property:value;}

Styles are Rules

Selectors can be:

Selectors can be:

Selectors can be:

Selectors can be applied:

#center h1 {font-size:1.5em;} div p {margin-left:10px;} .box a {background-color:#eee;}

Selectors can also be:

h1, h2, h3 {font-size:1.5em;} p, li {margin-left:10px;}

Pixels are boxes. And so are HTML elements.

<p>Pixels are boxes.</p>

Pixels are boxes. padding margin border

Who are you going to believe, me or your own eyes?

[Re]Design Case Study:

<h1> instead of <img>

Reset browser styles

Create Container Div styles

Create Container Div styles

#infoBox #leftBox #middleBox #rightBox

Create Container Div styles

#header { width:100%; height:113px; background:url(../images/bkHeader.jpg) no-repeat top left; }

Create Container Div styles

Achieving accessibility, and working with web standards, is an iterative process.

You might also like

For when one must use frames.