tutorial 7 n.
Skip this Video
Loading SlideShow in 5 Seconds..
Tutorial 7 PowerPoint Presentation

Tutorial 7

340 Views Download Presentation
Download Presentation

Tutorial 7

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. Tutorial 7 Working withCascading 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 <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. 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. 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. apply a blue color to h2 headings and to boldfaced list items Contextual Selectors Use the tree structure concept to control how styles are applied to a Web page. parentdescendant {styles} • li b {color: blue}apply a blue color to boldfaced lists • li b, h2 {color: blue}

  14. Use style sheets instead of tables for layout

  15. 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}

  16. Using Classes • Mark a group of elements with a common identifier:<elementclass=“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}

  17. <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}

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

  19. Floating an Element • To float an element, use:float: positionposition 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}

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

  21. Working with the div element <style type="text/css"> #box {width: 200px; float: right; background-color: ivory; margin: 5 0 5 5; 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>

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

  23. Working with the Box Model:Setting the Padding Size • padding:top right bottom leftspecifies 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}

  24. Working with the Box Model:Formatting the Border • To set the width of an element’s border, use:border-width: top right bottom leftTo 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 leftTo define the border colors for individual sides, use border-top-color, border-right-color, . . • To set border style, use:border-style: top right bottom leftstyle values are solid, dashed, dotted, double, outset, inset, groove, ridge, none

  25. 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: 5 0 5 5;border: 5 outset orange} • #links {width: 150px; float: left; background-color: rgb(212, 142, 0); margin-right: 10px; padding: 10px; border: 2px solid black}

  26. 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}

  27. 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}

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

  29. Positioning Objects with CSSThe 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

  30. #note1 {position: absolute; left: 600px; top: 150px} #note3 {position: absolute; left: 570px; top: 550px} #note2 {position: absolute; left: 170px; top: 400px}

  31. 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}

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

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

  34. 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" />

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

  36. Using Print Styles • CSS2 defines printed pages by extending the box model to incorporate the entire page in a page box. The general rule is:@page {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

  37. Using Print Styles (continued) • To define multiple page styles, use:@page:pseudo-class {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 2cm}@page:right {margin: 3cm 2cm 3cm 5cm}

  38. Using Print Styles (continued) • Create a named label for a page style:@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

  39. Using Print Styles (continued) • To set the page size and orientation, use:size: width height orientation orsize: 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}

  40. Using Print Styles (continued) To format the page break, use:page-break-before: typepage-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}