1. Working with Cascading Style Sheets
Tutorial 7
Working with Cascading Style Sheets

2. Tutorial Objectives
Learn about the history and theory of cascading style sheets
Create inline styles, embedded styles, and style sheets
Understand style precedence and style inheritance
Work with style selectors

3. History and Support of CSS
A style sheet defines the appearance of a document.
One goal of style sheets is to separate the development of a document’s style from the development of its content.
Style sheets must use a common language - Cascading Style Sheets (CSS).
CSS Versions: CSS1 (1996), CSS2 (1998), CSS3 (being developed)

4. Applying a Style Sheet
Inline styles: A style is applied to a specific element through the use of the style attribute in the element’s tag. The style affects that particular tag but does not affect other tags in the document.
Embedded styles: A style sheet is placed in a document’s head, setting the style definitions for the entire HTML file.
External styles: A style sheet is saved in a separate external file and is applied to a group of pages in a Web site.

5. Using Inline Styles attribute1: value1; attribute2: value2; . . .
<element style=“style declarations”>
element is the name of the tag (h1, h2, etc)
A style declaration consists of attributes, and attributes are followed by a colon and then the value of the attribute.
Multiple attributes are allowed as long as each attribute is separated by a semicolon.
attribute1: value1; attribute2: value2; . . .
<h1 style=“text-align: right; color: gold; font-family: sans-serif”>

6. selector {style1: value1; style2: value2; . . . }
Using Embedded Styles
Embed style definitions in the head section of the HTML file using the form: <style type=“style sheet language”> style declarations </style>
For CSS, style sheet language is “text/css”.
Each style declaration has the syntax:
selector {style1: value1; style2: value2; }
selector identifies an element or elements within the document, and the style: value pairs indicate the styles applied to all the occurrences of that element(s)

7. Using Embedded Styles (continued)
<style type=“text/css”>
h1 {text-align: right; color: gold; font-family: sans-serif} </style>
h1 is the selector and the text enclosed in the braces is the declaration
Apply the same declaration to a group of selectors by including all of the selector names separated by commas.
h1,h2,h3,h4,h5,h6 {text-align: right; color: gold; font-family: sans-serif} </style>

8. Using an External Style Sheet
Create styles that apply to an entire Web site , store the style declarations in a file using the extension “.css”
Within a style sheet, you don’t need <style> tags, just the style declarations.
body {color: brown}
h1, h2, h3, h4, h5, h6 {font-family: sans-serif; color: orange}
address {color: orange; font-style: normal;
font-variant: small-caps; text-align: center}

9. Linking to an External Style Sheet with the <link> Tag
Use the following element in the head element of the document:
<link href=“url” rel=“stylesheet” type=“mime-type”>
To link to a style sheet, the value of the rel attribute should be “stylesheet” and the value of the type attribute should be “text/css”.
<link href="scraps.css" rel="stylesheet" type="text/css“ />

10. Understanding Cascading Order
In cases where the styles conflict, precedence is determined in the following order:
an inline style overrides any embedded style or external style sheet
an embedded style overrides an external style sheet
an external style sheet overrides the internal style rules set by the Web browser
any style attributes left undefined by an inline style, an embedded style, or an external style sheet are left to the Web browser

11. The HTML element relationship
Style Inheritance
Style inheritance causes style declarations to cascade down through a document.
The HTML element relationship

12. Parent and Descendant Elements
An element that lies within another element is called a descendant or descendant element.
An element that contains another element is called the parent or parent element.
An example of a parent is the <body> tag, which contains all of the other tags used to format the content of a Web page.
Using the principle of inheritance, styles defined for each parent tag are transferred to its descendants.

13. Contextual Selectors
Use the tree structure concept to control how styles are applied to a Web page.
parent descendant {styles}
li b {color: blue} apply a blue color to boldfaced lists
li b, h2 {color: blue}
apply a blue color to h2 headings
and to boldfaced list items

15. Use style sheets
instead of tables
for layout

16. Using IDs To identify the paragraph as “head”, use:
<p id="head"><img src="scraps.jpg" alt="Online Scrapbooks” width="314" height="75" /></p>
To reference the paragraph in the style sheet, use an id selector: #id {styles}
#head {text-align: right; border-bottom: 1px solid orange}

17. Using Classes
Mark a group of elements with a common identifier: <element class=“class”>. . . </class>
Apply styles to a class of elements using: .class {styles}
Apply styles to a class of elements of a particular type using: element.class {styles}
<a href="samples.htm">Sample Pages</a> <a href="store.htm" class="newgroup">Online Store</a>
#links a.newgroup {margin-top: 15px}

18. margin-right: 10px; padding: 10px; border: 2px solid black}
<p id="links">
<a href="index.htm">Home</a>
<a href="start.htm">Getting Started</a>
<a href="tips.htm">Scrapbooking Tips</a>
<a href="supply.htm">Supply List</a>
<a href="gloss.htm">Glossary</a>
<a href="classes.htm">Online Classes</a>
<a href="samples.htm">Sample Pages</a>
<a href="store.htm" class="newgroup">
Online Store</a>
<a href="cart.htm">Shopping Cart</a>
<a href="checkout.htm">Checkout</a>
<a href="account.htm">Your Account</a>
<a href="status.htm">Order Status</a>
<a href="wish.htm">Wish List</a>
<a href="service.htm">Customer Service</a>
<a href="about.htm" class="newgroup">
About Us</a>
<a href="news.htm">Newsletter</a>
<a href="faq.htm">FAQ</a>
<a href="contact.htm">Contact Us</a>
</p>
#links {width: 150px; float: left; background-color: rgb (212, 142, 0);
margin-right: 10px; padding: 10px; border: 2px solid black}
#links
a.newgroup {margin-top: 15px}

19. Sizing Elements To set the element’s width, use: width: value
#links {width: 150px}

20. Floating an Element
To float an element, use: float: position position is none, left, right, or inherit
#links {width: 150px; float: left; background-color: rgb(212, 142, 0); margin-right: 10px; padding: 10px; border: 2px solid black}

21. Working with the div element
The span element is a general inline element, the div element is a general block-level element. The syntax is: <div>content</div>
<div id="main"> <h1>Getting Started</h1>
#main {width: 70%; float: left; border-left: 1px solid orange; padding-left: 10px} The main page content is now positioned at the right edge of the links list.

22. Working with the div element
<style type="text/css">
#box {width: 200px; float: right; background-color: ivory; margin: ; border: 5 outset orange}
#box h3 {text-align: center}
#box li {font-family: sans-serif; font-size: 8pt}
</style>
<div id="box">
<h3>Basic Materials</h3>
<ul><li>Acid-free paper, card stock, and stickers</li>

23. Setting the Display Style
To define the display style of an element, use: display: type type is block, inline, . . .
#links a {display: block; font-family: sans-serif; color: white; font-size: 9pt}
Each link is displayed in its own block

24. Working with the Box Model: Setting the Padding Size
padding: top right bottom left specifies the value between the element’s content and the box’s border
#links {width: 150px; float: left; background-color: rgb(212,142,0); margin-right: 10px; padding: 10px; border: 2px solid black}
#box ul {list-style-type: circle; margin-left: 25px; padding-left: 0px}

25. Working with the Box Model: Formatting the Border
To set the width of an element’s border, use: border-width: top right bottom left To define the border widths for individual sides, use border-top-width, border-right-width, . .
To set a border color, use: border-color: top right bottom left To define the border colors for individual sides, use border-top-color, border-right-color, . .
To set border style, use: border-style: top right bottom left style values are solid, dashed, dotted, double, outset, inset, groove, ridge, none

26. Working with the Box Model: Formatting the Border
To define the border styles for individual sides, use border-top-style, border-right-style, . .
To format an entire border, use: border: width style color
#box {width: 200px; float: right; background-color: ivory; margin: ; border: 5 outset orange}
#links {width: 150px; float: left; background-color: rgb(212, 142, 0); margin-right: 10px; padding: 10px; border: 2px solid black}

27. Working with the Box Model: Formatting the Border
Add lines separating the different sections of the document:
address {. . .; clear: both; border-top: 1px solid orange}
#head {. . .; border-bottom: 1px solid orange}
#main {. . .; border-left: 1px solid orange; padding-left: 10px}

28. Using Pseudo-Classes
To create a style for pseudo-class, use: selector:pseudo-class {styles}
usefule pseudo-classes include the link, visited, hover, and active pseudo-classes
#links a:link {text-decoration: none} #links a:visited {text-decoration: none} #links a:hover {color: black; text- decoration: underline} #links a:active {text-decoration: none}

29. Using Pseudo-Elements
To create a style for pseudo-celement, use: selector:pseudo-element {styles}
usefule pseudo-elements include the first-line and first-letter pseudo-elements
<style type="text/css"> #firstp:first-line {font-variant: small-caps} #firstp:first-letter {float: left; font-size: 400%; line-height:0.8} </style>
<p id="firstp">Scrapbooking is . . .

30. Positioning Objects with CSS The Position Style
To place an object at a specific position, use: position: type; top: value; right: value; bottom: value; left: value
type is absolute, relative, static (default), fixed, inherit
With static, it is the same as not using any CSS positioning at all. All values are ignored by the browser
The top, right, bottom, left styles indicate the coordinates of the top, right, bottom, and left edges of the element

31. #note1 {position: absolute; left: 600px; top: 150px}

32. Working with Overflow
To change how the browser handles content that overflows the size of an element, use: overflow: type
type is visible (default), scroll, hidden (to hide content overflow), auto (to display scrollbars only when needed)
.notes {. . . ; width: 130px; height: 100px; overflow: auto}

33. Working with Clipping, Stacking
The clip style defines a rectangular region through which the element’s content can be viewed. The syntax is: clip: rect (top, right, bottom, left}
To determine how positioned objects should be stacked, use: z-index: value
value is a positive or negative integer or auto.
Objects with higher values are stacked on top of elements with lower values

34. Working with Media Types
Be default, a style sheet is applied to all devices. To create a style sheet for specific media, add the following attribute: media=“type”
<style type=“text/css”> h1 {font-family: sans-serif} </style> <style type=“text/css” media=“screen”> h1 {color: red} </style> <style type=“text/css” media=“print”> h1 {color: black} </style>

35. Hiding Elements
To hide the address, #links, and #head elements on the “Samples” page for printed output, add the styles to “print.css”.
h1, h2, h3, h4, h5, h6 {font-family: sans-serif} address, #head, #links {display: none}
In the “samples” file, add an link to the print.css:
<link href="print.css" rel="stylesheet" type="text/css" media="print, projection" />
<link href="scraps.css" rel="stylesheet" type="text/css" media="screen, tv, tty" />

36. Print the callout notes only in a bulleted list
<style type="text/css" media="print, projection"> .notes {font-family: sans-serif; font-size: 12pt; display: list-item; margin: 20px} </style>
<style type="text/css" media="screen, tv, tty">
. . .
</style>

37. Pages do not support the em or ex units
Using Print Styles
CSS2 defines printed pages by extending the box model to incorporate the entire page in a page box. The general rule {styles}
<style type=“text/css” media=“print”> @page {margin: 5in} body {font-size: 12pt; font-family: serif} </style>
Pages do not support the em or ex units

38. Using Print Styles (continued)
To define multiple page styles, {styles}
pseudo-class is first (for the first page of the printout), left and right (for pages that appear on the left/right in double-sided printouts).
@page:left {margin: 3cm 5cm 3cm {margin: 3cm 2cm 3cm 5cm}

39. Using Print Styles (continued)
Create a named label for a page name {styles}
Then apply the named style to particular elements using: selector {page: name}
@page large_margins {margin: 10cm} table {page: large_margins}
A page named “large margins” should be used for every instance of a table in a document
It can only apply to block-level elements

40. Using Print Styles (continued)
To set the page size and orientation, use: size: width height orientation or size: auto (or inherit)
width and height are the width and height of the page, and orientation is portrait or landscape
@page {size: 8.5in 11in landscape; margin: 1in}

41. Using Print Styles (continued)
To format the page break, use: page-break-before: type page-break-after: type
type is always (to always place a page break), avoid, left (to force a page break where the succeeding page will be a left page), right, auto, inherit
@page table_page {8.5in 11in landscape} table {page: table_page; page-break-before: always; page-break-inside: avoid; page-break-after: always}
#main p img {page-break-before: always}