HTML5 and CSS3 Illustrated Unit C: Getting Started with CSS

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

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

About CSS 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

CSS Syntax HTML 5 and CSS 3 – Illustrated Complete h1 { text-align: center; font-style: italic; } Parts of a CSS Style Rule Selector Curly Bracket Colon Semi- Colon 1 st Name-Value Pair 1 st Value 2 nd Value 2 nd Name-Value Pair

About CSS Style rules contain two main parts   Selectors: identify the HTML elements to which the rule applies   Name/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 h1 { text-align: center; font-style: italic; }

About CSS Type selectors: selectors defined by names of HTML elements   Apply associated attribute-value pair to every instance of the specified element CSS supports name/attribute-value pairs for many aspects of Web page presentation   Allowable values are specific to each attribute HTML 5 and CSS 3 – Illustrated Complete

Creating an Embedded Style Sheet HTML 5 and CSS 3 – Illustrated Complete

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   HTML 5 and CSS 3 – Illustrated Complete

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., John Smith   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

Implementing an id Selector HTML 5 and CSS 3 – Illustrated Complete

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

Implementing a class Selector HTML 5 and CSS 3 – Illustrated Complete

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

Implementing the div Element HTML 5 and CSS 3 – Illustrated Complete

Implementing the div Element HTML 5 and CSS 3 – Illustrated Complete

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

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., HTML 5 and CSS 3 – Illustrated Complete Creating an External Style Sheet

HTML 5 and CSS 3 – Illustrated Complete Creating an External Style Sheet

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

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   jigsaw.w3.org/css-validator/ HTML 5 and CSS 3 – Illustrated Complete

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

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

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