Cascading style sheets (css)

© 2007 Triune Group
Insight. Strategy. Performance.
Cascading Style Sheets (CSS)
An Introduction
Chris Poteet

Definition
• Cascading Style Sheets (CSS) form the
presentation layer of the user interface.
– Structure (XHTML)
– Behavior (Client-Side Scripting)
– Presentation (CSS)
• Tells the browser agent how the
element is to be presented to the user.

Why CSS?
• CSS removes the presentation attributes from
the structure allowing reusability, ease of
maintainability, and an interchangeable
presentation layer.
• HTML was never meant to be a presentation
language. Proprietary vendors have created
tags to add presentation to structure.
– <font>
– <b>
– <i>
• CSS allows us to make global and
instantaneous changes easily.

The Cascade
• The power of CSS is
found in the “cascade”
which is the combination
of the browser’s default
styles, external style
sheets, embedded,
inline, and even user-
defined styles.
• The cascade sets
priorities on the
individual styles which
effects inheritance.

CSS Inheritance
• Allows elements to “inherit” styles from
parent elements.
• Helpful in reducing the amount of CSS to
set styles for child elements.
• Unless a more specific style is set on a
child element, the element looks to the
parent element for its styles.
• Each style has a numeric specificity value
that is given based on its selector.

Using Style Sheets
• External Style Sheet
<link rel=“stylesheet” type=“text/css” href=“location.css” />
– Also a “media” descriptor (screen, tv, print, handheld, etc)
– Preferrd method.
• Embedded Styles
<style type=“text/css”>
body {}
</style>
• Inline Styles
<p style=“font-size: 12px”>Lorem ipsum</p>

CSS Syntax
selector/element {
property: value;
}
The selector can either be a grouping of
elements, an indentifier, class, or single
XHTML element (body, div, etc)

Type (Element) Selector
Specify the style(s) for a single XHTML
element.
body {
margin: 0;
padding: 0;
border-top: 1px solid #ff0;
}

Grouping Elements
Allows you to specify a single style for
multiple elements at one time.
h1, h2, h3, h4, h5, h6 {
font-family: “Trebuchet MS”, sans-serif;
}

The Class Selector
<p class=“intro”>This is my introduction text</p>
.intro {
font: 12px verdana, sans-serif;
margin: 10px;
}

The Identifier Selector
<p id=“intro”> This is my introduction text</p>
#intro {
border-bottom: 2px dashed #fff;
}

CSS Selectors
• Identifier or class? What’s the
difference?
– An identifier is specified only once on a
page and has a higher inheritance
specificity than a class.
– A class is reusable as many times as
needed in a page.
– Use identifiers for main sections and sub-
sections of your document.

Advanced CSS Selectors
• Descendant Selector
body h1 { }
#navigation p {}
• Adjacent Sibling Selectors
p.intro , span {}
• Child Selectors
div ol > p {}
• Universal Selector
* {}
• Attribute Selectors
div[href=“http://home.org”]
• Pseudo-Class Selectors
a:active {}
#nav:hover {}

The Box Model
• Every element in the
DOM (Document
Object Model) has a
conceptual “box” for
presentation.
• The box consists of
margin, padding,
border, content
(width, height), and
offset (top, left)

CSS and Semantic Web
• CSS aids in increasing the semantic value of
the web content.
• Increasing the semantic value of content aids
in accessibility, and it is integral in the move
away from (X)HTML to XML driven
applications.
• An example would be using an unordered list
for navigation instead of a table.
– Navigation is truly a “list” of information and not
tabular data.

CSS Browser Acceptance
• The advent of modern browsers (IE 5.5+,
Firefox 1.5+, Safari 2+, Opera) has
eliminated the fear of effectively utilizing
CSS.
• There remain certain selectors and
attributes that vary in browser
acceptance, but IE7, FF 2, Safari 3 all
accept the CSS 2.1 specification.
• There no longer remains any excuse not to
utilize CSS in your application.

CSS Fonts
• Font-family
• Font-weight
• Font-style
• Font-size

CSS Units & Colors
• Units
– %
– in
– cm
– mm
– em
– px
– pt
• Colors
– color name (red, etc)
– rgb(x,x,x)
– #rrggbb (HEX)

CSS Layout
• Margin
• Padding
• Border
• Z-index
• Positioning
• Width
• Height
• Float
• Text-align
• Vertical-align

CSS vs Table Layouts
• Tables are designed only for tabular data
and not for layout.
– Reduces semantic value of markup
– Makes updating difficult and impractical
• CSS allows positioning that reduces
overall markup size, form, and allows
layout to be changed by only editing a
stylesheet.
• CSS layouts also improve accessibility,
because screen readers turn off style
sheets allowing only the content to
remain.

CSS Text
• Text-indent
• Text-align
• Text-decoration
• Letter-spacing
• Text-transform
• Word-spacing
• White-space

CSS Background
• Background-color
• Background-image
• Background-position
• Background-repeat

CSS Lists
• List-style
• List-style-image
• List-style-position
• List-style-type

CSS Shorthand
• Consolidates many styles into a single declaration.
font-family: verdana, sans-serif;
font-weight: bold;
font-size: 12px;
 font: bold 12px verdana, sans-serif;
padding-top: 5px;
padding-right: 8px;
padding-bottom: 5px;
padding-left: 10px;
 padding: 5px 8px 5px 10px;

CSS and Accessibility
• Section 508 Standards
– “Web pages shall be designed so that all information conveyed with
color is also available without color, for example from context or
markup.” (1194.22C)
– “A text-only page, with equivalent information or functionality, shall
be provided to make a web site comply with the provisions of this
part, when compliance cannot be accomplished in any other way. The
content of the text-only page shall be updated whenever the primary
page changes.” (1194.22K)
• By moving all presentation into style sheets and removing
tables from layout the content is presented in an optimal
manner to screen readers and other accessibility tools.
• CSS 2.1 has “aural” properties that can be applied to
content.

Recommendations
• Remove antiquated browser checks and deliver different
sheets.
• Consolidate all our main styles into site.css in the
App_Themes folder.
• All CSS files should be in the App_Themes folder and have
a .css extension (not .txt).
• Make a decision on what standard colors, fonts, alignment,
etc should go into the app.
• Remove spacer.gifs, table layouts, and other browser hacks
in lieu of proper CSS.
• Make a decision on how individual modules should implement
their styles.
• Make a decision on how the CSS file is to be structured.
• Move inline presentation formatting to CSS external sheets.

CSS Resources
• CSS2 Reference
• CSS Units
• CSS Colors
• Tableless Forms
• Preparing your CSS for Internet Explorer 7
• CSS Tinderbox (CSS Layouts)
• Approx Conversion From pts to px
• CSS 2 Cheat Sheet
• CSS Shorthand Guide

Questions?

Cascading style sheets (css)

More Related Content

Viewers also liked (18)

Similar to Cascading style sheets (css) (20)

Recently uploaded (20)

Cascading style sheets (css)