Tutorial 4 Creating Special Effects with CSS
Selector Patterns On a Web page, elements are nested within other elements, forming a hierarchical tree structure Nested within the <body> element. Nested within <p> elements. Pg 201 We use the terms Parent, Child and descendant when talking about the relationships between elements. In this case the B element on the end of the second row is considered a Child of the P element above it, the P element is the Parent. All elements on the page are descendants of the body element at the top Nested within <span> element.
Selector Patterns CSS contextual selectors express the location of an element li b {color: blue} all <b> elements that are nested withn <li> li b, h2 {color: blue} all <b> elements that are nested within <li> and also all <h2> elements #note b {color: blue} all <b> elements that are nested within the element that has id=“note” * {color: blue} all elements in the web page p > b {color: blue} all <b> elements that are direct children of <p> elements. A contextual selector is one where in the style is applied based upon the context of the selector. In the first example above, not all <b> elements are selected, only those within <li> elements ( ** Not supported in IE7 )
Selector Patterns .notes p {font-size: 8pt} all <p> elements that are nested within an element that has class=“notes” .notes span {color: yellow} all <span> elements that are nested within an element that has class=“notes” .notes a:hover {color: blue} all links that are nested within an element that has class=“notes” when the mouse hovers over the link .notes {display: list-item} all elements that have class=“notes” We will cover classes in a few slides but briefly: IDs pertain to exactly one element and are designated with a pound sign (#) in front of them. Classes pertain to one ore more elements and are designated with period (.) in front of them. examples/052_pg-203-contextual-selector.htm
Selector Patterns Pg 206 Here we define a selector ID named Pullout and indicate that it will have solid bottom border. Note that only the pullout h2 element is affected, the other h2 elements on the screen are not affected.
Working with Selector Patterns Conditional comments allow you to apply different HTML code for different versions of Internet Explorer <!-- [if condition IE version]> HTML code <![endif]--> Different HTML code for different browsers that are NOT Internet Explorer <!-- [if !IE]><!--> HTML code <![endif]--> Pg 207 Just briefly mention this New Perspectives on HTML, XHTML, and Dynamic HTML, 4e
Applying Styles to Lists To specify the list marker displayed by the browser, you can apply the style list-style-type: type Pg 207 examples/053_pg-208-list-styles.htm
Applying Styles to Lists Pg 209 Quickly, just indicate that you can nest lists and nest styles in lists. Refer to my HTML review section for a one-level nesting of lists New Perspectives on HTML, XHTML, and Dynamic HTML, 4e
Applying Styles to Lists Most browsers place the list marker to the left of the block, lining up the markers with each list item list-style-position: position Pg 211 Two style positions: inside, outside New Perspectives on HTML, XHTML, and Dynamic HTML, 4e
Working with Classes The class attribute is used when you want to identify elements that share a common characteristic <elem class="class"> ... </elem> You can use the class attribute to assign the same style to multiple elements sharing the same class value .class {styles} class =“notes” is assigned to the <div> examples/053a_pg-213-classes.htm Pg 213 See: examples/053a_pg-213_classes.htm ID elements are defined with the ID keyword in HTML code and are referenced in style sheets with a pound sign. <p id=“firstpar”> #firstpar {color: red; font-family: “Times New Roman”> IDs pertain to one specific element on a Web page. However, it’s possible to specify a style to a class of elements by using the class attribute. The class attribute is specified with a period in the style sheet: <p class=otherpar>sdfsdfsdfsdfsdfsdf </p> <p class=otherpar>werwerwerwerwrwe</p> <p class=otherpar> lwjrwelkjrwlkerjewrj</p> .otherpar {color: blue; font-family: sans-serif} An element can have both an ID and a class. It can only have one ID, but it can actually have more than one class. These styles are applied to <a> elements nested within an element of class “notes”.
Pseudo-Classes and Pseudo-Elements A pseudo-class is a classification of an element based on its current status, position, or use in the document selector:pseudo-class {styles} Pg 216 Online example on next slide These styles are applied to <a> elements nested within an element of class “notes” when the mouse hovers over the link.
Using Pseudo-Classes examples/054_pg-217-pseudo-classes-hover.htm Here we have four Pseudo Classes Regular links, Active links and Visited links will have no text-decoration done to them Text-Decoration: type underline overline line-through blink none (pg 150) Links that have the mouse hover over them will have their color changed to black and they will become underlined. From pg 216. It’s important to note that two or more classes can pertain to the same element. For instance a link ca be both previously visited and hovered over. In such situations, the standard cascading rules apply: the pseudo-class that is listed last in the style sheet will be applied to the element. For this reason, you should enter the hypertext pseudo-classes in an order that reflects how users interact with hypertext links. The link pseudo-class should come first, followed by the visited class, the over class, and finally the active class. If you do not code your links in this order, you may not get the results you expect. New Perspectives on HTML, XHTML, and Dynamic HTML, 4e examples/054_pg-217-pseudo-classes-hover.htm
Using Pseudo-Classes and Pseudo-Elements Pseudo-elements are abstracted from what we know of an element’s content, or position in the document selector:pseudo-element {styles} Pg 221. Whereas A pseudo-class is a classification of an element based on its current status, position, or use in the document, a pseudo-element is based on an elements content or position in a document. examples/054a_pg-221-pseudo-elements.htm New Perspectives on HTML, XHTML, and Dynamic HTML, 4e
Go to my Web site and download the files for Tutorial 4 http://www.kapple01.com/ccm/web2/home/web2_labdata.html Unzip the files into a work folder on your flash drive Go to pg 199 in text book and start the in-chapter exercise. Stop when you get to the end of the section on page 221 Pg 138 New Perspectives on HTML, XHTML, and Dynamic HTML, 4e
Positioning Objects with CSS Pg 223 The original version of HTML had very minimal capability of positioning elements on a page. Tables were introduced very early in the HTML evolution to facilitate the positioning of objects on a screen. They served a useful purpose. However, with CSS a much larger degree of flexibility in element positioning has been introduced. New Perspectives on HTML, XHTML, and Dynamic HTML, 4e
Positioning Objects with CSS Create div containers for each element you want to position Each element to be positioned should have a unique id <div id=firstcol> <p> Now that we have defined a div container and given it an ID, we are able to use styles to explicitly position it anywhere on the screen. </p> <img src="images/pic1.gif" alt="temp"> <p> Anything contained within the div container, for instance these two paragraphs and image, can be positioned explicitly anywhere on the screen. We will see this in the upcoming slides </p> </div> #firstcol {position: absolute; left 100px; top 50px } Here we have defined two paragraphs and an image inside of a <div> container. By using style positioning, we can now explicitly position the entire <div> container. Details on subsequent slides. New Perspectives on HTML, XHTML, and Dynamic HTML, 4e
Positioning Objects with CSS CSS-P (CSS-Positioning) became part of the specification for CSS2, and positioning styles were some of the first CSS2 styles to be adopted by browsers position: type; top: value; right: value; bottom: value; left: value; Absolute positioning enables you to place an element at specific coordinates either on a page or within a containing element position: absolute; left: 100px; top: 50px Relative positioning is used to move an element relative to its default position on the page position: relative; left: 100px; top: 50px Pg 226-231 The phrase “or within a containing element” is important, because absolute positioning is actually relative to the parent element. The difference between absolute and relative styles is that “Once an element has been placed using absolute positioning, it affects the placement of other objects on the Web page (pg 227)….Absolute positioning takes an element out of the normal flow of a document, so that any subsequent content flows into the space previously occupied by the element (pg 228). Relative positioning does not affect the position of other elements on a page, which retain their original positions as if the element had never been moved (pg 230). examples/054b-abs-rel-positioning.htm
Positioning Objects with CSS Pg 233 Here, each one of the notes has been given a specific ID and positioned absolutely on the page.
Positioning Objects with CSS “static” is the default position; it means the object is in it’s normal location in the flow of the document. John’s slide See: In Class Demonstrations\pg 226-232 positioning example 1 original.htm Using the static position, is like not using any position attribute at all. Elements on the slide will appear where they normally would. Here, the word “Outer” is the only thing in the “outer” div container, it appears on the page, Followed by the word “Inner” which is the only thing in the “inner” div container examples/055_pg-226-232-positioning-example1-original.htm
position: absolute ( new ) examples/060_pg-226-232-positioning-example2-absolute-outer.htm (Coordinates should have: px after them) “absolute” means the object’s position is specified relative to the position of its containing element. The containing element for “outer” is the body of the web page. 50 50 John’s slide See: In Class Demonstrations\pg 226-232 positioning example 2 absolute outer.htm Note here we have changed the Outer style from a position of static to absolute. However, the absolute values are relative to the parent element. If we go back to the previous slide, we see that the Outer div container is a child of the body element. Therefore, the absolute coordinates are relative to the body. ( original ) ( new ) Top edge of “outer” is 50px from the top of the page; left edge of “outer is 50px from the left edge of the page.
position: relative examples/065_pg-226-232-positioning-example-3-relative-outer-and-inner.htm (Coordinates should have: px after them) “relative” means the object’s position is specified relative to the position it would have occupied in the normal flow of the web page. ( original ) ( new) John’s slide See: In Class Demonstrations\pg 226-232 positioning example 3 relative outer and inner.htm Here the Outer element is move 50 pixels relative to where it would have appeared on the screen had we not used positioning. Note that it is over and down 50 form the original positioning. Whereas, on the previous slide it was over and down 50 from the top of the page because body was the parent element. Top edge and left edge of “outer” are +50px from their places in the normal flow. ( same is true of “inner” ) 50 50 50 50
Working with Overflow and Clipping If you want to force an element into a specified height and width, you have to define how the browser should handle a situation where content overflows the space allotted to the object overflow: type Pg 234 See powerpoint\pg-234-overflow.htm A value of visible instructs browsers to increase the height of an element to fit the overflow content. The hidden value keeps an element at the specified height and width and cuts off excess test. The scroll value keeps an element at the specified dimensions, but adds horizontal and vertical scroll bars to allow users to scroll through the overflow. Finally, the auto value keeps an element at the specified size, adding scroll bars only as they are needed. Note, that I’ve had problems getting visible to work under all conditions. It looks like it’s one of those options that does not enjoy full support. New Perspectives on HTML, XHTML, and Dynamic HTML, 4e examples/070_pg-234-overflow.htm
Working with Overflow and Clipping The clip style allows you to define a rectangular region through which the element’s content can be viewed clip: rect(top, right, bottom, left) Pg 236 A little confusing here. If given the coordinates of 10, 175, 125, 75, and remembering Top, Right, Bottom, Left This defines a region: whose top edge is 10 pixels from the top of the element Whose right edge is 175 pixels from the left side of the element Whose bottom edge is 125 pixels from the top of the element Whose left edge is 75 pixels from the left side of the element New Perspectives on HTML, XHTML, and Dynamic HTML, 4e examples/077_pg-236-clipping-images.htm
Stacking Elements Elements placed using CSS positioning are stacked on top of elements that are not To specify a different stacking order, use the style: z-index: value Higher z-index values display in “front” of lower z-index values. z-index is a style property: Pg 238 See: In Class Demonstrations\pg 238 z-index example.htm Positioning elements can sometimes lead to objects that overlap each other. By default, elements that are formatted later in an HTML document are stacked on top of ones that are formatted earlier. Also, elements that are placed using CSS positioning are stacked on top of elements that are not explicitly positioned. The z-index value is only relative to other elements with the same parent. Elements with different parents do not share Z-index values. examples/075_pg-238-z-index.htm
Go to pg 222 in text book and continue the in-chapter exercise. Stop when you get to the end of the section on page 239 New Perspectives on HTML, XHTML, and Dynamic HTML, 4e
Working with Different Media By default, a style sheet is applied to all devices, and each device must determine how best to match the styles to its own requirements CSS2 allows you to specify different styles for different Output devices with the media attribute in either the style element for embedded style sheets or the link element for external style sheets. <style type="text/css" media="type"> ... </style> or <link href="url" type="text/css" media="type" ... /> Pg 240 Mention that the support for a lot of the material in this section is not as wide-spread as we’ve seen so far. Some browsers do a better job of supporting the following material than other browsers, and not all browsers support the exact same elements. New Perspectives on HTML, XHTML, and Dynamic HTML, 4e
Working with Different Media Pg 241 New Perspectives on HTML, XHTML, and Dynamic HTML, 4e
Example: The html file links to 2 style sheets: one for screen and another for print. The <h2> element contains a nested <span> element. The style sheet for screen (scraps.css) includes these declarations. John’s slide After reviewing notes for slide, bounce back and forth between this slide and the next showing how the output will look different The HTML file links to two different style sheets, one which has a media type of screen, the other has a media type of print. The browser will determine what kind of media it is working with and apply the appropriate style for the given media. In other words, if you are viewing something on a screen, the browser will use: scraps.css. If, however, you are printing something, the browser will use: scraps_print.css Each of these two style sheets will have styling codes appropriate to its particular media. Screen display is like this
Example: The html file links to 2 style sheets: one for screen and another for print. The style sheet for print(scraps_print.css) includes these declarations. Modification of John’s slide. Note that the <h2> heading just has Getting Started as its text followed by a <span> element that says “On Screen Instructions” See that in this, the printed version, the h2 span selector turns off the display of the text On screen instructions And, the h2 style selector indicates that after h2 the text: Printed Instructions should appear. Note that on this page which is printed output “Printed Instructions” appears, whereas on the previous screen it does not. This is a pretty neat technique, unfortunately Internet Explorer, as of this writing, does not support the after pseudo-element Print display is like this (** The “after” pseudo-element is not currently supported by IE? )
Hiding Elements The visibility style and the display style can be used to keep an element from being displayed in the browser visibility: hidden hides the element visibility: display displays the element display: none hides the element The difference between visibility and display is whether the element will take up space in the window. visibility: hidden Does not show, but takes up space. Pg 245 display: none Does not show, and takes up no space.
Using Print Styles CSS defines printed pages by extending the box model CSS defines printed pages by extending the box model described in Tutorial 3 to incorporate the entire page in a page box. The page box is composed of two areas: the page area, containing the content of the document, and the margin area, containing the pace between the printed content and the edges of the page. In this extension of the box model you don’t have padding or border New Perspectives on HTML, XHTML, and Dynamic HTML, 4e
Using Print Styles The general rule to create and define a page box is: @page {styles} Printed media can vary in size and orientation The size style allows the Web author to define the default dimensions and orientation of the printed page size: width height orientation @page {size: 8.5 in 11 in landscape; margin 1in} Defines a page 8 ½ by 11 inches in landscape orientation with a one inch margin. New Perspectives on HTML, XHTML, and Dynamic HTML, 4e
Go to pg 239in text book and continue work on the in-chapter exercise. New Perspectives on HTML, XHTML, and Dynamic HTML, 4e