1 Cascading Style Sheets Continued Different kinds of selectors in a style sheet –Simple- Pseudo-Class –Contextual- Pseudo-Element –Class Image Styles in CSS The Box Model in CSS Positioning in CSS –Positioning- Clipping –Overflow- Stacking

2 Selectors: Ways to Specify Which Elements to Apply a Style Element selectors are a comma-separated list of elements: h1, h2, h3 {font-family: sans-serif} ID selectors choose elements with the specified id: To summarize,… #summary {text-align:center} Attribute selectors select an element based on the element’s attributes. For example, a [href] {color: blue} means only make anchors with the href attribute blue. Contextual selectors apply a style based on the context in which an element is used. For example, to make only bolded list items blue, use li b {color:blue}

Elements in a Document Are Arranged Hierarchically On a Web page, elements are nested within other elements, forming a hierarchical tree structure: 3

4 Contextual Selectors

Example Using Contextual Selectors: Styles in a List 5

6 Using Classes as a Selector Classes let you mark a group of elements with a common identifier. It is specified using the attribute class. A class can be referenced in a style sheet using the dot notation.

Using Pseudo-Classes in a Selector A pseudo-class is a classification of an element based on its current status, position, or use in the document selector:pseudo-class {styles} 7

Creating Rollover Effects with Pseudo-Class Selectors 8

Using Pseudo-Elements in a Selector Pseudo-elements are abstracted from what we know of an element’s content, use, or position in the document: selector:pseudo-element {styles} 9

10 Image Styles: Choosing an Image Format GIF (Graphics Interchange Format) is the most commonly used image format on the Web. GIF files are limited to displaying 256 colors – Often used for graphics requiring fewer colors, such as clip art images, line art, logos, and icons. Images that require more color depth, such as photographs, can appear grainy when saved as GIF files. JPEG format is better for photographs. GIF files can have a transparent color. GIF files can be animated but require more space.

11 Choosing an Image Format (continued) A new file format called PNG (Portable Network Graphics) has been created PNG files use a free and open file format and can display more colors than GIFs PNGs can be used for animated graphics PNGs do allow transparent colors, but not all browsers support this feature

12 Specifying the Size of the Image Width and height are two image attributes (not styles) expressed in pixels. Example: <img src = “car.gif” width = “50” height = “100” /> Adding the width and height attributes will speed up the display of the image.

13 Inserting a Background Image The syntax for inserting a background image is the style background-image: url(url) URL is the location and filename of the graphic file you want to use for the background of the Web page For example, to use an image named “bricks.gif” as a background image, you would use the tag:

14 Some Background Image Styles background-repeat: type (repeat repeat-x repeat-y no-repeat) background-position: horizontal vertical (2 values) background-attachment: fixed or scroll background: color image repeat attachment position

Fixed versus Fluid Layouts 15

16 Floating and Clearing Elements The syntax for the float style is: float: position where position is none, left, or right. To display an element clear of a floating element, use the style clear: position where position is none, left, right or both.

17 The Box Model in CSS In the box model each element behaves as if it is composed of four sections: –Margin –Border –Padding –Content

18 Margins Styles in the Box Model Margins are controlled with the following four styles: –margin-top: length –margin-right: length –margin-bottom: length –margin-left: length Margin values can also be negative- this creates an overlay effect by forcing the browser to render one element on top of another You can also combine the four margin styles into a single style: –margin: top right bottom left

19 Padding Styles in the Box Model Styles to set padding around an element are similar to styles to set margins: –padding-top: value –padding-right: value –padding-bottom: value –padding-left: value Alternatively, you can just set padding: –padding: top right bottom left

20 Border Styles in the Box Model Styles to set the border around an element use styles like: –border-width: value –border-type: type –border-color: color Alternatively, you can just set border : width type color You can also set the style of the individual edges (top, bottom, left, right) of the border. For example: style = “border-top-color: green; border-bottom-color: red; border-left-color: blue; border-right-color: yellow”

21 Result of Applying Border Styles

22 The Display Style in the Box Model The style display allows an element to be either inline or block. a {display:block; color:white} Note that display has many other permitted values (e.g., none, which prevents the element from being shown). See the text for details.

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; The types of positioning include absolute, relative, fixed and inherited. 23

Positioning Objects with CSS 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 Fixed positioning fixes an element at a specific spot in the document window while the rest of the page scrolls by. Set the value of the position style to fixed Assign the inherit position style to an element so that it inherits the position value of its parent element 24

25 Example of Positioning: Create 3 Notes Using Example of Positioning: Create 3 Notes Using

26 Position the 3 Notes on a Page

Handling Overflow 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. Use the overflow style: overflow: type 27

Clipping Content 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) 28

29 Stacking Elements: The Z-index Style Positioning introduces the possibility that elements may partially or fully overlap one another. Specify stacking order with the style: z-index: value z-index: 3 z-index: 1 z-index: 2