Tutorial 7
Download
1 / 41

- PowerPoint PPT Presentation


  • 325 Views
  • Updated On :

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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about '' - Melvin


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Tutorial 7 l.jpg

Tutorial 7

Working withCascading Style Sheets


Tutorial objectives l.jpg
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 l.jpg
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)


Applying a style sheet l.jpg
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.


Using inline styles l.jpg
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”>


Using embedded styles l.jpg
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)


Using embedded styles continued l.jpg
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>


Using an external style sheet l.jpg
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}


Linking to an external style sheet with the link tag l.jpg
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“ />


Understanding cascading order l.jpg
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


Style inheritance l.jpg
Style Inheritance

  • Style inheritance causes style declarations to cascade down through a document.

The HTML element relationship


Parent and descendant elements l.jpg
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.


Contextual selectors l.jpg

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}


Slide15 l.jpg

Use style sheets

instead of tables

for layout


Using ids l.jpg
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}


Using classes l.jpg
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}


Slide18 l.jpg

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


Sizing elements l.jpg
Sizing Elements

  • To set the element’s width, use:width: value

  • #links {width: 150px}


Floating an element l.jpg
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}


Working with the div element l.jpg
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.


Working with the div element22 l.jpg
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>


Setting the display style l.jpg
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


Working with the box model setting the padding size l.jpg
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}


Working with the box model formatting the border l.jpg
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


Working with the box model formatting the border26 l.jpg
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}


Working with the box model formatting the border27 l.jpg
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}


Using pseudo classes l.jpg
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}


Using pseudo elements l.jpg
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 . . .


Positioning objects with css the position style l.jpg
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


Slide31 l.jpg

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

#note3 {position: absolute; left: 570px; top: 550px}

#note2 {position: absolute; left: 170px; top: 400px}


Working with overflow l.jpg
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}


Working with clipping stacking l.jpg
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


Working with media types l.jpg
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>


Hiding elements l.jpg
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" />


Slide36 l.jpg

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>


Using print styles l.jpg
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


Using print styles continued l.jpg
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}


Using print styles continued39 l.jpg
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


Using print styles continued40 l.jpg
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}


Using print styles continued41 l.jpg
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}


ad