1 / 77

Cascading Style Sheets

Cascading Style Sheets. Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com. Agenda. What is CSS? Adding Styles to Your Page Basic Structure Inheritance & the Cascade Elements and Boxes Using CSS for Layout XHTML Organizing a Style Sheet Validation

genero
Télécharger la présentation

Cascading Style Sheets

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. Cascading Style Sheets Presented By Randal Rust July 17, 2002 r2communications.com randmich@hotmail.com

  2. Agenda • What is CSS? • Adding Styles to Your Page • Basic Structure • Inheritance & the Cascade • Elements and Boxes • Using CSS for Layout • XHTML • Organizing a Style Sheet • Validation • CSS Examples

  3. What Is CSS? • Cascading Style Sheets • Controls the presentation of HTML elements, including size, placement, color and font • Intended to replace table-based layouts, frames and other presentational hacks

  4. What is CSS? • CSS is the W3C Standard for controlling the visual presentation of web pages • Essentially a set of page-layout tools • Intended to give the designer control over the display of the page, similar to what they have in InDesign or Quark Xpress

  5. Benefits of CSS • Conserve bandwidth • Reduce development time and maintenance • Increased accessibility • Conformance to Section 508 and WCAG 1.0 • More sophisticated, cleaner appearance • Increased readability of documents • Easier to prepare content for delivery on multiple media devices

  6. CSS Drawbacks • Not fully supported by NN 4 • Netscape 4 has little support for most of CSS 1 • Broken box model in IE 5 • Width and height of a box is incorrectly calculated • Fixed in IE 6 • Incomplete implementation of CSS 2 in all browsers • This is a minor issue

  7. What is the W3C? • W3C founded by Tim Berners-Lee, who developed HTTP, addressing, URL and HTML • Industry consortium with more than 500 members • Develops technical standards for the web

  8. What is a W3C Standard? • Finished specifications are called “Recommendations” • Members are supposed to implement them in their software • Intended to promote interoperability among different software and universal accessibility

  9. Why Should You Care? • W3C recommendations are the foundation of Web’s future • Following standards promotes accessibility, usability and reduces maintenance

  10. Adding Styles to Your Page

  11. Methods of Adding Styles • Inline • Embedded • External • Linked • Imported

  12. Inline • Style appears within the XHTML element

  13. Embedded • Styles are added to the <head> of the document • Good method for testing, but poor for implementation

  14. External: Linked • Style sheets are linked

  15. External: Imported • Style sheets are imported using the @import directive

  16. Basic Structure

  17. Rules • A style sheet contains “rules” that tell the browser how do display the elements on a Web page • A Rule is made up of a Selector and a Declaration • The Declaration contains a Property and a Value p { color: #000; } Selector Rule Declaration

  18. Basic Structure: Selectors

  19. Types of Selectors • Element • Contextual • Class • ID • Psuedo-class and Psuedo-element

  20. Basic Structure: Values

  21. Specifying Values • All CSS Values can be classified as: • Keywords • Length Values • Percentage Values • Colors • URLs

  22. Inheritanceand the Cascade

  23. Multiple Style Sheets • In the presence of multiple style sheets, the user agent must determine which rule has the most specificity • Style precedence is determined in three ways: • Inheritance • Specificity Calculations (skipping this) • The Cascade

  24. Inheritance • Relies on parent>child relationships • Generally, Child Elements inherit styles from Parent Elements

  25. In this example, the style has been applied to the BODY, and it will be inherited by the P.

  26. Styles defined in the BODY element are inherited by most of the child elements.

  27. The Cascade Example: p.instructions • Find all declarations that contain a matching selector • Sort by weight and origin (user agent, user, author) • User Agent>Author>User • Sort by specificity • Elements with higher specificity have more weight • Sort by order • The later a declaration appears in the style sheet or document, the more weight it is given • Imported/Linked>Embedded>Inline>User

  28. Here is our original XHTML file. Let’s add some more styles to it.

  29. This time, I’ve added two styles for the P element. One is embedded, the other is inline.

  30. All three styles are applied to the P. Now let’s overwrite a style.

  31. Using an inline style, I’ve overwritten the rule for the P font-size. I’ve also added another P, so you can see that it won’t be affected.

  32. Elements and Boxes

  33. Types of Elements • Block-Level • Generally items which are displayed on a line by themselves • p, h1-h6, ul, ol, table, div, body • Inline • These elements do not force a line break in the visual display • a, em, span, images, form inputs • List-Item • Elements that include the <li> element • Specially defined to have a marker (bullet, letter or number)

  34. The Box Model • The most important part of CSS, if you are going to use CSS for layout • All Elements generate a box (Element Box) • The Element Box tells the browser how much space an element and its properties occupy

  35. Box Components • Content • Set with the WIDTH and HEIGHT properties • Padding • Set with the PADDING property • Border • Set with BORDER property • Margin • Set with MARGIN property

  36. Margin Padding Content Border Box Components Box Width

  37. The Importance of Boxes • Understanding the CSS Box Model is the most critical factor in using CSS for layout • Any version of IE before 6 renders boxes incorrectly

  38. Using CSS for Layout

  39. The Basics • Sketch out your page • Each area becomes a “containing box” • Give each box a unique name • This unique name will correspond to an ID Rule in your style sheet • Use inheritance and the cascade to minimize how many rules are in your style sheet

  40. This is a page from my web site. I’ll use it to show where the boxes are.

  41. XHTML The Best Friend of CSS

More Related