1 / 53

Week 6 Introducing Cascading Style Sheets

Learn how to understand, combine, and apply CSS style rules to create beautiful and functional websites. Explore basic and advanced selection techniques, inheritance, and the cascade in CSS. Ideal for web developers and designers.

vpierce
Download Presentation

Week 6 Introducing 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. Week 6Introducing Cascading Style Sheets

  2. Objectives • Understand CSS style rules • Build a basic style sheet • Understand the cascade and inheritance • Use basic selection techniques • Use advanced selection techniques • Work with the <div> and <span> elements • Use pseudo-classes and pseudo-selectors

  3. Understanding CSS Style Rules

  4. Understanding CSS Style Rules • In CSS, style rules express the style characteristics for an HTML element • A set of style rules is called a style sheet • Style rules are easy to write and interpret

  5. Understanding CSS Style Rules (continued) • Style rules are composed of two parts: a selector and a declaration • The selector determines the element to which the rule is applied • The declaration details the exact property values

  6. Understanding CSS Style Rules (continued) • The declaration contains a property and a value • The property is a quality or characteristic • The precise specification of the property is contained in the value • CSS includes a wide variety of different properties, each with a specific number of values

  7. Combining CSS Rules with HTML • Three ways to combine CSS rules and HTML • The style attribute • The <style> element • External style sheet

  8. Combining CSS Rules with HTML (continued) • The style attribute • Defines a style for a single element • Generally used to override a style set at a higher level in the document for a single element • Only affects one instance of an element in a document • e.g., • <h1 style=“color:blue”>Some Text</h1>

  9. Combining CSS Rules with HTML (continued) • The <style> element • Always contained in the <head> section of the document • Generally used to override a style set at a higher level in the document for a single document • Only affects the document in which it resides • e.g. <head> <title>Sample Document</title> <style type=“text/css”> H1{color:red;} </style> </head>

  10. Combining CSS Rules with HTML (continued) • External style sheet • Text document that contains style rules • Allows specification of rules for multiple HTML documents • Does not contain HTML code • Do not need <style> element • e.g. h1{color:white; background-color:green;} h2{color:red;}

  11. Combining CSS Rules with HTML (continued) • Linking to an external style sheet • <link> element establishes document relationships • Can only be used in the <head> section of a document • Tells the browser where to find the external style sheet • e.g. <head> <title>Sample Document</title> <link href=“styles.css” rel=“stylesheet” type=“text/css”> </head>

  12. Comments in CSS • Add comments with a beginning /* and an ending */ • Example: <style type=“text/css”> /* This is the basic style sheet */ h1 {color: gray;} /* The headline color */ h2 {color: red;} /* The subhead color */ </style> 14

  13. Understanding the Cascade

  14. Understanding the Cascade • Cascading mechanism of CSS determines which rules are assigned to document elements by assigning a weight based on four variables: • Origin of the rule • Specificity of the selector • Order of the rule in the style sheet • Use of the !important keyword

  15. Determining Rule Weight by Origin • Cascading order of precedence: • Rules from author’s style sheet • Rules from user’s style sheet • Rules from browser’s style sheet

  16. Determining Rule Weight By Specificity • Rules with more specific selectors take precedence over rules with less specific selectors • e.g. body {color:black;} h1 {color:red}

  17. Determining Rule Weight By Order • Based on order of rule within style sheet • Those listed later take precedence over those listed earlier in the style sheet • e.g. body {color:black;} h1 {color:red;} h1 {color:green;}

  18. Determining Rule Weight with the !Important Keyword • Allows user to override author’s style setting for a particular element • Improves accessibility of documents • Gives control to users with special requirements • e.g. <style type=“text/css”> p {font-family:arial !important;} </style>

  19. Understanding Inheritance

  20. Understanding Inheritance • Based on hierarchical structure of documents • CSS rules inherit from parent elements to child elements: • Thus <li> elements will inherit style rules from <ul> elements unless a style rule is specifically set for the <li> element

  21. Understanding Basic Selection Techniques

  22. Understanding Basic Selection Techniques • Using type selectors • Grouping selectors • Combining declarations • Using descendant selectors

  23. Using Type Selectors • The following rule selects the H1 element:

  24. Grouping Selectors • The following rule selects the H1 and H2 elements: h1, h2 {color: green;}

  25. Combining Declarations • The following style rules set the <p> element to 12-point blue text: p {color: blue;} p {font-size: 12pt;} • These two style rules can be expressed in a simpler way: p {color: blue; font-size: 12pt;}

  26. Using Descendant Selectors • A descendant selector lets you specify the exact context in which a style is applied • To specify that <b> elements appear blue only within <p> elements, use the following rule: p b {color: blue;}

  27. Understanding Advanced Selection Techniques

  28. Understanding Advanced Selection Techniques • The class attribute • The id attribute • The <div> and <span> elements • The pseudo-class and pseudo-element selectors • The universal selector

  29. Using the Class Attribute Selector • The class attribute lets you write rules and then apply them to groups of elements that you have classified • To create a class, declare it within the <style> element first • The period (.) flag character indicates that the selector is a class selector

  30. Using the Class Attribute Selector (continued) <p class=“quote”>This text will be red with a 30 pixel margin.</p> vs. p {font-size: .85%;}

  31. Using the Class Attribute Selector (continued) .special {font-weight: bold; font-family: sans-serif;} <p class=”special”>This is the first paragraph of the document. It has a different style based on the “special” class selector.</p>

  32. Working with <div> • The <div> element lets you specify logical divisions within a document that have their own name and style properties • <div> is a block-level element; it contains a leading and trailing carriage return • You can use <div> with the class attribute to create customized block-level elements

  33. Working with <div> (continued) • To create a division, declare it within the <style> element first • The following example specifies a division named column as the selector for the rule: div.column {width: 200px; height: auto; padding: 15px; border: thin solid;}

  34. Working with <div> (continued) • Next, specify the <div> element in the document; then use the class attribute to specify the exact type of division • In the following example, the code defines the <div> element as the special class named “introduction” <div class="column">This division displays as a column of text in the browser window. </div>

  35. Working with <span> • The <span> element lets you specify inline elements within a document that have their own name and style properties • Inline elements go within the line of text, like the <b> element

  36. Working with <span> (continued) • To create a span, declare it within the <style> element first • The following example specifies a <span> element named “logo” as the selector for the rule: • span.logo {color:red;}

  37. Working with <span> (continued) • Next, specify the <span> element in the document; then use the class attribute to specify the exact type of span • In the following example, the code defines the <span> element as the special class named “logo” • Welcome to the <span class=“logo”>Wonder Software</span> Web site.

  38. Working with <span> (continued)

  39. Summary • CSS rules can be combined with your HTML code in a number of ways • CSS rules are easy to write and read • CSS uses cascading and inheritance to determine which style rules take precedence • The !important declaration lets users override the author’s style rules

  40. Summary (continued) • Basic style rules let you apply style rules based on standard element selectors • You can combine the selectors and declarations to create more powerful style expressions • You can also select elements based on the contextual relationship of elements in the document tree

  41. Summary (continued) • The advanced selection techniques allow you to use the class attribute selector, which is often paired with the <div> and <span> HTML elements • These elements have no style of their own, but offer a convenient way of expressing style for any section of a document, whether block-level or inline • Additionally, class allows you to choose a meaningful naming convention for your style rules

  42. Summary (continued) • The pseudo-class and pseudo-element selectors let you change the color and styling of hypertext links and the effect elements of a document, such as first line and first letter, that are not signified with the standard HTML elements

  43. Questions – Company Background What kind of business is your company in? How long has your company been in business? What is the size of your company? What is the company’s reputation? What is your typical customer like/target audience like? 48

  44. Questions – Company Background Who are your competitors? What is your address? What is your phone number? What is your e-mail address? What is the best way to contact you? 49

  45. Project Specific Questions What is the purpose of this project? If necessary, will I have access to your company-specific information? How Do You Envision the Finished Project? 50

More Related