Tutorial 3: Designing a Web Page with CSS Session 3.3.

Objectives Designing a list Understand basic selectors Using pseudo-classes and pseudo-elements

Designing a list List categories Code in HTML To define the appearance of the list marker, use the style list-style-type: type; where type is disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-alpha, upper-alpha, lower-greek, upper-greek, or none. Use “Arial Black” if available, otherwise use Georgia and if Arial Black and Georgia are not available, use Tahoma.

Designing a list Pc = picas Relative units: expressed relative to the size of other objects within the Web page. h1{font-size: 2em;}: It expresses the size relative to the font size of the parent element. For h1 heading, the parent element is the Web page body so h1 is twice the size of the body text. H1{font-size: 200%;}: The font size of h1 is twice the font of the body text

Designing a list To insert a graphic image as a list marker, use the style list-style-image: url(url); where url is the URL of the graphic image file. To set the position of list markers, use the style list-style-position: position; where position is inside or outside. Web safe fonts: Fonts supported by all browsers => limited Web fonts

Designing a list To define all of the list style properties in a single style, use the following style: list-style: type url(url) position; To set the indentation of a list, apply the style padding-left: size; where size is the length that the list should be indented.

Practice - Design a list Open the hs_styles.css of the Sunny Acres website. For unordered lists within the nav element, remove the bullet marker and set the padding-left property to 0 pixel. For unordered lists nested within the section element, create a style rule that displays the image file flake.png as the bullet marker.

Basic Selector Types Selector = Element on the page you want to style. Three basic selector types: Element selectors Class selectors Id selectors Different situations: apply CSS rule broadly across the site Target smaller number of elements or even a single element.

Basic Selector Types Element Selectors: Global selectors based on individual HTML elements p { font-family: Arial, Helvetica, Sans Serif;} ul {color: black;} Effect every element of that type in the document Very broad Set global site-wise style

Class Selectors Attributes applied to the HTML elements of your choice. Notice the . In front of the class name (the class name is your choice). You can use the class as many times as you want and apply it to as many elements as you want.

id Selectors Attribute selector based on ID attributes applied to HTML elements.

Class and id naming Convention No whitespace or special characters CSS is case-sensitive Establish standards for your CSS and stay consistent with them

Practice – Classes and Ids Add the id “hourslist” to the first unordered list element within the section element. Add the class “directionslist” to the second unordered list element within the section element. Delete style rule for the unordered lists within the section element. Create a style rule for the unordered list with the hourslist id that displays the image flake.png as the bullet marker. Create a style rule for the unordered list with the directionslist class that the bullet type as square.

Using pseudo classes and elements A pseudo-class is a classification of an element based on its current status, position, or use in the document. CSS pseudo-elements are used to add special effects to some selectors. Syntax: selector:pseudo-class/pseudo-element {styles;}

Pseudo Example Example description link a:link Selects all unvisited links visited a:visited Selects all visited links active a:active Selects the active link hover a:hover Selects links on mouse over focus input:focus Selects the input element which has focus first-letter p:first-letter Selects the first letter of every <p> element first-line p: first-line Selects the first line of every <p> element first-of-type p: first-of-type Selects every <p> element that is the first <p> element of its parent first-child p:first-child Selects every <p> elements that is the first child of its parent before p:before Insert before after every <p> element after p:after Insert content after every <p> element lang(language) p: lang(it) Selects every <p> element with a lang attribute value starting with "it"

Using pseudo-classes and elements Examples: a:link { color:red; text-decoration:none; } a: hover { text-decoration:underline;

Using pseudo classes and elements Examples: p:first-letter { color:#ff0000; font-size:xx-large; } p:first-line { color:#0000ff; font-variant:small-caps; }

Using pseudo-classes and elements Examples: h1:before{ content:url(banner.gif); } h1:after{ content:url(logo.gif); }

Using pseudo-classes and elements Example: nav ul li:first-of-type { text-transform: uppercase; }

Practice - pseudo-classes and elements For the first list item of the unordered list within the nav element, create a style rule to: Increase the font size to 150% Display the text in small caps Display the text in bold For every hypertext link within the navigation list, create a style that removes underlining and set the font color to white. When the user hovers the mouse pointer over list items in the navigation list, change the background color to the value (148, 51, 62). When the user hovers a hypertext link in the navigation list, change the font color to yellow.