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

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

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

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

Assessing Style Rules

(continued)

CSS attributes and values

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

<style type=“text/css”>

HTML 5 and CSS 3 – Illustrated Complete

Creating an Embedded

Style Sheet (continued)

Web page containing embedded type

style rule and resulting presentation

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

Implementing an id Selector

(continued)

Style rule using id selector and

resulting presentation

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

(continued)

HTML 5 and CSS 3 – Illustrated Complete

div element added

Implementing the div Element

(continued)

HTML 5 and CSS 3 – Illustrated Complete

Results of div element and style

rule

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

(continued)

HTML 5 and CSS 3 – Illustrated Complete

Style rule implemented using a

class selector and resulting page

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

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

Creating an External

Style Sheet (continued)

HTML 5 and CSS 3 – Illustrated Complete

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

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