Tutorial Four Creating Special Effects with CSS by ncm15194


									New Perspectives on HTML and XHTML                                                                                   1 of 8


                                    Tutorial Four: Creating Special Effects with CSS 

Chapter Objectives 
Session 4.1                                                            •    Work with overflow and clipping styles 
    • Work with CSS Selectors                                          •    Create stacked objects 
    • Create styles for lists                                      
    • Create and apply class styles                               Session 4.3 
    • Create a rollover effect                                        • Apply styles to various media 
    • Create a drop‐cap using a pseudo‐element                        • Hide elements from printing 
                                                                      • Create and apply printer styles 
Session 4.2                                                           • Create and prohibit page breaks from 
    • Manage page layout with CSS                                          printing

HTML 200: Working with Selector Patterns 
Groups of selectors 
When several selectors share the same declarations, they may be grouped into a comma‐separated list.  
CSS example(s):  
In this example, we condense three rules with identical declarations into one. Thus,  
h1 { font‐family: sans‐serif } 
h2 { font‐family: sans‐serif } 
h3 { font‐family: sans‐serif }is equivalent to:  
h1, h2, h3 { font‐family: sans‐serif } 
Contextual Selectors 
These allow you to address the nesting of the document: 
em { font‐style: italic }  
em em { font‐style: normal } 
Nested em's revert to normal font  
ul li { font‐size: medium; color: red }  
ul ul li { font‐size: small }  
ul ul ul li {font‐size: x‐small } 
Nested unordered lists use smaller fonts  
More specific selectors take precedence ,but all selectors apply. So since the first ul li rule sets the color to red, all nested 
li's are red too. 
Attribute Selectors 
Attribute values must be identifiers or strings. The case‐sensitivity of attribute names and values in selectors depends on 
the document language. 
The following attribute selector represents an h1 element that carries the title attribute, whatever its value: 
h1[title]In the following example, the selector represents a span element whose class attribute has exactly the value 
       New Perspectives on HTML and XHTML                                                                            2 of 8

span[class="example"]Multiple attribute selectors can be used to represent several attributes of an element, or several 
conditions on the same attribute. Here, the selector represents a span element whose hello attribute has exactly the 
value "Cleveland" and whose goodbye attribute has exactly the value "Columbus": 
Tip: Each browser has built‐in margin and padding values for different page elements. You can ensure that your own 
values have precedence by applying the style declaration * {margin: 0; padding: 0} to “erase” all of the default margin and 
padding settings. (HTML 203) 
InSight: Conditional Comments and Internet Explorer (HTML 207) 
Quick Quiz: 
         1. True/False: Contextual and attribute selectors are not yet fully supported by all browsers, so you should use 
             them sparingly in your documents.  
         2. True/False: Attribute selectors can be used to identify anchors with a particular href value.  
         3. True/False: To select an image with a source file that begins with “my,” you would use a contextual selector.  

HTML 207: Applying Styles to Lists 
    The list properties allow basic visual formatting of lists.  
    Value:   disc | circle | square | decimal | decimal‐leading‐zero | lower‐roman | upper‐roman | lower‐greek | lower‐
    alpha | lower‐latin | upper‐alpha | upper‐latin | hebrew | armenian | georgian | cjk‐ideographic | hiragana | 
    katakana | hiragana‐iroha | katakana‐iroha | none | inherit   
    Initial:   disc   
    Applies to:   elements with 'display: list‐item'   
    The list‐style‐image property replaces the list‐item marker with an image. 
    Note: Always specify a "list‐style‐type" property in case the image is unavailable. 
    list‐style‐image: url(blueball.gif); 
    list‐style‐type: circle 
    The list‐style‐position property places the list‐item marker in the list. 
    This list has a list‐style‐position with a value of "inside": 
    • Earl Grey Tea ‐ A fine black tea  
    • Jasmine Tea ‐ A fabulous "all purpose" tea  
    • Honeybush Tea ‐ A super fruity delight tea  
    This list has a list‐style‐position with a value of "outside": 
         • Earl Grey Tea ‐ A fine black tea  
         • Jasmine Tea ‐ A fabulous "all purpose" tea  
         • Honeybush Tea ‐ A super fruity delight tea  
      New Perspectives on HTML and XHTML                                                                                  3 of 8

    Tip: Web browsers always place bullets to the left of the list text. To create a right‐side bullet marker, add a 
    background image containing the marker symbol to each list item, placing the image on the right border of the list 
    element. (HTML 210) 
    Tip: You can change a vertical list into a horizontal list by changing the display style of the list elements to inline. 
    (HTML 213) 
    Quick Quiz: 
        1. True/False: You cannot use your own images as bullets in your list.  
        2. True/False: You can either specify a list type or a list image in a list‐style, but not both.  

HTML 213: Working with Classes 
    In the CSS, a class selector is a name preceded by a full stop (.) and an ID selector is a
    name preceded by a hash character (#).
    Using IDs and Classes 
    IDs and classes are important concepts. You must be comfortable with these definitions before you can use style 
    sheets effectively. You can assign an ID to any item in a Web page. Once the item has an ID, it can be referred to in a 
    style sheet. 
    Think of your Web page‐book analogy. Each part of a book has a name: the title, the cover, the spine, the page 
    numbers, etc. Names correspond to IDs. If a part didn’t have a name (or ID) how would you say that it should appear 
    a certain way? For items that don’t already have names, a name can be created. Furthermore, items that already 
    have general names, such as “paragraph” sometimes need unique names, such as “introparagraph” Indeed, 
    “introparagraph” would make a good ID for an introductory paragraph that will appear on several Web pages. 
    IDs must be unique; that is, no two elements can have the same ID. If you want to treat a group of elements as a unit, 
    you can designate them as a class.  
    Once you’ve assigned IDs to elements and classes, you can use them to apply styles to specific items. 
     Quick Quiz: 
         1. True/False: .subtitle {color: blue} creates a class that can only be used with H1 elements.  
         2. True/False: A class can be used with contextual selectors as well as by themselves.  

HTML 215: Using Pseudo‐Classes and Pseudo‐Elements 
    Using Pseudo‐Classes and Pseudo‐Elements 
    Pseudo classes are added to define style rules for selectors. They add special effects to certain selectors. Pseudo classes
    are automatically recognized by CSS supporting browsers. Pseudo elements are pseudo classes that allow you to define
    the style rules for a subpart of an element's content. Pseudo classes and pseudo elements are always preceded by a
    colon. Most pseudo classes and elements also require being explicitly associated with only some specific tags, since
    they don't make sense when applied to other elements.

    Selector : pseudo-class { property : value;}

    With pseudo classes you have the ability to add effects to your anchor tags, otherwise known
    as 'hyperlinks'.

    Some most common pseudo classes used for styling hyperlinks are :
  New Perspectives on HTML and XHTML                                                              4 of 8

: Link

Link pseudo-class specifies the style rule for unvisited links, i.e. the link which has not yet
been clicked or the mouse pointer has not passed over it.

A: link { color : green ;}


Visited pseudo-class specifies the style rule for visited links, i.e. the link which has already
been clicked. Once the user has visited the link, its color is usually changed, so that the user
recognizes which links are still unvisited.

A : visited { color : red font-weight : bold ;}


Hover pseudo-class specifies the style rule for element that is presently under the mouse
cursor. The cursor is said to hover over the link.

A : hover { color : yellow;}


Active pseudo-class specifies the style rule for element that is presently under the focus, i.e.
the link has been currently selected.

A : active { color : black         font-size : 18pt;}

The order in which these pseudo-classes should be used is a: link, a: visited, a:
hover and then a: active, so as their definition is effective.


It specifies the style rule to the first element which is contained inside a parent element.

p : first-child { color : gray;}
  New Perspectives on HTML and XHTML                                                                                 5 of 8


It specifies the style rule to the contents of an element that has been written in a foreign language. The language code is
to be declared before enclosing the language code within the parentheses.

p : lang ( fr ) { color : purple;}

This is not well supported by browsers.

Pseudo-elements are very similar to pseudo-classes but also define contents within the document. Pseudo-elements
determine the style rules for a sub-part of an element's content.

      Selector : pseudo-element { property : value}

Some of the pseudo-elements are defined below.


It allows you to add styles to the first-letter of an element. This pseudo-element is mostly
used with paragraph elements to enhance the appearance of first-letter in the paragraph.

  p : first-letter { color -red; font-size:18pt;}

                      First letter is red.


It allows you to add styles to the first-line of an element. This pseudo-element is mostly used with paragraph elements
to enhance the appearance of first-line in the paragraph.

  p : first-line { color-yellow; font-size:18pt;}

                   In this example, only the first line has the font color yellow. Rest of the
  paragraph         follows the blue color. Also, the font-size of the first line is 18 pts, whereas
  the rest of the lines have font-size as 12 pts.


It allows you to add some content before an element. This pseudo-element is used in conjunction with the content
property. You can also specify the styles to the content.
      New Perspectives on HTML and XHTML                                                                                6 of 8

    p : before { content : "SURPRISE !!!";}

    SURPRISE !!! You have won a lottery ticket.

    This is not supported by certain web browsers.


    It allows you to add some content after an element. This pseudo-element is also used in conjunction with the content
    property. You can specify the styles to the content.

    after { content : "BETTER LUCK NEXT TIME";}
    This is not supported by certain web browsers.

     Quick Quiz: 

        1.   Which pseudo‐element should be placed last when creating a rollover effect? 
                 a. active 
                 b. link 
                 c. hover 
                 d. visited  
        2.   True/False: You can only create a drop cap effect using pseudo‐elements.  
        3.   The _______ attribute can be used as an alternative to specify a format for active links, but it is deprecated.  

HTML 222: Positioning Objects with CSS 
    Positioning Objects with CSS 
    A powerful capability of CSS is the ability to position objects precisely on a page. The textbook uses the example of 
    notes that appear as callouts, describing a graphic on a Web page, but many other uses are possible. The example 
    HTML in Figure 7‐57 shows how to use the div element to insert the text. 
    The position style indicates where on the page the text should go (expressed in the usual CSS measuring units). You 
    can specify static, absolute, relative, fixed and inherit positioning. 
    Static positioning allows the browser to place the object based on where it flows in the document. This is essentially 
    the same as not specifying any positioning at all. Absolute positioning indicates exactly where on the page the 
    element should go, based on specific coordinates. Relative positioning indicates that the item should go in a certain 
    place, relative to its default position. Fixed positioning allows you to keep an element in one place, while the rest of 
    the page scrolls by. Inherit positioning allows an element to inherit 
    the position value of its parent. 
    Tip: You can enter negative values for the top and left styles to move page elements up and to the left from their 
    default locations. (HTML 230) 
       New Perspectives on HTML and XHTML                                                                                7 of 8

    Quick Quiz: 
        1. Which positioning attribute causes the browser to place an object based on where it flows in the document? 
                 a. Static 
                 b. Absolute 
                 c. Relative 
                 d. Fixed  
        1. If you want an element to stay in one spot, while the text scrolls by around it, use ________________ 

HTML 234: Working with Overflow and Clipping 

    Working with Overflow and Clipping 
    Figure 7‐65 shows what happens to positioned objects when their content is too large for the area defined. 
    You can control how HTML handles the overflow with the overflow property. Auto is a good choice if the content 
    could be too large for the position. 
    The clip style is similar to the overflow style. The clip style allows you to define a rectangular region through which 
    the element’s content can be viewed. Anything outside the boundary is hidden. 
     Quick Quiz: 
        1. Which of the following overflow types is the default? 
                   a. scroll 
                   b. hidden 
                   c. visible 
                   d. auto  
        2. If you want your overflow to appear in a box with scroll bars, use _______________ for your overflow 
        3. True/False: All Internet Explorer versions support CSS maximum widths.  

HTML 238: Stacking Elements 

    Stacking Elements 
    Elements placed using CSS positioning are displayed on top of elements that are not. And, elements that are 
    formatted later in an HTML document are placed atop elements that were displayed earlier. If you want to control 
    this, you should specify a stacking order using the z‐index style. The z‐index style works only for elements that are 
    placed with absolute positioning.

    Quick Quiz: 
        1. True/False: To alter the default stacking order you use the z‐index style.  
        2. True/False: You can use z‐index with all types of positioning.  

HTML 239: Working with Different Media 

Working with Different Media 

Web pages can be viewed on different types of media, in addition to computer screens. Examples of different media 
include handheld computers and projectors. You may find that you want to create different rules for how different devices 
should display your Web page. You can use the media attribute in a style declaration or style sheet to specify that its styles 
are specific to a certain kind of device. 
      New Perspectives on HTML and XHTML                                                                               8 of 8

You can also use the @media rule to specify styles associated with that media type. Page 410 of the textbooks shows 
some examples of how to use the @media rule. 
Media types can be grouped based on their characteristics. Media groups are important because the CSS2 specifications 
indicate which media group a particular style belongs to, rather than the specific media device. 
Quick Quiz: 
         1. True/False: The default media type is screen for Web pages.  
         2. True/False: A computer screen belongs to continuous, aural, and bitmap media groups.  
         3. You can create a style for a specific media from within a style sheet using ________________.  

HTML 245: Hiding Elements 
    Hiding Elements 
    Sometimes you want to be able to hide elements, especially for ease of printing. Certain elements might be attractive 
    or beneficial when a page is displayed on a browser, but may interfere with the page’s usefulness  when the page is 
    printed. Examples of elements like this include complicated color graphics on a recipe page; the reader is interested 
    in printing the recipe so it can be used in a kitchen, and doesn’t need the pretty little picture of the muffin that will 
    only slow down the printer and use up the ink. 
    You can use either the display style or the visibility style to hide elements. The best way to hide elements is to use the 
    display style with a value of none. The visibility: hidden style lets the hidden object remain in the page flow, causing a 
    gap in the page where the element was located. Figure 7‐73 shows an illustration of the two styles. 
    You would include the display or visibility style in a cascading style sheet or style declaration that would be used with 
    a printer or with paged media. Figures 7‐74 through 7‐76 show the HTML code. 
    Tip: You can also hide an element by stacking other elements on top of it using CSS positioning and the z‐index style. 
    (HTML 246) 
     Quick Quiz: 
         1. To hide an element, but keep it in the flow of the document, use the _____ style.  
         2. True/False: Display: none causes an element not to be shown and removes it from the flow of the document.  

HTML 248: Using Print Styles 
    Using Print Styles 
    Review the box model. Multiple pages can be handled at a time by designating pseudo‐classes or page names for 
    first, left, and right hand pages. The general rule to create and define a page box is @page {styles} where styles are 
    the styles you want to apply to the page. You can control page size; display or hide crop marks; and work with page 
    breaks (for widow and orphan control). The Reference Window on page 420 shows the details about working with 
    print styles. 
    Tip: To fit your Web document to a printed page, use absolute units such as inches and centimeters. Do not use pixels 
    or relative units. (HTML 248) 
     Quick Quiz: 
          1. True/False: When specifying margins for printing, it is best to use pixels.  
          2. True/False: You can cause elements to print on a page by themselves using the page: large_margin style.  

To top