CSS Development

Andrew J. Peterson

NDP Software

Overview

Introduction
Development Process
HTML Style
CSS Style
CSS Organization

Introduction

CSS is Engineering: Often doesn't get respect
Treat as an engineering endeavor:

Organize
Modularize
Document
etc.

Development Process

Create plain XHTML: validating, semantic, minimal but not cryptic
Prepare for Styling: Add Classes or IDs at highest level
Style (Build interactive components too!)
Test across browsers
Now you're ready to build the actual JSP pages

Note: Often if the design changes it's worth going back to the HTML.

Basic Guidelines for HTML

Tables vs. Divs:: Q: Is it tabular data?
Divs vs. Spans:: Q: Block vs. inline
H1 vs. Divs and Spans:: Q: Does an HTML tag make sense?

Alternatives to DIVs

HTML You Might Not Know About

abbr
acronym
address
blockquote
caption (for tables)
cite
code
dl, dt, dd
dfn
kbd
q

Preparing to Style

Naming IDs and Classes:: Use hyphens to separate words, all lowercase.
IDs vs. Classes:: Q: Can there be more than one per page?

Preparing to Style

Add classes and IDs at the highest level possible

Use an enclosing style or class when possible. For example:

<ul>
<li class="album">Let It Be</li>
<li class="album">Abbey Road</li>

</li>

is more concisely expressed as:

<ul  class="albums">
<li>Let It Be</li>
<li>Abbey Road</li>
</ul>

This may seem obvious, but quite common. There are more complex cases, that are harder to see. Basically, try to determine the meaningful outside element, and write selectors in terms of that.

Example



<div style="margin: 20px 10px 0pt;">

<h5>TeeBeeDee Founding Members</h5>

<b>Interests</b><br>

<div style="margin: 0pt 0pt 10px; height: 55px; font-size: 14px;">
	<div style="margin: 0pt 10px 0pt 0pt; float: left;"><a href="profile/Medelhart"><img src="/image/682.jpg..."></a></div>
	"Word puzzles baseball food exotic travel"<br>

<div style="float: left; font-size: 9pt; font-weight: bold;"><a href="profile/Medelhart">Medelhart</a></div>		
		
		

<div style="height: 5px; clear: both;"></div>

	
	<b>Favorite Getaway</b><br>

<div style="margin: 0pt 0pt 10px; clear: both; height: 55px; font-size: 14px;">
	<div style="margin: 0pt 10px 0pt 0pt; float: left;"><a href="/profile/ereith1"><img src="/image/1433.jpg..."></a></div>
	"Anywhere that isn't Central NY"<div style="float: left; font-size: 9pt; font-weight: bold;"><a href="/profile/ereith1">ereith1</a></div></div></div>
	

<div style="float: right; clear: both;"><a href="/browseFoundingMembers.html">View All Members �</a></div>
</div>

Example: cleaned up


<div class="founding-members">

<h5>TeeBeeDee Founding Members</h5>

	<h6>Interests</h6>

	<a href="profile/Medelhart">

		<img src="/image/682.jpg...">

	</a>

	<p>Word puzzles baseball food exotic travel 

		<a href="profile/Medelhart">Medelhart</a></p>

	<h6>Favorite Getaway</h6>

	<a href="/profile/ereith1">

		<img src="/image/1433.jpg...">

	</a>

	<p>Anywhere that isn't Central NY<a href="/profile/ereith1">ereith1</a>

	</p>

	<a href="/browseFoundingMembers.html">View All Members �</a>

</div>

Styling: Writing CSS

Order in the same order as the HTML
Use CSS selectors that reinforce the structure of the HTML
Alter the HTML if it's making the CSS too messy
Use inline styles for single page pixel adjustments
Don't optimize too early

Modularity

Follow same practices as programming: one or two pages only
No global CSS
Break out HTML geographically-- modules, blocks of the page
Break out CSS to correspond to HTML modularity
Wrap modular HTML in a class/id with same name
Name HTML (.tag, etc.) same as CSS file and surrounding.
Embedded vs. external CSS? Will the user look at the page more than once?

Font-sizing Strategy

Small, medium, large, etc.
%, ems (relative measures)
combinations

San Francisco, April 2007

CSS Development

CSS Development

Andrew J. Peterson

NDP Software

Overview

Introduction

Development Process

Basic Guidelines for HTML

Alternatives to DIVs

Preparing to Style

Preparing to Style

Add classes and IDs at the highest level possible

Example

Example: cleaned up

Styling: Writing CSS

Modularity

Font-sizing Strategy

TBD

TBD

TBD