CSCI E-75: Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS)

• XHTML for Markup
• CSS for style and presentation

The Power of Stylesheets

• United States Constitution (no external stylesheet)
  

• Chocolate Stylesheet
• Midnight Stylesheet
• Modernist Stylesheet
• Oldstyle Stylesheet
• Steely Stylesheet
• Swiss Stylesheet
• Traditional Stylesheet
• Ultramarine Stylesheet

Harvard College Admissions

Harvard College Admissions

With CSS disabled:

Headings

Heading elements (h1,h2,etc.) combined with CSS are very powerful. Headings can remain headings in markup and CSS can style them as desired.

Lists

Lists combined with CSS are very powerful. Lists can remain lists in markup (navigation, content items, etc.) and CSS can style them as desired.

Department of African and African American Studies

Department of African and African American Studies

With CSS disabled:

Designing with Stylesheets: CSS Zen Garden

css Zen Garden: The Beauty in CSS Design. A demonstration of what can be accomplished visually through CSS-based desgin.

XHTML: a simple example with CSS

• No CSS: simple.html
• With CSS:
  • simple-style.html
  • simple-style.css

And here is the stylesheet (simple-style.css):

CSS Recommendations from the W3C

• CSS 1, December 1996; Revised January 1999)
• CSS 2, May 1998
• CSS 2.1, Candidate Recommendation, July 2007
• CSS Current Work (CSS Mobile Profile, Print Profile, TV Profile, CSS3)

CSS Validator

CSS Resources

www.alistapart.com	www.simplebits.com
meyerweb.com/eric/css/	www.westciv.com/style_master/house

Binding Styles to Markup

Three ways to bind CSS rules to XHTML/HTML markup:

• style attribute in element
• style element in XHTML/HTML head
• External CSS document, through the link element in XHTML/HTML head

style attribute

style element

link element

Anatomy of a CSS Rule

CSS Rule

Selector and Declarations

Properties and Values

Combining Rules

Combining Selectors

class selectors

id selectors

Contextual Selectors

Selectors

• element
• descendant
  • ul li
• class
  • p.abstract
  • .warn
• id
  • #main
  • #head
• child
  • body > p
  • ul > li
• attribute
  • input[type=text]
  • input[type=radio]
• wildcard (*)

Inheritance

Note: Firebug is a very useful Firefox extension for analyzing CSS properties and values.

The Cascade

Suggested reading: CSS 2.1: Assigning property values, Cascading, and Inheritance

Stylesheet Origin

• author's stylesheet
• reader's stylesheet
• UA's stylesheet

Specificity of Selector

• "id" attributes
• "class" attributes
• element names

Order

• last occurence has higher specificity

The Cascade in Action

Sample "UA" default stylesheets for HTML 2.0 and HTML 4.0

CSS Properties

font properties

• font-family
• font-style
• font-variant
• font-weight
• font-size
• font

font-family

font-style

font-variant

font-weight

font-size

You can specify font-size by:

• relative sizes (UA)
  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large
• relative sizes (context)
  • smaller
  • larger
• relative unit (context)
  • percent (%)
  • em unit
• absolute unit
  • pt

Praesent tincidunt, elit porta elementum pharetra, magna odio consequat nisi, eu iaculis mauris massa eu eros.

By Name:

Relative Names:

Relative Units:

Absolute Units:

Relative vs. Absolute

As a general guideline with CSS, relative measurements are better than absolute measurements.

Units for Font Sizes

• Relative
  • Relative Sizes (to UA settings): xx-small | x-small | small | medium | large | x-large | xx-large
  • Relative Sizes (to context): larger | smaller
  • Percentage (%)
  • "em" units
• Absolute
  • "pt" sizes (8pt, 10pt, 12pt)

Relative Sizes and Inheritance

Relative size are relative to parent. Nested div elements with font-size: 85% and margin-left: 50px have properties of:

• 1st div:
  • 85% font size
  • 20px left margin
• 2nd div:
  • 85% × 85% = 72.25% font size
  • 20px + 20px = 40px left margin
• 3rd div:
  • 85% × 85% × 85% = 61.4% font size
  • 20px + 20px + 20px = 60px left margin
• 4th div:
  • 85% × 85% × 85% × 85% = 52.2% font size
  • 20px + 20px + 20px + 20px = 80px left margin

font "shorthand" property

text properties

• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• text-align
• text-indent
• line-height

CSS Units

• Length
  em, pt, ex, mm, cm, in, px
• Percentage
• URL
  url(url goes here)
• Color
  name, rgb value

Color Units

Wikipedia Web Colors

Name

RGB Color Space

The following are all equivalent ways of defining a shade of crimson:

Web Palette / Web Safe Colors

Block Model

• margin
• border
• padding
• content

Image from Cascading Style Sheets: The Definitive Guide, 3rd ed by Eric Meyer, published by O'Reilly

Firebug visualization of block model (Layout):

margin, padding, border

TRBL for padding and margin shorthand

Stay out of "TRBL" (top right bottom left) for padding and margin shorthand.

border-style

border is a shorthand notation that allows you to set border-width, border-style, border-color in one statement.

Margin, Padding, Border Example

Backgrounds

• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background (a shorthand property)

Background Image with CSS

A background image with CSS:

Repeat

Repeat on y-axis only:

Center and Fix

Center, Don't Repeat and Fix position:

Backgrounds aren't just for the "body"

Here we use the following images as backgrounds in div elements.

wood.jpg

marble.jpg

water.jpg

Backgrounds aren't just for the "body"

Backgrounds: use tiling and image size

The image (5px × 150px; 254 bytes):

Minuteman

Image as a fixed background for the "body". Alternate versions of the image for the "header" and "main" content areas of the page.

The three images:

Rendered in a browser:

Pseudo-Classes and Elements

CSS 2.1 defines these pseudo-classes and pseudo-elements. Examples are p:first-line, ul:first-child, and input:focus

Pseudo Elements

first-letter pseudo element.

first-line pseudo element

Opening paragraph with first-letter pseudo element.

Pseudo Classes

• a:link
• a:visited
• a:hover
• a:active

Class Names

You can choose class names when authoring your CSS and XHTML. A good rule is to create "logical" class names and not "descriptive" ones. Remember, you've gone to the trouble of separating markup and presentation -- keep this separation when creating class names.

If you can guess how the class is styled based upon the name, this should cause you to consider changing the name.

Choosing class and id names appropriately will help with:

• evolution
  Your #rightnav may very well become navigation positioned on the left side or the top.
  Your .redbold may very be changed to another color or background entirely.
• specificity and semantics
  If you have a .dottedborder class, you may wish to change how your thumbnail images are styled, but leave presentation of other markup that you've given the same class to unchanged.

See: Choosing Class and ID Names

Float

Float takes the block out of the flow of the containing block and moves it (right or left) within the containing block.

float: none

float: right

Float and Clear

The "clear" property defines the sides of a block where floated blocks cannot occur.

float: right; clear: none

float: right; clear: right

Float and Clear

The "clear" property defines the sides of a block where floated blocks cannot occur.

clear: none

clear: right

Float

Float: right

Float: left

Float Opposite

Use float: left and float: right for content to be on opposite sides.

The background color of the parent div did not display. The content of this div has been "floated," therefore it has been removed from the calculation of its box model. The parent div size is null. Solution: float the parent div. Recall that a float is always with respect to the containing box.

Float and Margins

We want to float one element left, the other right. We want content to be between the floated elements.

Make the middle content not wrap around the floated contents (set margin for the middle content).

Float and a Flexible "Grid"

Here each "program" is wrapped in a div, which contains a thumbnail and a caption. The div elements are sized (height and width set) and floated. The result is a table-like layout that is flexible for varying widths of the browser window.

Harvard at Home Programs

Congress

Float and a Flexible "Grid"

It is important to set height and width !

Without setting height and width:

Setting height and width:

Display: none

Can use CSS to turn off display. This will be especially useful to manipulate CSS properties with JavaScript.

Full list for the American League:

With ALE and ALW display set to "none":

Lists

• list-style-type
  • disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
• list-style-image
• list-style-position
• list-style
  a shorthand property

Ordered List

An ordered list:

Lists with Image

And now, let's add a basketball icon as a list bullet (image is at images/basketball.gif,

An unordered list controlled by CSS:

Doing this without CSS

How to accomplish this without CSS.

Lists without list-style

Display List Items "Inline"

Unordered List

Inline List Items

Inline List Items

Inspired by: CSS Cookbook by Christopher Schmitt

Lists as Navigation

Default styling:

As navigation:

Inspired by: CSS Cookbook by Christopher Schmitt

Lists as Navigation

Inspired by: CSS Cookbook by Christopher Schmitt

Breadcrumb Navigation

media selector

all

Suitable for all devices.

braille

Intended for braille tactile feedback devices.

embossed

Intended for paged braille printers.

handheld

Intended for handheld devices (typically small screen, limited bandwidth).

print

Intended for paged material and for documents viewed on screen in print preview mode.

projection

Intended for projected presentations, for example projectors.

screen

Intended primarily for color computer screens.

speech

Intended for speech synthesizers. Note: CSS2 had a similar media type called 'aural' for this purpose.

tty

Intended for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities).

tv

Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).

Harvard College Funding Database

Screen display (screen.css):

Print display (print.css):

Print CSS

CSS Print Profile deals with paged media.

The book Cascading Style Sheets : Designing for the Web (3rd Edition) by Hakon Wium Lie and Bert Bos was printed using CSS.

See A List Apart: Articles: Printing a Book with CSS: Boom!

Yahoo! UI (YUI) Library

• Yahoo! User Interface Library

  The Yahoo! User Interface (YUI) Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX. The YUI Library also includes several core CSS resources. All components in the YUI Library have been released as open source under a BSD license and are free for all uses.

• YUI CSS
  • CSS Reset (neutralizes browser CSS styles)
  • CSS Base (applies consistent style foundation for common elements)
  • CSS Fonts (foundation for typography and font-sizing)
  • CSS Grids (more than 1,000 CSS-driven wireframes in a 4KB file)

YUI Grid Example

• YUI Grid Examples
• Special Nesting Grid E: 3/4 - 1/4

Grid: 4 areas:

• header
• body - A - 3/4
• body B - 1/4
• footer

Note the use of "reset-fonts-grids.css", which gives you a blank slate for styles (overrides UA stylsheet for font sizes, margins, padding, etc.)

Harvard Homepage Markup/Style Makeover

Markup and Page Stats

Homepage Sections

Homepage

As Markup

Stage 1: YUI Grid

• YUI Grid Template
  • XHTML
  • CSS
  • YUI CSS
  • 

Stage 2: Styles for Main sections

• Styles for #doc, #ht, and #ft
  • XHTML
  • CSS
  • 

Stage 3: Styles for Navigation Lists

• Styles for Navigation Lists
  • XHTML
  • CSS
  • 

Stage 4: Styles for Content

• Styles for content
  • XHTML
  • CSS
  • 

Results of Markup/Style Makeover

Harvard Homepage with Markup/Style Makeover

	Current	After Markup/Style Makeover
Screenshot
Markup Type	HTML 4.01 Transitional 53 validation errors	XHTML 1.0 Strict
Markup Size	26.1 k	6.9 k
Markup (after 'tidy')	380 lines	134 lines
Style (CSS)	n/a	Custom CSS 7.6k 241 lines YUI CSS 3.3k
Document dependencies	1 HTML 48 images	1 XHTML 11 images 2 CSS
Total page weight	226 k	83 k
Elements	elements: 314 a 60 b 15 body 1 br 9 center 2 div 1 font 10 head 1 hr 6 html 1 img 61 meta 3 p 9 script 1 table 16 td 85 title 1 tr 32 attributes: 588	elements: 148 a 50 body 1 br 1 div 21 h1 1 h2 2 h3 1 head 1 html 1 img 4 li 43 link 1 meta 1 p 9 title 1 ul 10 attributes: 106

Assets

• XHTML
  • harvardhomepage/harvard_css.html
• Images
  • harvardhomepage/images/memorial_hall.png
  • harvardhomepage/images/crimson_background2.png
  • harvardhomepage/images/stiller.jpg
  • harvardhomepage/images/painrelievers.jpg
  • harvardhomepage/images/veritas.png
  • harvardhomepage/images/faust.png
  • harvardhomepage/images/research.png
  • harvardhomepage/images/bullet-whiteoncrimson.png
  • harvardhomepage/images/bullet.png
  • harvardhomepage/images/multimedia.png
  • harvardhomepage/images/events.png
• CSS
  • harvardhomepage/custom.css
  • harvardhomepage/reset-fonts-grids/reset-fonts-grids-min.css

Results on Many Browsers

Services

• Overview article: Browser Tests, Services and Compatibility Test Suites
• Specific Service: BrowserShots.org

Do it yourself

• Capture Screen/Window
• SnagIt Capture
• Pearl Crescent PageSaver for Firefox

Results for Harvard Makeover

• Screenshots for different browsers, from BrowserShots.org

The above uses "Thickbox", which is a UI widget written in JavaScript that is built on jQuery and uses AJAX. Uses: jquery.js, thickbox.js, thickbox.css.

JavaScript: Manipulate the Page

JS can be used to manipulate CSS properties.

Note the use of event attributes (onclick, onmouseover, onmouseout) as well as a javascript: protocol in an href value.

Exposing Additional Form Elements

Additional relevant form elements are exposed based upon user input. Here, this is achieved by having the entire form in the markup, with a certain section hidden via CSS (display: none;). If "Yes" is chosen, the display property is changed to "block" through JS.

Tabs with jQuery

Tab Plugin for jQuery allows the easy creation of tabs from simple markup.

• Accessible, Unobtrusive Javascript Tabs wtih jQuery
  • Demos

Without JS and CSS:

With JS and CSS:

• Example: tabs.html

Markup:

JS:

A Calendar Widget

jQuery has plugins that will provide an unobtrusive "calendar" widget for picking dates.

Example: date_picker.html

Markup:

JS:

Slideshow: Thickbox

ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.

A gallery with no JavaScript -- thumbnail images are linked to the full-sized image with a simple
<a href="full/a.png"><img src="thumb/a.png"/></a>:

Thickbox

Example: Gallery with Thickbox

Add Thickbox and give the "a" elemnts a class="gallery":

Gallery

Viewing an individual image:

Example Galleries with Lightbox, Lightbox 2, and Thickbox

View example galleries implemented in Lightbox and Lightbox 2 (using Prototype/Scriptaculous) as well as Thickbox (using jQuery).