Introduction to CSS

HTML Past

<TABLE> tag intended to display spreadsheet-like data

research results

train schedules

etc.

<TABLE> tag used inappropriately to provide grid-like structure to a Web page

HTML Present

CSS lets HTML go back to doing what it does best – structure content, not page layout

use HTML to organize content

use CSS to make that content look great

Turning point – 2003

Jeffrey Zeldman ( www.zeldman.com )

Web Standards

Think Structure

HTML adds meaning to text – semantic meaning

<h1> implies page heading

<p> implies a paragraph of text

<table> implies a spreadsheet of data

Two New HTML Tags

Two generic tags that let you provide “handles” to attach CSS styles to different elements in a page

<div>

<span>

What are “ elements ”?

HTML Tags to Forget

<FONT> used for the display of text

<B> and <I> used to make text bold and italic

use <strong> and <em> instead

<TABLE> tag for page layout

<BODY> tag attributes

background , bgcolor , text , link , alink , vlink

Tips to Guide Your Way

Use only one <h1> tag per page

Use headings (<h2>, <h3>, etc.) to indicate the relative importance of text

Close all tags, especially single-sided tags

<br />, <img />, <link />

Importance of the Doctype

Document Type Definition (DTD)

an XML document that explains what tags, attributes and values are valid for a particular type of HTML

mistyping the doctype throws browsers in to “ quirks mode ”, a parallel universe where the browser thinks the time is 1999.

www.quirksmode.org

Importance of the Doctype

XHTML Strict Doctype disallows once-popular properties like the link’s target property

<a target=“_blank”> triggers the opening of a new window or tab when clicking a link

Personal choice: XHTML transitional

Introduction to CSS

0 comments

Notes on slide 1

Favorites, Groups & Events

Introduction to CSS - Presentation Transcript

More by user

More info about this document

Categories

Tags

Introduction to CSS

0 comments

Notes on slide 1

Favorites, Groups & Events

Introduction to CSS - Presentation Transcript

Related Presentations

More by user

More info about this document

Categories

Tags