cascading style sheets css. standard defined by the w3c css1 (released 1996) 50 properties css2...
TRANSCRIPT
Cascading Style Sheets
CSS
CSS
Standard defined by the W3C CSS1 (released 1996) 50 properties CSS2 (released 1998) 150 properties
(positioning) CSS3 (in development)
CSS2 Well supported by most modern browsers
CSS
Allows you to separate the structure of a page
from the presentation
Presentation = displayed/delivered
Presentation and formatting of content is defined
by the CSS rules
Structure & meaning is handled by XHTML
Before CSS, if you wanted all of your text to be
blue, you might assign a blue value to all of the
color tags one-by-one in the XHTML.
CSS - Benefits
Offers more control Type: control line spacing, and type size;
Rollovers: create rollover effects that don’t require images and javascript; Layout: you can layout entire pages
Less work: one css file can style an entire site (100s of pages)
Smaller files / faster downloads (no redundant styling tags & nested tables)
More accessible (meaningful content) Improved browser support
CSS
Structural Layer - Meaningful markup (XHTML)
accurately describe the meaning of content with XHTML tags
Presentation Layer - CSS Style Rules
describing how an element should look (selectors &
declarations)
Attach them: Structural Layer + Presentation Layer
External, Embedded, Inline
CSS - Rule Structure
Separate language with its own syntax
2 Parts
Selector: Selects the element to be affected
Declaration: “declares” a style for an selected element
Declaration block: property & value
CSS - Structure
Declaration block
Property: identifies what to change
Value: how to change it
Selector – example
h1{
font-size: small;
font-family: Georgia, ‘Times New Roman’, Times, serif;
color: #CC3300;
margin-top: 4em;
margin-bottom: 10em;
}
Types of Style Sheets
External (linked) Most powerful
A single style sheet can format hundreds of pages
(linked to each page)
To make changes – update the external style sheet
all page that are linked to it are updated.
Types of Style Sheets
External
Not part of the XHTML document
Saved in a separate .css file
You create a link from your XHTML
document to the .css file
<link rel = “stylesheet” href=“mystyles.css” type=“text/css”/>
Types of Style Sheets
Embedded
Embedded into the XHTML document (an internal
part of the XHTML)
All code placed inside the <head> tag
Affects only the one page its embedded in
<style type = “text/css”>
<!--
h1{color:red; font-family: Arial;}
-->
</style>
Types of Style Sheets
Inline Used when you need to override some other style
defined in an embedded or external style sheet
Part of the XHTML document
Less powerful
Usually used only to override other styles or when
you have an exception to a rule
Types of Style Sheets
InlinePart of the XHTML document
Written as an attribute of the tag
<body>
<h1 style=“color:red; font-family:arial”> Text is here.
</h1>
</body>
CSS - The Cascade
Inheritance (parents, children, ancestors, siblings)
All XHTML elements are contained within one another
Children inherit properties from a parent (Ex: if font-family:
“helvetica” is applied to the <body> tag, all children (<p>,<h1>,
<em>, etc) will be helvetica as well.
CSS - The Cascade
Cascade
System of hierarchy that determines which rules will be followed when
several sources of style info is assigned to the same elements
Style Sheet Hierarchy (the closer the style is to the content the more
weight it is given)
Browser default
User Settings (reader style sheets)
External Style Sheets (linked, then imported)
Embedded Style Sheets
Inline Style Sheets
Author !important
Reader !important
CSS - The Cascade
Cascade
System of hierarchy that determines which rules will be followed when
several sources of style info is assigned to the same elements
Style Sheet Hierarchy (the closer the style is to the content the more
weight it is given)
Browser default
User Settings (reader style sheets)
External Style Sheets (linked, then imported)
Embedded Style Sheets
Inline Style Sheets
Author !important
Reader !important
Meaningful Markup
<div>…</div>
Generic Elements
<div>…</div>
Generic block-level element
<span>…</span>
Generic inline element
Name them using id or class
div
<div>…</div>
Used like a container to group content
Gives context to the elements in the grouping
Give it a descriptive name with id or class
Ex: <div class=“products”> can be used to group an
<img> with <p> to show they are conceptually related
Ex: <div id=“news”> can be used to group a section of
content for context, structure or layout purposes.
span
<span>…</span>
Generic inline element
Used to add meaning to content
Ex: <ul>
<li> Andy: <span
class=“phone”>123.4567</span></li>
<li> Joe: <span
class=“phone”>101.0101</span></li>
</ul>
Element identifiers - id
Id identifier
Used to identify a piece of data
Unique element in the document
Value of id must be used only once in a document
<div id=“header”> (masthead & navigation here)</div>
<div id=“main”> (main content elements here) </div>
<div id=“links”>(list of links here)</div>
<div id=“news”>(news sidebar items here)</div>
<div id=“footer”>(copyright info, etc)</div>
Element identifiers - class
class identifier
Used to group similar elements
Multiple elements may share a class name
<div class=“listing”>
<img src=“book.gif” alt=“name” />
<p><cite>The Complete Manual of
Typography</cite>, James Felici</p>
<p>A combination of type history and examples of
good and bad type.</p>
</div>
<p class=“description”>A combination of type history and examples of good
and bad type.</p>
Type Selectors
Used to redefine a specific XHTML tag
body, td, th{
font-family: Verdana, Arial, Helvetica,
sans-serif;
font-size: 2em;
color: #33CCFF; }
Descendant Selectors
Targets elements that are contained within
another element
Ex: li em { color: silver; }
targets emphasized text only when it appears in a list
item (li)
Ex: ol a em { font-varient: small-caps; }
ID Selectors
Targets elements by their id value
Used to style a specific element in a site or group of pages
#divSidebar{
margin-left: 10 px;
text-align: center;
}
In your XHTML document you’d need the following:
<div id=“divSidebar”> This is the sidebar area of the page. </div>
Ex: In the xhtml file: <li id=“nameofstyle”> Item #1 in list </li>
In the .css - #nameofstyle {color:red;}
Class Selectors
Used to “classify” elements into a conceptual
group
Multiple elements can share a class name
Used to specify a custom selector name and
apply that style to an XHTML element
Ex: In your .css file:
.smallprint {font-size: 10px;}
In your XHTML document:
<p class=“smallprint”> This is small
text. </p>
Hierarchy of Selectors
Most to least specific
ID Selectors
Class Selectors
Contextual Selectors
Individual Element Selectors (type selectors)
Pseudo-Class Selectors
Used to describe the state of an
element. Assigns a style that happens
when an object is a certain state
A:hover{
text-decoration:none;
color: #33CC33
Pseudo-Class Selectors
Common Pseudo-Classes
:link- A style applied to an element that has not
yet been visited
:visited – A style applied to an element that has
been visited
:hover – A style applied to an element when a
mouse hovers over it (link)
:active – A style applied to an element when the
user clicks or activates the element
Resources
Niederst, J. (2007). Learning Web Design. O'Reilly Meida, Inc.Chapter 11: Cascading Style Sheets Orientation
Andrew, R. (2007). CSS Anthology. Sitepointhttp://www.sitepoint.com/books/cssant1/
Meyer, E. (2006). CSS Web Site Design. PeachpitPress
Eric Meyer: http://meyerweb.com/eric/writing.html
Let’s see how this works…