html5-img
1 / 19

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?.

fraley
Download Presentation

It’s All About Style

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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: www.webreview.com/style/css1/charts/mastergrid.shtml

  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) 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

More Related