Download presentation
Presentation is loading. Please wait.
1
The Basics of Style Sheets Presented by Barry Diehl
It’s All About Style The Basics of Style Sheets Presented by Barry Diehl
2
Overview What are Style Sheets? Benefits of CSS Problems with CSS
Recommendations Sources
3
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: Selector – the HTML tag the style will affect Style – has a property and a value
4
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 used as an exception to regular rules
5
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>
6
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>
7
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
8
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
9
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
10
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
11
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> Add styles without a tag – just have a period before the class name
12
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>
13
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>
14
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)
15
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
16
Problems with CSS Browser 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
17
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:
18
XSL New language designed to work with XML Can’t be used with HTML
19
Sources HTML Publishing on the Internet, 2nd edition by Brent Heslop and David Holzgang (The Coriolis Group, 1998) Webmonkey (Mulder’s Stylesheets Tutorial) Sample Sheets from W3C – Jeffrey Zeldman – Little Shop of CSS Horrors –
Similar presentations
