An Introduction to Cascading
Style Sheets - CSS
INLS 572 · Christie McDaniel
CSS
Cascading Style Sheets (CSS) is a style
language that you can use to define the visual
presentation (format) of a web page
Problem
- Bold or Italics?
Birth of CSS
1994 Hakon Lie
Accomplished through concept of cascade,
which allowed for multiple sets of style rules
and a well-defined system for determining
precedence
History of Recommendations
W3C CSS recommendations :
CSS 1 (1996)
CSS 2 (1998)
CSS 2.1 (2006)
CSS 3 (under development)
First browser implementation of CSS
Opera [BBC article]
Internet Explorer 3.0 (1996)
Why CSS?
Increased accessibility
Improved performance
Decreased production work
The „Cascade‟
Part of the power of CSS is that there can be
multiple style sheets
When there are multiple style sheets, the
browser will give sheets greatest weight in
descending order:
(1)Author Preferences
(2)User Preferences
(3)Browser Capabilities
Advantages of CSS
Having separated content from presentation
The ability to add some semantic information –
better than a table!
Enabled use of different style sheets
Works today and provides enough information to
convert to XML later
Disadvantages of CSS
Elements do not convey information
It looks awful on non-CSS browsers; but they all
pretty much should support CSS now – it is a W3C
standard
It subverts the original intentions of XHTML
It also discards the information to make it fit.
Where does the CSS go?
Inline Styles (BAD)
deprecated
Embedded Styles (NOT GOOD)
in the
External Styles (BEST)
asits own document with .css extension
Name of your CSS file
Style Sheet Location
1. Inline Styles
Internet
Applications
Instead of
Doc Content
Do this
Doc
Content
Inline styles most like html
Inline styles are limited and have been
deprecated
Style Sheet Location
2. Embedded Style Sheets
Embedded in tag as
Embedded Style Sheets -
element has five possible attributes, type is
Style
required
Type – always use text/css. In the future, there will be
more options of style sheet languages.
Media – specifies the destination medium for the
styles within tags.
Title – provides meta information
Lang – used to override the default document‟s base
language
Dir - used to override the document‟s base text
directionality
Media – specifies destination medium
Screen – nonpaged computer screens (default)
Tty – portable devices with limited display capabilities
Tv – television-type devices
Projection - projectors
Handheld – handheld devices (small screens)
Print - printers
Braille – Braille feedback devices
Embossed – for paged Braille printers
Aural – speech synthesizers
All – EVERYTHING! (All of the Above)
Embedded Style Sheet
Embedded Stylesheet Example
body {
background-color: yellow;
color: red;
}
h1{
background-color: blue;
color: white;
}
External Style Sheet
Style is specified in an external file that has the
.css extension All pages within a single site can
point to the file for formatting information
Two Ways Add an External Stylesheet
.css file attached to .html file via :
1. element
rel attribute
2. @import directive
@import
@import url(“stylesheet.css”) screen;
@import url(“printstylesheet.css”) print;
Alternate, Persistent, and Preferred Stylesheets
Alternate Stylesheets
Multiple stylesheets for a single document
Supported by Mozilla and Netscape 6+
In the future their use will be widespread
Specify the value in the link tag‟s „rel‟ attribute:
Alternate stylesheets must specify a title
Preferred Stylesheets
Used to style the markup when the page is first
loaded by the browser
Only ONE preferred
Persistent Stylesheets
Persistent stylesheets are used in conjunction with
whichever preferred stylesheet and alternate
stylesheet is currently used on the page.
Don‟tgive it a title; the browser will interpret it as
preferred
Implementation
Analyzing Your Document
Designing Semantics
What layout should you choose?
There are methods!
Top-Down Document Analysis
Bottom-Up Document Analysis
Top-Down Analysis
Identify document-level semantics
Memo Example
Who it‟s from
Who it‟s addressed to
What the memo is about
When the memo was sent
A salutation
A body, which might contain several paragraphs
A closing
Some information about who typed it up and who dictated it
Top-Down Questions
What do you plan to do with the information
Should it be styled differently
Is it worth the extra effort to define such a
document in a strict, formal way?
How do you plan to nest (or relate) components
within a larger context?
How should the look on the site? What NEEDS to be
different?
Bottom-Up Analysis
Use bottom-up when MANY elements of the top-
level structure are unknown
Work with what you know
Good for dynamic information
Example: Online Catalog
Disadvantage: takes more time and many more
iterations to optimize your design rules
Naming Your Tags
Defining things in CSS
Class
ID
Comment, Comment, Comment
Challenges
Challenges with Naming Conventions:
Audience
Uniqueness
Conflicts
Precision
Scope
Purpose
Cultural
Other concerns – leftnav is actually a bad idea
Legal chracters
Legal Characters
Must be alphanumeric
NEVER, EVER spaces
Even hyphens (-) and underscores (_) cause
problems in some browsers
Interpretation of CSS
How does it really work with the browser?
Fundamental concepts of CSS:
Block and Inline
Inheritance and Cascade
The Box Model
Block & Inline Elements
Block-level elements always start a new line for
themselves and any content that follows them also
starts on a new line.
XHTML cousins: , , and
Inline elements follow each other like the letters in a
sentence, only beginning a new line when they have
run out of space on the previous one.
XHTML cousins: ,
Block & Inline Elements
- block-level
- inline level
Inheritance & Cascade
Describes how styles are applied through one
another without conflict.
Inheritance:
Brief Example
Now that‟s a ton
of tags!
Inheritance in CSS
body {
background: #000000;
color: #FFFFFF;
}
p{
color: #c0c0c0;
}
P‟s font color will be its own because we declared it
specifically for p
Exceptions: background color!
Cascade
Makes more than one stylesheet for a single page
possible.
Multiple stylesheets, multiple importance
Author
User
Browser
Overriding Your Hard Work!?!
Users can override the work of authors
!important declaration
This is because they may need high contrast or
bigger text to SEE the web pages
CSS1 v . CSS2
Example:
p {font-size: 25px !important;}
One Author, Multiple Stylesheets
Cascade principle applies here too
Remember our online catalog?
Order matters
Independence Day Sale!
The CSS Box Model
Visual layout tool
You can create a box by containing items within a
tag
A box has a number of properties you can
manipulate
The Box Model
The Box Model
Padding
Borders
Solid
Dotted
Dashed
None
Margins
Example in CSS
#box {
width: 300px; (for the content)
padding: 10px;
border: 1px solid #000;
margin: 20px;
}
What is collapse?
Collapse occurs when box elements are stacked
vertically by the normal flow
The touching top and bottom margins overlap or
COLLAPSE
That means that the distance between the adjacent
borders of these boxes isn‟t the sum of the two margins
but is only the size of the greater margin