HTML5 and CSS3 Illustrated Unit C: Getting Started with CSS

1. HTML5 and CSS3 IllustratedUnit C: Getting Started with CSS

2. Objectives • Assess style rules • Create an embedded style sheet • Implement an id selector • Implement the div element • Implement a class selector HTML 5 and CSS 3 – Illustrated Complete

3. Objectives (continued) • Create an external style sheet • Link to an external style sheet • Validate your CSS code HTML 5 and CSS 3 – Illustrated Complete

4. Assessing Style Rules • CSS: adds style information to elements defined in HTML code • Added by insertion of style rules • Style rules: lines or blocks of CSS code that specify the presentation of Web page elements HTML 5 and CSS 3 – Illustrated Complete

5. Assessing Style Rules (continued) • Style rules contain two main parts • Selectors: identify the HTML elements to which the rule applies • Attribute-value pairs: specify CSS attribute to apply to the selector and value to assign to the attribute • Each pair ends with a semicolon • All attribute-value pairs surrounded by curly braces HTML 5 and CSS 3 – Illustrated Complete

6. Assessing Style Rules (continued) • Type selectors: selectors defined by names of HTML elements • Apply associated attribute-value pair to every instance of the specified element • CSS supports attribute-value pairs for many aspects of Web page presentation • Allowable values are specific to each attribute HTML 5 and CSS 3 – Illustrated Complete

7. Assessing Style Rules (continued) • CSS attributes and values HTML 5 and CSS 3 – Illustrated Complete

8. Creating an Embedded Style Sheet • Embedded Style Sheet: CSS code inserted in the head element of an HTML document • Most straightforward method for affecting the presentation of a single Web page • CSS is inserted in a style element with an attribute specifying that the contents are written in CSS • <style type=“text/css”> HTML 5 and CSS 3 – Illustrated Complete

9. Creating an Embedded Style Sheet (continued) • Web page containing embedded type style rule and resulting presentation HTML 5 and CSS 3 – Illustrated Complete

10. Implementing an id Selector • id selector: affects the presentation of a specific element in an HTML document • Add id attribute to opening tag of an element to give it a unique value • e.g., <p id=“name”> John Smith </p> • Use the name in a CSS rule id selector • Attribute value pairs following id selector affect only the identified element • e.g., #name { text-align: right; } HTML 5 and CSS 3 – Illustrated Complete

11. Implementing an id Selector (continued) • Style rule using id selector and resulting presentation HTML 5 and CSS 3 – Illustrated Complete

12. Implementing the div Element • div element: generic HTML element free of semantic meaning • Groups elements of different types within a single element • Contains all elements between opening and closing div tags • Allows you to assign CSS styles to a section of a Web document containing different types of elements HTML 5 and CSS 3 – Illustrated Complete

13. Implementing the div Element (continued) HTML 5 and CSS 3 – Illustrated Complete div element added

14. Implementing the div Element (continued) HTML 5 and CSS 3 – Illustrated Complete Results of div element and style rule

15. Implementing a class Selector • class attribute: can be added to multiple HTML elements • class selector: creates a style rule based on values assigned to the class attribute • Allows style rule to be applied to unlimited number of separate elements • Consists of period followed by class attribute value HTML 5 and CSS 3 – Illustrated Complete

16. Implementing a class Selector (continued) HTML 5 and CSS 3 – Illustrated Complete Style rule implemented using a class selector and resulting page

17. Creating an External Style Sheet • External Style Sheet: separate file containing style information • Can be linked to multiple HTML pages • Suitable for maintaining a consistent style in large Web sites • Prevents need to implement style changes on each page of Web site • In CSS code, content located between /* and */ is ignored by user agents HTML 5 and CSS 3 – Illustrated Complete

18. Creating an External Style Sheet (continued) • Use the HTML link element to link an HTML document to an external style sheet • rel and type attributes specify to the user agents that the external document is written in CSS • href attributes specifies the filename of the external style sheet • e.g., <link rel=“stylesheet” type=“text/css” href=“mystylesheet.css” /> HTML 5 and CSS 3 – Illustrated Complete

19. Creating an External Style Sheet (continued) • An external style sheet HTML 5 and CSS 3 – Illustrated Complete

20. Linking to an External Style Sheet • Style rules in an external style sheet can be applied to each page on a Web site • Simply add link element referencing the style sheet file to each HTML document • Make changes to Web site style only in the external style sheet • Changes reflected in all pages linked to the style sheet HTML 5 and CSS 3 – Illustrated Complete

21. Validating Your CSS Code • Important to validate CSS code against CSS rules even when CSS code works in browser testing • Helps ensure compatibility of code with different user agents • Helps ensure that code remains usable • You can use online tools to validate your code HTML 5 and CSS 3 – Illustrated Complete

22. Summary • CSS is a coding language that adds style information to HTML elements • Styles defined by style rules • Contain selectors identifying the styled elements and attribute-value pairs identifying how the selected elements should be styled • HTML div element can be used to group elements HTML 5 and CSS 3 – Illustrated Complete

23. Summary (continued) • Different types of selectors affect different groups of elements • Type selector: applies to all HTML elements of a specific type, such as h1 elements • id selector: applies to a single element having a specific unique id • class selector: applies to all elements having a specific value to the class attribute HTML 5 and CSS 3 – Illustrated Complete

24. Summary (continued) • Embedded style sheets are included in the HTML code • Suitable for single page Web sites • External style sheets can be linked to multiple Web pages • All the Web pages can be changed by changing a single style sheet • CSS code can be validated against CSS rules HTML 5 and CSS 3 – Illustrated Complete