Cascading Style Sheets and You
How CSS Can Destroy Your Marriage...
Jason Gleman
New York State Department of Civil Service
May Contain Peanuts.
... of Structure and Presentation
Where do we start with CSS?
Where do we start with CSS?
Markup
HTML 4.01 or XHTML?
No matter which you choose, discipline yourself to write better documents.
Not Just Any Markup Will Do
Simply deciding to use HTML 4 or XHTML is not enough. You must use tags with meaning and you should strive for validation.
Semantic Markup
- Use tags that carry meaning
- Do not use presentational tags
DOCTYPE
- Short for document type declaration.
- DOCTYPEs tell the browser what to expect.
Example DOCTYPEs
HTML 4.01 Strict, Transitional, Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
Example DOCTYPEs
XHTML 1.0 Strict, Transitional, Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Sample XHTML Document
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Sample Document</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" href="sample.css" type="text/css" media="all" />
</head>
<body>
... see next slide for content
</body>
</html>
Sample XHTML Document
<body>
<div id="header">
<h1>Sample Website</h1>
<p>Setting an example for over twenty minutes!</p>
</div>
<div id="content">
<h2>Sample Heading Level 2</h2>
<img src="sample.gif" alt="Sample" width="30" height="30" />
<p>This is the most boring source code example
I have ever seen.</p>
<p>... some other text</p>
</div>
<div id="footer">
<p>Copyright © 2005</p>
</div>
</body>
Sample XHTML Document
Sample XHTML Document with some CSS
Learn More About Semantic Markup
- Integrated Web Design: The Meaning of Semantics by Molly Holzschlag.
- Dan Cederholm's Simple Quiz