1 / 41

Tutorial 7

Tutorial 7. Working with Cascading Style Sheets. 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. History and Support of CSS.

Melvin
Download Presentation

Tutorial 7

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

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}

More Related