It’s All About Style
Download
Report
Transcript It’s All About Style
It’s All About Style
The Basics of Style Sheets
Presented by
Barry Diehl
Overview
What
are Style Sheets?
Benefits of CSS
Problems with CSS
Recommendations
Sources
What are style sheets?
A collection of rules that determines
how a browser displays HTML tags.
Also known as Cascading Style
Sheets (CSS).
Consists of two parts:
1.
2.
Selector – the HTML tag the style will
affect
Style – has a property and a value
Inline Styles – Add to a tag
No
selector
Applies to the tag in which it belongs
<P style=“font-size: 18 pt”>Paragraph text here</P>
Best
rules
used as an exception to regular
Inline Styles - <SPAN> tag
Define
an area over which a style will be
applied
Not attached to a structural HTML
element
<SPAN style=“margin-left: 1in”>
<H2>Heading</H2>
<P>Paragraph text.</P>
</SPAN>
Internal Styles
Applies
to entire document
Insert <STYLE> tag between <HEAD>
tags
<HEAD>
<TITLE>Page Title</TITLE>
<STYLE TYPE=“text/css”>
BODY {background: white; color: black}
H1 {font: 24 pt “Arial” bold}
P {font: 12 pt “Arial”; text-indent: 0.5in}
</STYLE>
</HEAD>
External Style Sheet
Style
data are kept in a separate file
<HEAD>
<TITLE>External Style Example</TITLE>
<LINK REL=STYLESHEET HREF=“global.css”
TYPE=“text/css”>
</HEAD>
<STYLE>
is not in the file
Comparison – Inline Styles
Useful for setting styles for small
sections of a document
Can override all other style specification
methods
Combining style with content and
structural information
Doesn’t apply to same tag elsewhere in
document or other documents
Comparison – Internal Styles
Useful for setting styles for an entire
document
Can use classes to create styles for
multiple types of tags
Style information is included when the
document downloads for faster
rendering
Cannot be used for multiple documents
Comparison – External Style
Sheet
Standardize styles for a site
Can use classes to create styles for multiple
types of tags
If used repeatedly, will be cached for faster
retrieval
Requires extra time to download a separate
file
Documents may not render correctly if there’s
an error with the style sheet file
Hard to make small changes in the document
Defining Styles with CLASS
Add
styles to a specific tag
<STYLE TYPE=“text/css”>
BODY {background: white; color: black; font-size: 14pt}
P.large {font-size: 18pt}
P.small {font-size: 10pt}
</STYLE>
<P CLASS=“large”>This paragraph will be large.</P>
<P CLASS=“small”>This paragraph will be small.</P>
styles without a tag – just have a
period before the class name
Add
Handling Exceptions with ID
Assign
exception value to an id using
the # sign
Use the id to change a value in a style
<STYLE TYPE=“text/css”>
.normal {font-size: 16; color: blue}
#fire {color: red}
</STYLE>
<P CLASS=“normal”>Normal text is 16-point blue.</P>
<P CLASS=“normal” ID=“fire”>This text is 16-point red.</P>
Inheritance
Styles
are inherited from previous
definitions of tags
<STYLE TYPE=“text/css”>
BODY {background: white; color: black; font-size: 12pt}
H1 {font-size: 24pt; color: green}
UL {font-size: 10pt; font-style: italic}
</STYLE>
Cascading
Collecting, sorting and applying rules
A rule’s importance is based on:
If it has an explicit weight (“!important”)
Where the rule originated
Designer
User
Browser
How specific the rule is
Order of presentation (recent has priority)
Benefits of CSS
Standardize
pages across a web site
Save bandwidth/load faster
Develop faster
Change pages quickly and easily
Easy to learn and use
Separates presentation and content
Problems with CSS
implementation varies – until
6.0, Netscape was the worst
Style sheets won’t allow pages to be
identical on all screens – there are too
many variables
Browser
Recommendations
86% of Internet users surf with Internet
Explorer
Determine percentage for your own site
Use pixels – only safe method – points are
good only for printing
Use style sheets for what they do well – like
fonts. Use tables for margins.
Pages should be viewable without style sheet
See browser compatibility table at:
www.webreview.com/style/css1/charts/mastergrid.shtml
XSL
New
language designed to work with
XML
Can’t be used with HTML
Sources
HTML Publishing on the Internet, 2nd edition by Brent Heslop and
David Holzgang (The Coriolis Group, 1998)
Webmonkey (Mulder’s Stylesheets Tutorial)
http://hotwired.lycos.com/webmonkey/authoring/tutorials/tutorial
1.html
Sample Sheets from W3C –
www.w3c.org/StyleSheets/Core/Overview
Jeffrey Zeldman – www.zeldman.com
Little Shop of CSS Horrors – www.haughey.com/csshorrors