Presentation is loading. Please wait.

Presentation is loading. Please wait.

XP 1 Tutorial 7 Working with Cascading Style Sheets.

Similar presentations

Presentation on theme: "XP 1 Tutorial 7 Working with Cascading Style Sheets."— Presentation transcript:

1 XP 1 Tutorial 7 Working with Cascading Style Sheets

2 XP 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 XP 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 XP 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 XP 5 Using Inline Styles 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;...

6 XP 6 Using Embedded Styles Embed style definitions in the head section of the HTML file using the form: style declarations 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 XP 7 Using Embedded Styles (continued)  h1 {text-align: right; color: gold; font-family: sans-serif} 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}

8 XP 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 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 XP 9 Linking to an External Style Sheet with the Tag Use the following element in the head element of the document: 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”.

10 XP 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 XP 11 Style Inheritance  Style inheritance causes style declarations to cascade down through a document. The HTML element relationship

12 XP 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 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 XP 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} body h1h2p bspan b Ph2 apply a blue color to h2 headings and to boldfaced list items

14 p b {color: red} p>b {color: red} body {color: red}

15 Use style sheets instead of tables for layout

16 XP 16 Using IDs  To identify the paragraph as “head”, use:  To reference the paragraph in the style sheet, use an id selector: #id {styles}  #head {text-align: right; border-bottom: 1px solid orange}

17 XP 17 Using Classes  Mark a group of elements with a common identifier:...  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}  Sample Pages Online Store  #links a.newgroup {margin-top: 15px}

18 Home Getting Started Scrapbooking Tips Supply List Glossary Online Classes Sample Pages Online Store Shopping Cart Checkout Your Account Order Status Wish List Customer Service About Us Newsletter FAQ Contact Us #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 XP 19 Sizing Elements  To set the element’s width, use: width: value  #links {width: 150px}

20 XP 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 XP 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: content  Getting Started  #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 XP 22 Working with the div element #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} Basic Materials Acid-free paper, card stock, and stickers

23 XP 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 XP 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 XP 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 XP 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 XP 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 XP 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 XP 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  #firstp:first-line {font-variant: small-caps} #firstp:first-letter {float: left; font-size: 400%; line-height:0.8}  Scrapbooking is...

30 XP 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} #note3 {position: absolute; left: 570px; top: 550px} #note2 {position: absolute; left: 170px; top: 400px}

32 XP 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 XP 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 XP 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”  h1 {font-family: sans-serif} h1 {color: red} h1 {color: black}

35 XP 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:

36 Print the callout notes only in a bulleted list.notes {font-family: sans-serif; font-size: 12pt; display: list-item; margin: 20px}...

37 XP 37 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} {margin: 5in} body {font-size: 12pt; font-family: serif} Pages do not support the em or ex units

38 XP 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). {margin: 3cm 5cm 3cm {margin: 3cm 2cm 3cm 5cm}

39 XP 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} 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 XP 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 {size: 8.5in 11in landscape; margin: 1in}

41 XP 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, 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}

Download ppt "XP 1 Tutorial 7 Working with Cascading Style Sheets."

Similar presentations

Ads by Google