Download HTML5 and CSS3 Ill Unit C

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
Parts of a CSS Style Rule
Selector
Curly
Bracket
Colon
SemiColon
Curly
Bracket
h1 { text-align: center; font-style: italic; }
1st
Name-Value
Pair
HTML 5 and CSS 3 – Illustrated Complete
1st
Value
2nd
Name-Value
Pair
2nd
Value
About CSS
h1 { text-align: center; font-style: italic; }
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
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
 <style type=“text/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., <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
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
Creating an
External Style Sheet
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
HTML 5 and CSS 3 – Illustrated Complete
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