3. Reviewing CSS

What We Will Cover Announcements Please silence all cell phones and pagers When class is over, please shut down your computer if it is on. Elucidations 3.1: Introduction to CSS 3.1.1: About CSS 3.1.2: Applying a Style Sheet 3.1.3: Understanding Style Precedence 3.1.4: Understanding Style Inheritance 3.1.5: Summary Activity 3.1 3.2: Working with Text Styles 3.2.1: Choosing Fonts 3.2.2: Setting the Font Size 3.2.3: Controlling Spacing and Indentation 3.2.4: Setting Font Styles, Weights, and Other Decorative Features 3.2.5: Aligning Text 3.2.6: Combining Text Formatting into a Single Style 3.2.7: Summary Activity 3.2 3.3: Displaying Colors and Images 3.3.1: Setting Colors 3.3.2: Setting a Background Image 3.3.3: Summary Activity 3.3 3.4: Sizing and Positioning Elements 3.4.1: Sizing Elements 3.4.2: Working with Borders, Margins and Padding 3.4.3: Positioning Elements 3.4.4: Floating an Element 3.4.5: Stacking Elements 3.4.6: Setting the Element Display Style 3.4.7: Hiding Elements 3.4.8: Summary Activity 3.4 3.5: Working with Selectors, Media and Print Styles 3.5.1: Working with Selectors 3.5.2: Contextual Selectors 3.5.3: Attribute Selectors 3.5.4: Applying Styles to IDs and Classes 3.5.5: Applying Styles to Pseudo-classes and Pseudo-elements 3.5.6: Working with Different Media 3.5.7: Using Print Styles 3.5.8: Activity 3.5 Wrap Up Due Next: A3: Applying CSS (9/25/06) Discussion 2 and Quiz 2 (9/25/06) Elucidations Questions from last class? Homework Questions? A2: Applying HTML (9/18/06) Discussion 1 and Quiz 1 (9/18/06) Homework Discussion Questions Have any students worked with XHTML before? How many have had to convert HTML into XHTML compliant Web pages? What challenges do you see when working with XHTML that are not present with HTML? What browsers have been the most challenging to work with as a developer? Are frames a useful Web design technique? Why or why not? ^ top 3.1: Introduction to CSS Learner Outcomes At the end of the lesson the student will be able to: Discuss the history of Cascading Style Sheets Apply inline, embedded, and external style sheets Describe how style definitions are inherited and cascade through a Web site ^ top 3.1.1: About CSS HTML and XHTML are intended to structure a document While these markup languages provide some layout, controlling how documents are rendered is done by style sheets A style sheet is a collection of properties that describes how elements within a document should be rendered The advantage of using a style sheet is that you separate document content from document presentation Thus you can change the way a document looks without changing the content This makes changing some or all of the appearance of you web site much easier Also, style sheets give you more control over the appearance of a document than you can get with HTML or XHTML alone Stylesheet Languages Style sheets have been used since the beginnings of SGML in the 1970s Currently, there are three major stylesheet languages: Cascading Style Sheets (CSS): intended for HTML and XHTML Document Style Semantics and Specification Language (DSSSL): intended for SGML documents Extensible Stylesheet Language (XSL): intended for XML documents CSS is the language most commonly used on the Web and is the focus of this review Brief History of CSS 1996 - CSS1: introduced by W3C: Support for: fonts, text, color, backgrounds, block-level elements Most modern browsers support almost all of CSS1 1998 - CSS2: superset of CSS1 Added support: positioning, visual formatting, media types, interfaces Most modern browsers support positioning and visual formatting However, other support is lagging N/R - CSS2.1: still a working draft Removes poorly-supported features and adds already-implemented browser extensions N/R - CSS3: under development with working drafts of some modules Added support: user interfaces, accessibility, columnar layout Also added: international features, mobile devices, scalar vector graphics Some browsers have added extensions to the CSS standard over time For instance, IE added formatting for inline images and support for slide shows IE extensions are often not supported by other browsers More Information Style Sheets: from the W3C HTML specification Cascading Style Sheets, level 1:W3C recommendation for CSS1 Cascading Style Sheets, level 2:W3C recommendation for CSS2 Cascading Style Sheets, level 2 revision 1:W3C working draft for CSS2.1 Cascading Style Sheets Under Construction: W3C reports on progress on working drafts ^ top 3.1.2: Applying a Style Sheet You can use three techniques for applying a style to an HTML or XHTML document: Inline styles Embedded styles External styles We will briefly look at each technique Using Inline Styles An inline style is applied to an element by adding the style attribute to the element's markup tag Syntax of the style attribute: <element style="style1: value1; style2: value2; ..."> For example: <p style="color: red">My example text</p> Produces the output: My example text Using Embedded Styles The value of style sheets is more apparent as you move the style definitions away from the content One way is by moving the style elements into the document head The syntax of the style element in the document head: <style type="text/css"> style declarations </style> Each style declaration is applied to a group of elements called a selector The syntax of a selector: selector {style1: value1; style2: value2; ... } For example, to render all paragraph (p) elements in red: <head> <title>Web Page Title</title> <style type="text/css"> p {color: red} </style> </head> Note that the style element supports attributes that define: type: style sheet language (required) media: media output type (optional -- default: all) title: advisory title for the style element (optional) id: identifier for the style element (optional) Values of the Media Attribute screen (the default): for continuous (non-paged) computer screens all: suitable for all devices aural: for speech synthesizers braille: for braille tactile feedback devices handheld: for handheld devices (characterized by a small, monochrome display and limited bandwidth) print: for output to a printer projection: for projectors tty: for fixed-pitch character grid displays (such as the display used by Lynx) tv: for television-type devices with low resolution and limited scrollability Using an External Style Sheet An external style sheet is a text file that contains only style declarations You can link a style file to any and all web pages in your site Thus, you can set up style sheets that affect your entire web site This makes changing the style of all your web pages much easier As an example, we could define a simple external style sheet named style.css: p {color: red} Then we would link the file to each page like this: <link href="style.css" rel="stylesheet" type="text/css"> Then all the paragraphs in all pages containing this link would look red by default If we wanted to change the color to blue, for instance, all we need to do is change the style.css file ^ top 3.1.3: Understanding Style Precedence We saw that you can apply styles in three different ways If you use all three ways to define the same selector, but in different ways, what does the browser do? The answer is to apply the style with the most precedence The following lists style precedence from the highest to the lowest: Inline styles Embedded styles External style sheet Thus, a typical CSS strategy is: Define one or more external style sheets that apply to your entire web site Use an embedded style sheet for styles unique to a single page Use an inline style for a single occurrence of an element ^ top 3.1.4: Understanding Style Inheritance If you do not specify a style for an element, it adopts the style of its parent This is known as style inheritance The parent element encloses the nested child element You can visualize inheritance as a tree-like structure Rather like a family tree You can see an example tree diagram below followed by the HTML document the tree is depicting To override style inheritance you specify a style for the descendant element of the parent Example Inheritance Tree An HTML File for the Tree 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Inheritance Tree</title> <script type="text/javascript"> // Some JavaScript </script> </head> <body> <table border="1"> <tr> <th>Heading 1</th> <th>Heading 2</th> </tr> <tr> <td>row 1, column 1</td> <td>row 1, column 2</td> </tr> </table> <h1>Inheritance Tree</h1> <h2>Another Branch of the Tree</h2> <p>Yet another branch of the tree</p> <ol> <li>List element 1</li> <li>List element 2</li> <li>List element 3</li> </ol> </body> </html> View the file ^ top 3.1.5: Summary In this section, we looked at the history and syntax of CSS Also, we looked at how to apply CSS styles: Inline styles Embedded styles External style sheet When there is a conflict between the styles, they are applied in the order of their precedence shown above This allows us to use a CSS strategy of: Define one or more external style sheets that apply to your entire web site Use an embedded style sheet for styles unique to a single page Use an inline style for a single occurrence of an element In addition, we discussed how an HTML element inherits style from its parent When you specify a style, you specify a style for that element and its children Check Yourself Use the Review Questions 1-11 on pages REV 92-93 of the textbook to check your understanding. ^ top Activity 3.1 Take one minute to read over the following Quick Quiz questions. We will discuss the questions in one minute. Quick Quiz <h1 style = "color: red">CSS</h1> will render the text: in a font size equal to 18 pixels in a default browser color of black as the browser sees fit in a red color AnswerD An external style sheet will have its CSS rules overridden by a(n) ________embedded style which is overridden by an in-line style. Type, media, id, and title are all required attributes of the style element. True False AnswerFalse ^ top 3.2: Working with Text Styles Learner Outcomes At the end of the lesson the student will be able to: Work with font and text styles ^ top 3.2.1: Choosing Fonts Now that we know how to a style to a text document, we will look at using specific styles starting with text The basis of using a text style is the font A font is a set if images, known as glyphs, that represent the characters of a character set that are all in one typeface (unified style) You specify a font using the style: font-family: fonts Specific fonts are specified with names like: Times New Roman, Arial, or Garamond Which font you can use depends on what is installed on the user's computer Since you cannot control the font installation, browsers have five generic fonts that you can specify You cannot be exactly sure how a generic font will display, as you can see in the image below Because many different fonts are possible, CSS lets you specify a list of fonts For example, to specify a sans-serif, you could use the style: font-family: Arial, Helvetica, sans-serif The browsers looks for a matching font from left to right This lets you specify a generic font at the end of the list for use when the specific fonts are not available Generic Fonts Vary with Changes in Computers and Browsers ^ top 3.2.2: Setting the Font Size The style for setting the size of a font is: font-size: size You can set the size using either absolute or relative measures Absolute keywords: xx-small | x-small | small | medium | large | x-large | xx-large Absolute units: using mm (millimeter), cm (centimeter), in (inch), pt (point), or pc (pica) Relative keywords: larger | smaller Relative units: relative to size of a standard character in output device (em or ex) or as a percentage of the parent em unit: equal to the width of the capital letter "M" ex unit: equal to the height of a lowercase "x" Also, you can set size using the pixel The pixel is a single dot on the output device If a number is specified with no unit, then the browser assumes pixels Thus, the following are equivalent: font-size: 50px font-size: 50 Absolute vs. Relative Sizing Using relative sizes allow a page to scale its size upwards and downwards If a person needs larger fonts, then they can adjust the font size and the layout stays proportioned You may think that absolute sizes lets you control the exact size of fonts However, you must realize that the user has final control over their computer and browser ^ top 3.2.3: Controlling Spacing and Indentation CSS allows you to perform basic typographic tasks, such as setting the kerning and tracking kerning: the amount of space between letters tracking: the amount of space between words Style to control an element's kerning letter-spacing: value Where value is an absolute or relative length unit Style to control an element's tracking word-spacing: value Where value is an absolute or relative length unit Also, you can set the line height: line-height: value Where value is a number, absolute or relative length unit, or percentage unit Standard line height is 1.2 and double-spaced is 2 line-height: 2 In addition, you can set the indentation of the first line: text-indent: value ^ top 3.2.4: Setting Font Styles, Weights, and Other Decorative Features You can specify the style (such as italic) using: font-style: value With possible values: normal | italic | oblique You can apply heavier fonts, for instance as bold face, using: font-weight: value Where value is one of: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 Also, you can specify a text decoration, such as underline, using: text-decoration: value Where value is one of: none | [ underline || overline || line-through || blink ] In addition, you can transform text using: text-transform: value Where value is one of: none | capitalize | uppercase | lowercase And finally, you can display text in uppercase but using small fonts with: font-variant: value Where value is one of: normal | small-caps Small caps are often used to indicate importance but with smaller text so as not to detract from other elements in the document ^ top 3.2.5: Aligning Text You can align text horizontally using: text-align: value Where value is one of: left | right | center | justify Also, you can align text vertically using: vertical-align: value Where value is one of: baseline | sub | super | top | text-top | middle | bottom | text-bottom Another option for vertical alignment is as a percentage of the line height For example: vertical-align: 25% or vertical-align: -25% ^ top 3.2.6: Combining Text Formatting into a Single Style We have covered a lot of text and font styles You can combine them into a single font style using: font: font-style font-variant font-weight font-size/line-height font-family For example, applying the following to a paragraph: font: italic normal bold 12pt/14pt Arial, sans-serif Renders the text as: font: italic normal bold 12pt/14pt Arial, sans-serif You can omit elements but cannot change their order ^ top 3.2.7: Summary In this section we reviewed the different styles for fonts and text We covered choosing fonts: font-family: fonts Setting the size of a font: font-size: size And how to control spacing and indentation We also covered how to set font styles, weights, and other decorative features In addition, we discussed how to alight text both horizontally and vertically Finally, we discussed how to combine various styles into one statement: font: font-style font-variant font-weight font-size/line-height font-family With all the options, getting just the look you want can be daunting One useful tool is the CSS Font and Text Style Wizard Check Yourself Use the Review Questions 12-17 on page REV 93 of the textbook to check your understanding. ^ top Activity 3.2 Take one minute to read over the following Quick Quiz questions. We will discuss the questions in one minute. Quick Quiz Which of the styles below will render text with an underline? text-underline: underline font-decoration: underline text-decoration: underline font-underline: underline AnswerC Which of the font sizing examples below allows the text to be scalable: font-size: 2em text-size: 2ex font-height: 2px text-style: 2cm AnswerA Kerning refers to the amount of space between words and leading refers to the amount of space between letters. True False AnswerFalse To increase a font size by 20%, set the font-size property to ________120%. ^ top 3.3: Displaying Colors and Images Learner Outcomes At the end of the lesson the student will be able to: Apply image and color styles ^ top 3.3.1: Setting Colors CSS provides several different style for adding color and images to web pages Foreground color is added with the style: color: value Background color is added with the style: background-color: value | transparent Color values are either a keyword or an RGB (Red, Green, Blue) value The 16 keyword values are taken from the Windows VGA palette: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow RGB colors are given in one of four ways: #rrggbb (e.g., #ff0000) #rgb (e.g., #f00) rgb(x,x,x) where x is an integer between 0 and 255 inclusive (e.g., rgb(255,0,0)) rgb(y%,y%,y%) where y is a number between 0.0 and 100.0 inclusive (e.g., rgb(100%,0%,0%)) Color reference charts can help you decide which color code produces a certain color Here is one from www.htmlhelp.com: RGB Color Chart ^ top 3.3.2: Setting a Background Image You can set a background image for almost any element Properties you can set on a background image: The source of the image file Where the image is placed in the background of the element How the image is repeated across the background of the element Whether the image scrolls with the display window You apply a background image with the style: background-image: url Here is an example from W3 Schools Background Repeat By default, background images are tiled both horizontally and vertically You can adjust this using: background-repeat: value With possible values: repeat | repeat-x | repeat-y | no-repeat The repeat-x value will repeat the image horizontally and the repeat-y value will repeat the image vertically See the textbook Figure 2-7 on page REV 64 for a diagram showing the different repeat values Background Position You can set the initial position of a background image using: background-position: horizontalValue verticalValue Possible horizontal values: left | center | right | percentage | length Possible vertical values: top | center | bottom | percentage | length Percentages are relative to the size of the element Lengths are specified in: em, ex, px, in, cm, mm, pt or pt If only a horizontal value is given, the vertical value defaults to 50% Here is an example from W3 Schools Background Scrolling By default, a background image moves with the element when it is scrolled You can change the behavior using: background-attachment: value With possible values: scroll | fixed Here is an example from W3 Schools Combining Background Properties You can combine the background properties into a single style using: background: color url(url) repeat attachment position Here is an example from W3 Schools ^ top 3.3.3: Summary In this section we reviewed how to set colors for the foreground and background Foreground color is added with the style: color: value Background color is added with the style: background-color: value | transparent Also, we looked at setting a background image: background-image: url Background images have various styles for repeating, positioning and attaching images, which you can set individually or combine into one style: background: color url(url) repeat attachment position Check Yourself Use the Review Questions 18-19 on page REV 93 of the textbook to check your understanding. ^ top Activity 3.3 Take one minute to read over the following Quick Quiz questions. We will discuss the questions in one minute. Quick Quiz The _________ style is used to define an element's foreground color. color fore-color color-fore foreground-color AnswerA To apply a background image, you would use the _______________background-image style. By default, background images are tiled horizontally, but not vertically. True False AnswerFalse ^ top 3.4: Sizing and Positioning Elements Learner Outcomes At the end of the lesson the student will be able to: Code size and position elements on a page ^ top 3.4.1: Sizing Elements By default, the size of each element is determine by either: Content (example: paragraph height determined by number of lines of text) Size of its containing element (example: paragraph width expands to the size of its container) You can override the width or the height of these defaults To set the width use: width: value To set the height use: height: value Where value is one of: percentage | length | auto Percentages are relative to the size of the element Lengths are specified in: em, ex, px, in, cm, mm, pt or pt Handling Content Overflow If you set the width or the height, you run the risk of content overflow You can control how the browser handles extra content using: overflow: value Where value is one of: visible | hidden | scroll | auto See the textbook Figure 2-8 on page REV 66 for a diagram showing the different overflow values Also, you can see the effects in the article: The overflow declaration ^ top 3.4.2: Working with Borders, Margins and Padding For each page element, CSS defines a box model The box model contains the elements: Margin between the box and other elements Border of the box Padding between element's content and border Element's content These elements are shown in the following diagram: Working with Margins You can control the size of the margin of a page element using: margin-top: value margin-right: value margin-bottom: value margin-left: value Where value is one of: percentage | length | auto Percentages are relative to the size of the element Lengths are specified in: em, ex, px, in, cm, mm, pt or pt Also, you can combine all four margin settings using: margin: top right bottom left Working with Borders Borders are a little more complicated than margins You can define thickness, color and style to one side at a time or all four sides at once To set the width to one side of an element: border-top-width: value border-right-width: value border-bottom-width: value border-left-width: value Where value is one of: thin | medium | thick | length To set the width to all sides at once, apply values in the order shown: border-width: top right bottom left To set the color to one side of an element: border-top-color: colorValue border-right-color: colorValue border-bottom-color: colorValue border-left-color: colorValue To set the color to all sides at once, use four values in the order shown: border-width: top right bottom left If only one value is given, it applies to all four sides If two or three values are given, the missing values are taken from the opposite side To set the style to one side of an element: border-top-style: value border-right-style: value border-bottom-style: value border-left-style: value Where value is one of: none | dotted | dashed | solid | double | groove | ridge | inset | outset To set the style to all sides at once, apply values in the order shown: border-style: top right bottom left See the textbook Figure 2-12 on page REV 70 for a diagram showing how the different styles are rendered Also, you can format the entire border at one using: border: width style color The border property can only set all four borders at one time with a single value for each property Working with Padding To increase the space between element content and its border, you use the padding style You can control the size of the padding of a page element using: padding-top: value padding-right: value padding-bottom: value padding-left: value Where value is one of: percentage | length Percentages are relative to the size of the element Lengths are specified in: em, ex, px, in, cm, mm, pt or pt Also, you can combine all four padding settings in the order shown here: padding: top right bottom left ^ top 3.4.3: Positioning Elements Every page element is placed using the default settings of the web browser You can override these settings and place an element at specific coordinates on the page You can set the position of an element using: position: type; top:value; right:value; bottom:value; left:value Where type is one of: absolute | relative | static | fixed | inherit And where value is the coordinates of the particular edge Static positioning is the default type, which lets browsers place an element where it flows in the document Thus, using static is like using no positioning at all Using inherit get the positioning from the parent element Absolute Positioning Absolute Positioning places an element at defined coordinates within its parent element If the parent is the body element, then the positioning is against the viewport For example, if we create a div box as follows: div#abs { position: absolute; top: 1em; left: 20%; width: 60%; } We get a layout as shown in the following image: Note that width is used to set the width of the box and is not part of the position style If the box is positioned against another element, then that element controls the positioning You can see this in the example: Absolute Positioning View the source to see the embedded CSS Relative Positioning Relative positioning moves an element from where the browser would normally place it For example, if we define the position: #two { position: relative; top: 1em; left: 1em; } The second element (with an id of two) moves down 1 em and left 1 em You can see this in the example: Relative Positioning View the source to see the embedded CSS Fixed Positioning Fixed positioning places the element at a fixed location in the display window The element remains in that location and does not scroll This is how you can implement sidebars without tables or frames You can see this in the example: Fixed Positioning View the source to see the embedded CSS Note the float style, which we discuss in the next section ^ top 3.4.4: Floating an Element Floating an element places the element alongside the left or right margin of the page or containing element To float an element use: float: margin Where margin is: left | right This is shown in the following diagram from page REV 74 of the textbook The Float Style ^ top 3.4.5: Stacking Elements By default elements defined later in a document are placed on top of earlier elements To specify a different stacking order use: z-index: value Where value is a positive or negative integer, or the keyword auto Elements are stacked based on z-index values This is shown in the following diagram from page REV 76 of the textbook Using the z-index Style ^ top 3.4.6: Setting the Element Display Style Most page elements are classified as either inline elements or block-level elements Their classification determines how they are displayed Block-level elements create vertically distinct blocks of content Generally using a line-break before and after the content In-line elements do not create distinct blocks of content CSS can be used to change the display style applied to any element You can set the element display style using: display: type Where the types are listed in Figure 2-18 on page REV 76 of the textbook ^ top 3.4.7: Hiding Elements CSS allows you to hide an element in two different ways First, you can set the value of the display style to "none" For example: address {display: none} Another way is to use the visibility style You can set the visibility style using: visibility: type Where type is one of: visible | hidden | collapse | inherit Note that once an element is hidden, it cannot become visible again Why Hide an Element? If an element is hidden, why would you include it in a page? It turns out that JavaScript can change the properties of elements Thus, we can use JavaScript to make a hidden element visible again We will discuss how to do this later in the course ^ top 3.4.8: Summary In this section we reviewed how to set the width and height of page elements To set the width use: width: value To set the height use: height: value Then we moved on to setting borders, margins and padding These settings are based on the CSS box model shown in the following diagram: Every page element is placed using the default settings of the web browser You can override these settings and place an element at specific coordinates on the page You can set the position of an element using: position: type; top:value; right:value; bottom:value; left:value Where type is one of: absolute | relative | static | fixed | inherit And where value is the coordinates of the particular edge We looked at examples of absolute and relative positioning Then we looked at how to float an element alongside the left or right margin of the containing element float: left | right Since CSS lets you overlap elements, we looked at how to change their stacking order using: z-index: value In addition, we looked at how you can change the element display style using: display: type Where the types are listed in Figure 2-18 of the textbook Finally, we looked at two ways of hiding an element The first way is to set the display value: display: none The second way is to set the visibility style: visibility: hidden Check Yourself Use the Review Questions 20-24 on page REV 93 of the textbook to check your understanding. ^ top Activity 3.4 Take one minute to read over the following Quick Quiz questions. We will discuss the questions in one minute. Quick Quiz The content in a box element is spaced 5px from all four borders of the box. What code below would accomplish this? box-spacing: 5px text-spacing: 5px padding: 5px full-padding: 5px AnswerC There is no difference between absolute and relative positioning. True False AnswerFalse By default, all elements on a Web page are placed using ________static positioning. ^ top 3.5: Working with Selectors, Media and Print Styles Learner Outcomes At the end of the lesson the student will be able to: Work with ids, classes, pseudo-elements, and pseudo-classes Create style sheets for different media types Develop styles for printed output ^ top 3.5.1: Working with Selectors So far we have looked at styles applied to individual elements CSS lets you apply styles to types of elements using selectors This capability allows you to apply styles to a group of elements For example, if you had the following declarations: h1 {font-family: sans-serif; } h2 {font-family: sans-serif; } h3 {font-family: sans-serif; } h4 {font-family: sans-serif; } h5 {font-family: sans-serif; } h6 {font-family: sans-serif; } CSS lets you combine selectors with a single declaration like: h1, h2, h3, h4, h5, h6 {font-family: sans-serif; } Even with the grouping, you can select elements for individual styles For instance: h1, h2, h3, h4, h5, h6 {font-family: sans-serif; } h1 {color: red; } ^ top 3.5.2: Contextual Selectors Another way to chose a group of elements to apply styles is to use contextual selectors A contextual selector takes the form of: parent descendant { styles } You use contextual selectors to apply a style based on the context in which an element is used For example, you could use the following style to apply the color blue to boldface styles: b {color: blue } However, if you only wanted to apply the color to boldface in a list element, you would use: li b {color: blue } You can use contextual selectors in a number of patterns, which are listed in Figure 2-20 on page REV 79 of the textbook ^ top 3.5.3: Attribute Selectors You can use element attributes to refine the selectors used to apply styles To select using attributes you use the format: element[attribute] { styles } The textbook on page REV 80 shows an example of selecting based on the href attribute of an anchor element (<a>) You can use the href attribute to distinguish between links and anchors in a page For example: a[href] { color: blue; } Figure 2-22 on page REV 80 of the textbook lists the various attribute selectors and gives examples of their use ^ top 3.5.4: Applying Styles to IDs and Classes CSS provides selectors so you can apply styles to elements based on their id and class values To apply a style to an element based on the value of its id attribute: #id { styles } We saw this in the example: Absolute Positioning You can use the class attribute used to identify a group of elements To apply a style to a group of elements based on value of class attribute: .class { styles } Also, you can apply class styles to specific elements using: element.class { styles } You can see how class styles work in the following example adapted from page REV 81 of the textbook Examples Applying Style to a Class 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Class Style Example</title> <style> .fruit {color: red; } .vegetable {color: green;} </style> </head> <body> <h1>Class Style Example</h1> <ul> <li class="fruit">Apples</li> <li class="vegetable">Carrots</li> <li class="fruit">Grapes</li> <li class="vegetable">Lettuce</li> <li class="fruit">Melons</li> <li class="vegetable">Onions</li> </ul> </body> </html> View the file ^ top 3.5.5: Applying Styles to Pseudo-classes and Pseudo-elements Another selector form is based on pseudo-classes A pseudo-class is a classification of an element based on its status, position or current use in a document For instance, one pseudo-class indicates whether a user has previously visited a link Pseudo-classes are often used to create rollover effects To apply a style to a pseudo-class: selector:pseudoclass { styles } For example: a:visited {color: red;} For a list of pseudo-classes, see Figure 2-25 on page REV 83 of the textbook Also see the W3C documentation on: Pseudo-classes Pseudo-elements A pseudo-element lets you define elements that are not actual elements in the document For example, a paragraph element is part of a document but the first letter of a paragraph is not There is no "first letter" element The first letter element does not exist, but you can specify a style for it using a pseudo-element CSS supports several pseudo-elements as listed in Figure 2-26 on page REV 84 of the textbook ^ top 3.5.6: Working with Different Media You can specify CSS to work with different media You can specify the style sheet to use for different media in the link element: <link href="name.css rel="stylesheet" type=text/css" media="mediaType"> Where mediaType is one of those listed in the table below You can add the media attribute to the style element for an embedded stylesheet Another way to specify the media is in the CSS itself using the @media rule To specify output media within a style sheet: @media type { styles } The @media rule allows you to consolidate your styles within a single style sheet However, consolidation can result in larger and complicated files Values of the Media Attribute screen (the default): for continuous (non-paged) computer screens all: for all devices aural: for speech synthesizers braille: for braille tactile feedback devices handheld: for handheld devices (characterized by a small, monochrome display and limited bandwidth) print: for output to a printer projection: for projectors tty: for fixed-pitch character grid displays (such as the display used by Lynx) tv: for television-type devices with low resolution and limited scrollability ^ top 3.5.7: Using Print Styles CSS2 defines printed pages by extending the box model to incorporate the entire page in a page box The rule to create and define a page box: @page { styles } You can use pseudo-classes or page names to define multiple page styles within the same document Supported pseudo-classes: first, left, right Note that printing depends on your browser and its settings Since you cannot predict the browser and the settings, you cannot control the results completely Setting the Page Size Size style is used to define size of the output page size: width height orientation Where orientation is either portrait or landscape For example: @page { size: 8.5in 11in landscape; } Note that not all browsers support all CSS2 styles Thus, your brpwser Page Breaks There are both page-break-before and page-break-after styles: page-break-before: type page-break-after: type Where type is: always | avoid | left | right | auto | inherit CSS allows you to deal with widows and orphans as well A widow is the final few lines of an element's text when they appear at the top of a page An orphan is the first few lines of an element's text when they appear at the bottom of a page The styles to control widows and orphans are: widow: value orphan: value Where value is the number of lines that must appear before the page break is inserted For example, if you wanted three lines before and after page breaks: p { widow: 3; orphan: 3; } Browsers attempt to use page breaks that obey these guidelines: Apply page-break-before and page-break-after styles Avoid inserting page breaks where indicated in style sheet Break pages as few times as possible Avoid breaking inside of a table Avoid breaking inside of a floating element Only after all these rules are widow and orphan controls applied Printed Media Example Here is an example page and print style for the page modified from: CSS:Getting Started:Media Even though you see a single page in a browser, its prints as two pages I verified that page breaks work with Firefox 1.5 and IE 6 However, IE does not handle the title element correctly ^ top 3.5.8: Summary In this section we looked at selector forms and how to apply styles based on their uses in documents, their id values and their classes Also, we looked at how to work with pseudo-classes and pseudo-elements We concluded with a review of applying style sheets for different media and specific styles for printed output Check Yourself Use the Review Questions 25-31 on page REV 93 of the textbook to check your understanding. ^ top Activity 3.5 Take one minute to review the Check Yourself questions. We will discuss the questions as time permits. ^ top Wrap Up Due Next: A3: Applying CSS (9/25/06) Discussion 2 and Quiz 2 (9/25/06) ^ top Home | WebCT | Announcements | Schedule | Room Policies | Course Info Help | FAQ's | HowTo's | Links Last Updated: November 18 2006 @17:39:43