The Basics of Style Sheets Presented by Barry Diehl 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: 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 used as an exception to regular rules
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> Add styles without a tag – just have a period before the class name
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 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
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/tutorial1.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