Enhanced Web Site Design

Stanford University Continuing Studies CS 22

Mark Branom
markb@stanford.edu
http://www.stanford.edu/people/markb/

Course Web Site:

http://www.stanford.edu/group/csp/cs22

CS 22: Enhanced Web Site Design - Cascading Style Sheets Slide 1 (of 54)
 Cascading Style Sheets

• Unfinished business

• Cascading Style Sheets

CS 22: Enhanced Web Site Design - Cascading Style Sheets Slide 2 (of 54)
 What are Cascading
Style Sheets?

• Cascading Style Sheets (CSS) are

rules. Each rule consists of a
selector and a declaration (which,
in turn, is made up of a property
and a value). They were
established by the World Wide Web
Consortium (W3C). CSS rules
control the look (Style) of web
pages or XML files by providing
central locations (Sheets) where
HTML or XML tags are interpreted
by the browser.

CS 22: Enhanced Web Site Design - Cascading Style Sheets Slide 3 (of 54)
 What are Cascading
Style Sheets?

• Why the term “cascading”? In CSS,

multiple styles can be applied to a
particular document (usually a web page
or XML file). The browser will interpret
these styles in a top-down (Cascading)
fashion:
– Style rules set up site-wide are overridden
by styles located within individual pages.
– Style rules located within individual pages
are overridden by styles inside an individual
tag.
– In addition, the end user can set up styles in
the browser that will override the author’s
styles.

CS 22: Enhanced Web Site Design - Cascading Style Sheets Slide 4 (of 54)
 What are Cascading
Style Sheets?

• All matching rules for a particular

selector will be applied, except
where they conflict with each other.
If rules are in conflict, the last rule
to be declared is applied. In the
following example, <h2> tags
would be displayed in red and
italics (but not blue):
h2 {font-style: italic;}
h2 {color: darkblue;}
h2 {color: red;}

CS 22: Enhanced Web Site Design - Cascading Style Sheets Slide 5 (of 54)
 What are Cascading
Style Sheets? continued

• To properly see the effects of CSS,

visitors to your site need to use a
web browser that is version 4.0 or
newer. Fortunately, viewing web
pages with CSS in an older browser
does not cause web pages to break
-- but the styles won’t appear as
defined. Since most people use
Internet Explorer 6, Netscape 7,
Firefox or a newer browser, most
pages with CSS will be properly
displayed.

CS 22: Enhanced Web Site Design - Cascading Style Sheets Slide 6 (of 54)
 What are Cascading
Style Sheets? continued

• CSS-aware browsers apply their own stylesheet

for every HTML element as the first set of rules in
the cascade. This set of rules forms the default
display for every element. For example, most
browsers treat the <p> tag as a block element, as
though there were the explicit declaration
p { display: block;}
• By using CSS, you override these implicit styles
with an explicit declaration.
• By using CSS, you can also:
– control text formatting
– control location on the page
– eliminate the need for tables as a layout tool
– create logos using just text, instead of having to rely on
graphics

CS 22: Enhanced Web Site Design - Cascading Style Sheets Slide 7 (of 54)
 What are Cascading
Style Sheets? continued

• CSS Specifications:
– CSS 1: http://www.w3.org/TR/REC-CSS1-
961217.html
– CSS 2: http://www.w3.org/TR/CSS2/
– CSS 2.1: http://www.w3.org/TR/CSS21/
• For more detailed, technical discussions of the
differences between CSS 1, CSS 2, and CSS 2.1, go
to the following:
– Between CSS 1 and CSS 2:
http://www.w3.org/TR/CSS2/changes.html
– Between CSS 2 and CSS 2.1:
http://www.w3.org/TR/CSS21/changes.html

CS 22: Enhanced Web Site Design - Cascading Style Sheets Slide 8 (of 54)
 Pros and Cons of Using
CSS

• Pros
– Greater designer control of the appearance of the
page
– Easier management of site-wide changes
– Greater accessibility to web sites by non-graphical
browsers and web-page-reading software

• Cons
– Different browsers may interpret Style Sheets in
different ways
– Some styles may not be seen at all on some
browsers

CS 22: Enhanced Web Site Design - Cascading Style Sheets Slide 9 (of 54)
 CSS Examples
• The CSS Zen Garden shows some of the most advanced uses
of CSS:
http://www.csszengarden.com/

• CSS in the real world: ajc.com's 'News Break'

http://www.holovaty.com/blog/archive/2002/09/28/2340

• Web Standards Tech Briefing – with CSS:

http://techbriefings.stanford.edu/web_standards/example1.html

• Web Standards Tech Briefing – without CSS :

http://techbriefings.stanford.edu/web_standards/example2.html

CS 22: Enhanced Web Site Design - Cascading Style Sheets Slide 10 (of 54)
 CSS Basics

• Under standard HTML, to create a web site with

<h2> tags that have the standard features of a
Header tag (that is, their own paragraph, bold,
with a size change) and also are dark blue, you
have to code each one as follows:
<h2><font color="darkblue">This is a
darkblue H2 tag</font></h2>

• That’s a lot of information to type every time

you want to use a dark blue <h2> tag. Using
CSS, all you need to do is type a regular <h2>
tag. The style information will be included in
the Style Sheet as follows:
h2 { color: darkblue;}

CS 22: Enhanced Web Site Design - Cascading Style Sheets Slide 11 (of 54)
 CSS Rules

• To change the color of ALL <h2> tags from darkblue to

green, simply change the called-for color to “green.” The
next time anyone sees the site, all the <h2> tags on all
the pages will be displayed as green instead of darkblue.
• These styles are called rules. Each rule consists of a
selector and a declaration (which is made up of a
property and a value).
• In the example below, h2 is the selector, color is the
property, and darkblue is the value. When used with web
pages, selectors are usually HTML tags.
h2 { color: darkblue;}
• Syntax for a CSS rule:
selector { property: value; }

CS 22: Enhanced Web Site Design - Cascading Style Sheets Slide 12 (of 54)
 Grouping Styles and
Selectors

• Styles can be grouped:

– Using multiple styles
– Using multiple selectors
– Using contextual selectors
– Using direct child selectors
– Using adjacent selectors
– By attribute

CS 22: Enhanced Web Site Design - Cascading Style Sheets Slide 13 (of 54)
 Grouping Styles and
Selectors

• Each rule can include multiple

styles using semicolons to separate
them:
h2 { color: darkblue;
font-style: italic;}

• Additionally, multiple selectors that

have the same styles can be
grouped using commas to separate
them:
h1, h2, h3 { color: yellow; }

CS 22: Enhanced Web Site Design - Cascading Style Sheets Slide 14 (of 54)
 Grouping Styles and
Selectors

• Contextual selectors allow you to specify

that something will occur when it is used
in conjunction with something else. In
the style below, strong will be
displayed in red, but only when it occurs
within li within ul.
ul li strong { color: red;}

Elements being modified by contextual

selectors need not appear immediately
inside one another. For example, using
this style, blah would still be red text:
<ul><ol><li><strong> blah
</strong></li></ol></ul>

CS 22: Enhanced Web Site Design - Cascading Style Sheets Slide 15 (of 54)
 Grouping Styles and
Selectors

• Direct child selectors allow you to

specify that something will change,
but only when immediately inside of
another element. With the
following style, only those
strong elements that are directly
inside of an h1 will be purple. No
strong tags deeper within the
sheet will be purple.
h1 > strong { color: purple;}

CS 22: Enhanced Web Site Design - Cascading Style Sheets Slide 16 (of 54)
 Grouping Styles and
Selectors

• Adjacent selectors allow you to specify that

something will change only when preceded
by something else. In the style below, only
those links (a) that are preceded by an h2
will be green.
h2 + a { color: green;}
Elements being modified by adjacent
selectors appear immediately after one
another. Using this style, this link would be
green:
<h2>Visit Stanford!</h2>
<a href="http://www.stanford.edu">click
here</a>

This link would not:

<h2>Visit Stanford!
<a href="http://www.stanford.edu">click
here</a></h2>

CS 22: Enhanced Web Site Design - Cascading Style Sheets Slide 17 (of 54)
 Grouping Styles and
Selectors

• You can also group

selectors by attribute. With
the style below, text that is
centered using h2 tags
(<h2 align="center">)
display surrounded by a
dotted border:
h2[align="center"]
{ border: dotted;}

CS 22: Enhanced Web Site Design - Cascading Style Sheets Slide 18 (of 54)
 Where do you put the
styles?

• Style information can be located:

– Externally to the pages in a site, in a separate file
– Internally to each page
– Inline with individual tags
• Generally, creating an external style sheet file
is the preferred method. To take full advantage
of CSS, the Style Sheet for a site should be in
an external file, so that any changes made
there will apply throughout the site. This also
means that only one style document has to be
downloaded for a single site (making the pages
load faster).

CS 22: Enhanced Web Site Design - Cascading Style Sheets Slide 19 (of 54)
 Style Location: External

• The most common place to put style

information is in an external document that
each page of a web site points to directly.
• Any changes made to this single document will
then be applied throughout the entire web site
as each page is accessed by users.
• External Style Sheets have a .css extension.

CS 22: Enhanced Web Site Design - Cascading Style Sheets Slide 20 (of 54)
 Style Location: External

• When linking to an external style sheet, you can also

specify separate style sheets by media type:
– all - Suitable for all devices.
– aural - Intended for speech synthesizers.
– braille - Intended for braille tactile feedback devices.
– embossed - Intended for paged braille printers.
– handheld - Intended for handheld devices (typically small
screen, monochrome, limited bandwidth).
– print - Intended for paged, opaque material and for
documents viewed on-screen in print preview mode.
– projection - Intended for projected presentations.
– screen - Intended primarily for color computer screens.
– 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.

CS 22: Enhanced Web Site Design - Cascading Style Sheets Slide 21 (of 54)
 External example

Text that appears in the basic.css style sheet document:

h2 {font-family: sans-serif; font-style: italic; color: #0f0;}
p {font-family: monotype; font-style: bold; color: red; }

Text that appears in the print.css style sheet document:

h2 {font-family: Book Antiqua, serif; font-style: italic; }
p {font-family: Courier, monotype; font-style: bold; }

HTML document, using the <link> HTML document, using the

method @import and @media method

<head> <head>

<link rel="stylesheet" <style type="text/css">

type="text/css" href="basic.css"
media="all" /> <!--

<link rel="stylesheet" @import url("basic.css") all;

type="text/css" href="print.css"
media="print" /> @media url("print.css") print;

</head> -->

</style>

</head>

CS 22: Enhanced Web Site Design - Cascading Style Sheets Slide 22 (of 54)
 Style Location: Internal

• Style information can also be included in the

<head> section of an individual web page. This
tends to work best when a single page needs to
have a slightly different look than the rest of the
site.

CS 22: Enhanced Web Site Design - Cascading Style Sheets Slide 23 (of 54)
 Style Location: Inline

• For extreme control, style information can be

included in an individual tag. The style effects
only that tag and no others in the document.
This option is most useful for those rare
occasions when a single tag needs to have a
slightly different style.

CS 22: Enhanced Web Site Design - Cascading Style Sheets Slide 24 (of 54)
 Hierarchy of Styles

• When style information for one site is located in all three

places, the hierarchy is as follows:
– External Style Sheets affect the entire site.
– Internal styles affect only their own pages and override
external styles.
– Inline styles affect only their own tags and override both
internal and external styles.

• For example, if an external Style Sheet sets <h2> tags

to purple and a particular page has an internal style that
changes that color to orange, the <h2> tags will be
orange only on that page and nowhere else in the site. If
there is a single <h2> tag on that page which specifies
green as its color, then the color for that one tag will be
green. All other <h2> tags on that page would be
orange; the <h2> tags on the rest of the site would be
purple.

CS 22: Enhanced Web Site Design - Cascading Style Sheets Slide 25 (of 54)
 !important

• Normally, the last rule listed in the cascade will take

precedence over previous rules. In this example, the
body font will be Verdana, not Times.
body {font-family: Times;
font-family: Verdana;}
• However, by entering !important in a rule, that rule
will take precedence, regardless of its location. In this
example, the body font will be Times, not Verdana.
body {font-family: Times !
important;
font-family: Verdana;}

Note: !important does not work with all properties in Internet

Explorer 6.

CS 22: Enhanced Web Site Design - Cascading Style Sheets Slide 26 (of 54)
 Classes and IDs

• HTML has two attributes that make CSS even more

useful: class and ID. They make it easy to apply style to
just about any tag.
• Classes can describe a generic style that can be applied
to any HTML element, or can be created for specific
elements.
• When defining a style for elements with a particular class
attribute in the Style Sheet, declare a rule using a dot (.)
followed by the class name. To limit the style to a
particular element with that class attribute, use a selector
combining the tag name with a dot followed immediately
by the class name.
– The following rule would apply to any element with the
attribute class=“shade"
.shade { background: yellow; }
– The following rule would apply only to paragraph tags with
the class shade (<p class="shade">)
p.shade { background: red; }

CS 22: Enhanced Web Site Design - Cascading Style Sheets Slide 27 (of 54)
 Classes and IDs

• IDs are similar to classes, but IDs are unique –

they can only be used with one instance of an
element within a document.
• When defining a CSS rule using an ID-based
selector, use a number/pound/hash sign (#)
followed by the style name. To limit the style to
a particular element with that ID attribute, use a
selector combining the tag name with a # and
then the ID name.
– The following rule would apply to any element with
the attribute id="intro"
#intro { font-size: 2em; }
– The following rule would apply only to heading 1 tags
with the id intro (<h1 id="intro">)
h1#intro { color: green; }

CS 22: Enhanced Web Site Design - Cascading Style Sheets Slide 28 (of 54)
 Example: Class

• Here’s an example of a web page with an

internal CSS style containing a class called
“highlight”:

CS 22: Enhanced Web Site Design - Cascading Style Sheets Slide 29 (of 54)
 Inline vs. Block Display
(HTML)

• All HTML elements (tags) are assigned a

display property value of either inline or block.
• Inline elements display in browsers horizontally.
[INLINE ELEMENT 1] [INLINE ELEMENT 2] [INLINE ELEMENT 3]

• Block elements display in browsers vertically

(stacked one on top of the other).
[BLOCK ELEMENT 1]
[BLOCK ELEMENT 2]
[BLOCK ELEMENT 3]

• Examples of inline elements:

<a> <img> <strong> <em> <span>

• Examples of block elements:

<p> <h1-h6> <div> <hr> <table>
<ul> <ol>

CS 22: Enhanced Web Site Design - Cascading Style Sheets Slide 30 (of 54)
 Inline vs. Block Display
(CSS)

• Using CSS, you can change the inherent

display property:
– To force a block display, use the declaration
display: block;
– To force an inline display, use the declaration
display: inline;
– To force a list, use the declaration
display: list-item;
– To hide elements matching the selector, use the
declaration
display: none;

CS 22: Enhanced Web Site Design - Cascading Style Sheets Slide 31 (of 54)
 Example – display:
block;
• Normally, <a> tags display inline.

• But, by changing the style of the a tag with

a {display: block;}, they will display as
a vertical navigation menu:

CS 22: Enhanced Web Site Design - Cascading Style Sheets Slide 32 (of 54)
 Example – display:
inline;

• Normally, the heading tags display in block format:

• To have them display inline, add the style

h1,h2,h3 {display: inline;}:

CS 22: Enhanced Web Site Design - Cascading Style Sheets Slide 33 (of 54)
 Span and Div

• There are two tags that are particularly useful

when using CSS: <span> and <div>.
They are both container tags that have minimal
formatting associated with them.
• The <span> tag is an inline element that
simply holds text without doing anything special
to it.
• The <div> tag is a block element and causes
the text it encloses to start on a new line.
• Using <span> and <div> tags in
conjunction with classes and IDs allows for
great flexibility in creating pages.

CS 22: Enhanced Web Site Design - Cascading Style Sheets Slide 34 (of 54)
 Example: SPAN, DIV,
Class, and ID

• Here’s an example of a web page using a

class, an id, and the span and div tags:

CS 22: Enhanced Web Site Design - Cascading Style Sheets Slide 35 (of 54)
 Unit Measurements

• In CSS, you can measure units

either in absolute values or in
relative values.
• Absolute values are fixed, specific
values. Since they are exact
measurements, they allow the
designer complete control over the
display of the web pages.
mm, cm, in, pt, pc, xx-small,
x-small, small, medium,
large, x-large, xx-large

CS 22: Enhanced Web Site Design - Cascading Style Sheets Slide 36 (of 54)
 Unit Measurements

• Relative values have no fixed, specific

values, and are calculated in comparison
to something else (usually the size of the
default font or line size). Because
different computers have different video
cards, screen sizes, and users have
differing eyesight abilities, relative values
tend to be a better choice. They give the
designer less absolute control but it often
creates a better experience for the
visitor.
em, ex, px, larger, smaller, num
%

CS 22: Enhanced Web Site Design - Cascading Style Sheets Slide 36 (of 54)
 Unit Measurements
• Examples:
body { font-size: 12px; }
h1, h2, h3 { line-height: 200%;}

• Note – a warning about using percentages: if you use

percentages, and nest one element inside of another, the
percentages will be cumulative.

CS 22: Enhanced Web Site Design - Cascading Style Sheets Slide 36 (of 54)
 Font and Text Styling

When choosing a font, there are several things to keep in mind:

1. Not everyone has the same set of fonts.
2. If you use a font that the visitor doesn’t have, the page will display
in the default font (usually Times), unless you provide more
choices. To do this, add more than one font in your declaration,
and always end with the font family (serif, sans-serif, or
monospace):
font-family: Verdana, Arial, Helvetica, sans-serif
3. Documents designed to be printed tend to look better in Serif fonts
(Times, Georgia, Book Antiqua, etc.)
4. Documents designed to be viewed onscreen tend to look better in
Sans-serif fonts (Verdana, Arial, Helvetica, etc.)
To apply a font to the entire web page, modify the body tag:
body {font-family: Verdana;}
To apply a font to a specific section of text, create a class, and use
the span tag with that class:
.neatstuff {font-family: Comic Sans MS;}
<span class="neatstuff">This is in Comic
Sans</span>

CS 22: Enhanced Web Site Design - Cascading Style Sheets Slide 37 (of 54)
 Modifying List Elements

• In HTML, by default, unordered lists (<ul>) appear as

bullets and ordered lists (<ol>) appear as numbers.
• Using CSS, you can modify how list items appear (Internet
Explorer only recognizes the italicized values):
– Properties:
list-style, list-style-type, list-style-
image, list-style-position
– Values:
disc, circle, square, decimal, decimal-leading-
zero, lower-roman, upper-roman, lower-alpha,
upper-alpha, lower-greek, lower-latin, upper-
latin, hebrew, armenian, georgian, cjk-
ideographic, hiragana, katakana, hiragana-
iroha, katakana-iroha, none, url("url-of-
graphic.gif"), inside, outside
• Examples:
ul { list-style: disc; }
ol { list-style: upper-roman;}
li { list-style:
url("http://www.foo.com/images/blackball.gif");}
ul li { list-style-position: inside;}

CS 22: Enhanced Web Site Design - Cascading Style Sheets Slide 38 (of 54)
 The Box Model

• When a browser draws an object on a page, it places it

into an invisible rectangular space called a “bounding
box.”
• You can specify the size, look, and feel of the margins,
the padding, the border, and the contents of that
bounding box.
• Internet Explorer interprets CSS box styles differently
than most other web browsers.
• In CSS1, the width property is defined as the distance
between the left and right edges of the bounding box that
surrounds the element's content.
• Likewise, the height property is defined in CSS as the
distance between the top and bottom edges of the
bounding box.
• In Internet Explorer, however, the width and height
properties also include the border and padding belts that
surround the element's bounding box.

CS 22: Enhanced Web Site Design - Cascading Style Sheets Slide 39 (of 54)
 The Box Model: IE vs.
CSS

CSS Standard Internet Explorer

CS 22: Enhanced Web Site Design - Cascading Style Sheets Slide 40 (of 54)
 Pseudo-elements and
Pseudo-classes
• Pseudo-elements and pseudo-classes are special pre-defined
groupings used in CSS to deal with special situations that do
not exist in standard HTML. For example, under standard
HTML, there is no way to automatically change the look and
feel of the first letter or line of a paragraph. But the pseudo-
element :first-letter allows you to specify a style that
affects the first letter and the pseudo-element :first-
line allows you specify a style that affects the first line.
h1:first-letter { font-size: 200%; color:red;}
p:first-line { color: pink;}

• Under standard HTML, there is no mechanism to deal with

mouse movements. But with CSS, the pseudo-class :hover
can be used to change the style of a link. In this example,
a:hover is used to change the link color to red and the
underlining to disappear whenever a mouse hovers over links.
a:hover {color: #ff0000; text-decoration: none;)

• To change the style of links, use the pseudo-class :link

To change the style of visited links, use the pseudo-
class :visited
a:link {color: #00f; font-weight: bold;)
a:visited {color: purple; border: groove;}

CS 22: Enhanced Web Site Design - Cascading Style Sheets Slide 41 (of 54)
 Positioning

• Using CSS, you can place elements exactly on

a page using a technique called “positioning.”
Positioning is determined by an X axis and Y
axis. To specify a point on the screen, you can
use the X and Y coordinates for that point.
• There are several ways to specify position in
CSS: absolute, relative, fixed, inherit, and
static.
• The three most often used are absolute,
relative, and fixed.
• Internet Explorer 6 only recognizes absolute
and relative positioning.
• Internet Explorer 7 recognizes fixed positioning
in standards-compliance (strict HTML/XHTML)
mode.

CS 22: Enhanced Web Site Design - Cascading Style Sheets Slide 42 (of 54)
 Absolute, Relative, Fixed,
Inherit, and Static Positioning

• Absolute positioning defines the position of a given bounding

box from the top and left side margins of the web page. This
not only allows objects to be placed in an exact location, it also
allows objects to be placed one on top of another.
• Relative positioning defines the positioning in such a way that
elements are offset from the previous element in the HTML
code. This allows objects to be placed in relation to one
another.
• Fixed positioning defines the position of a given box relative to
the window and remains in its specified location even as the
content scrolls underneath it. This value does not work in
Internet Explorer 6 or earlier. In IE 7, the browser must be in
“standards-compliance mode”.
• Inherit positioning explicitly sets the value to that of the parent
(if the parent is position:absolute, the child will be
position:absolute; if the parent is position:fixed, the child will be
position:fixed).
• Static positioning is the default. It defines the position of a given
box essentially as an unpositioned element – it flows in the
normal rendering sequence of the web page.

CS 22: Enhanced Web Site Design - Cascading Style Sheets Slide 43 (of 54)
 Example:
position:absolute

CS 22: Enhanced Web Site Design - Cascading Style Sheets Slide 44 (of 54)
 Example:
position:relative

CS 22: Enhanced Web Site Design - Cascading Style Sheets Slide 45 (of 54)
 Example:
position:fixed (Code View)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML <div id="main">
1.0 Transitional//EN" <p>Lorem ipsum dolor sit amet, consectetuer
"http://www.w3.org/TR/xhtml1/DTD/xhtml adipiscing elit. Quisque ultrices, nibh
1-transitional.dtd"> ac rhoncus fermentum, orci sem dapibus
<html xmlns="http://www.w3.org/1999/xhtml"> nisi, sed tincidunt lectus lectus at
augue. In consectetuer vehicula enim. In
<head> hac habitasse platea dictumst. Donec a
<meta http-equiv="Content-Type" nisl vitae tortor tristique viverra. Sed
content="text/html; charset=iso-8859- at lorem a ante lobortis molestie.
1" /> Nulla ullamcorper urna accumsan diam.
Aliquam non eros. Pellentesque egestas
<title>Untitled Document</title> ultricies enim. Aenean lobortis. Nulla
<style type="text/css"> interdum commodo turpis. Sed ut mi id
<!-- elit vehicula sollicitudin. Sed lobortis,
ligula sit amet euismod egestas, mi
#links { ante iaculis nunc, ut rhoncus magna
position:fixed; lectus ac arcu. In hac habitasse platea
border:dotted; dictumst. Proin quis ligula vitae quam
pharetra adipiscing. Pellentesque
border-color:#000000; tincidunt suscipit nibh. Ut fermentum
width:20%; suscipit justo. </p>
height:100%; <p>Fusce purus lectus, ultricies nec, aliquam
at, facilisis id, arcu. Vestibulum quis
z-index:1; mi vel massa porta hendrerit. Nulla
left: 0px; ullamcorper ligula nec lectus. Quisque
top: 0px; tempor, augue in molestie gravida, eros
arcu luctus tortor, eu dignissim diam
background-color: #FFFFCC; urna sed urna. Ut dictum ultrices lacus.
} In hac habitasse platea dictumst.
#main { Suspendisse sed purus blandit metus
ultricies suscipit. Proin diam justo,
position:absolute; consequat id, rhoncus eget, facilisis ut,
left:25%; lacus. Vivamus dignissim dui in justo.
Suspendisse elit. Nam nulla tortor,
top:0px; fringilla sed, faucibus quis, ullamcorper
width:70%; a, leo. Fusce blandit condimentum
} turpis. Pellentesque vel odio et odio
suscipit egestas. Nullam ullamcorper
--> sagittis ipsum. Maecenas fringilla
</style> malesuada pede. Duis ut quam. </p>
</head> </div>
<body> <div id="links">
<p>This area is fixed and will never move.
It's good for things like navigation
bars.</p>
<ul>
<li><a href="page1.html">Page 1</a></li>
<li><a href="page2.html">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
<li><a href="page4.html">Page 4</a></li>
<li><a href="page5.html">Page 5</a></li>
</ul>
</div></body></html>

CS 22: Enhanced Web Site Design - Cascading Style Sheets Slide 46 (of 54)
 Example:
position:fixed (in Firefox)

CS 22: Enhanced Web Site Design - Cascading Style Sheets Slide 47 (of 54)
 Layers and the
Bounding Box

• When the browser draws an object on a page, it places it

into an invisible rectangular space called a “bounding
box.” You can set the box’s exact location on the page or
offset it from other objects on the page. As mentioned in
the previous slides, you can also specify the size of the
box.
• With CSS, these boxes can be stacked one on top of
another as layers. Horizontal and vertical positioning
happen along the X and Y axes, and the layered
positioning happens along the Z axis.
• The Z axis is set using the CSS style z-index, which
allows you to specify which layer appears on top of the
others. By setting the z-index higher or lower, an
object can move up and down a stack. The higher the
z-index, the more “on top” it is.

CS 22: Enhanced Web Site Design - Cascading Style Sheets Slide 48 (of 54)
 Layering Example 1

CS 22: Enhanced Web Site Design - Cascading Style Sheets Slide 49 (of 54)
 Layering Example 2

CS 22: Enhanced Web Site Design - Cascading Style Sheets Slide 50 (of 54)
 Float

• If you want to wrap content around other

content (such as text around a picture), you can
use the float property.

• The float property determines on which side

of the bounding box the element aligns so that
the other content wraps around it.

CS 22: Enhanced Web Site Design - Cascading Style Sheets Slide 51 (of 54)
 Float Example 1 – float:
right

CS 22: Enhanced Web Site Design - Cascading Style Sheets Slide 52 (of 54)
 Float Example 2 – float:
left

CS 22: Enhanced Web Site Design - Cascading Style Sheets Slide 53 (of 54)
 Resources
• A List Apart – articles on practical issues and suggestions for working with CSS correctly
http://www.alistapart.com/topics/code/css
• Example XHTML Pages, with and without the CSS Style Sheet:
http://techbriefings.stanford.edu/web_standards/example1.html
http://techbriefings.stanford.edu/web_standards/example2.html
http://techbriefings.stanford.edu/web_standards/example.css
• The CSS Zen Garden shows some of the most advanced uses of CSS:
http://www.csszengarden.com/
• CSS in the real world: ajc.com's 'News Break':
http://www.holovaty.com/blog/archive/2002/09/28/2340
• Microsoft's CSS Information:
http://msdn.microsoft.com/workshop/author/css/reference/
attributes.asp
• Microsoft's Style Sheet Demonstrations:
http://www.microsoft.com/typography/css/gallery/extract1.htm
http://www.microsoft.com/typography/css/gallery/slide1.htm
• W3C Style Examples
http://www.w3.org/Style/Examples/007
• W3C CSS 2.1 Specifications:
http://www.w3.org/TR/CSS21/
• W3Schools CSS Tutorial:
http://www.w3schools.com/css
• W3Schools CSS Reference:
http://www.w3schools.com/css/css_reference.asp
• Webmonkey’s Cascading Style Sheet Guide:
http://www.webmonkey.com/reference/stylesheet_guide/
• Brian Wilson’s Cascading Style Sheet Reference Guide:
http://www.blooberry.com/indexdot/css/index.html

CS 22: Enhanced Web Site Design - Cascading Style Sheets Slide 54 (of 54)