Session 3.3.

ObjectivesDesigning a listUnderstand basic selectorsUsing pseudo-classes and pseudo-elements

Designing a listList categoriesCode in HTMLTo define the appearance of the list marker,

use the stylelist-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.

Designing a list

Designing a listTo insert a graphic image as a list marker,

use the stylelist-style-image: url(url);

where url is the URL of the graphic image file.

To set the position of list markers, use the stylelist-style-position: position;

where position is inside or outside.

Designing a listTo 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

stylepadding-left: size;

where size is the length that the list should be indented.

Practice - Design a list1. Open the hs_styles.css of the Sunny Acres

website.2. For unordered lists within the nav element,

remove the bullet marker and set the padding-left property to 0 pixel.

3. 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 TypesSelector = Element on the page you want to

style.Three basic selector types:

Element selectorsClass selectorsId selectors

Basic Selector TypesElement Selectors:Global selectors based on individual HTML

elements

p { font-family: Arial, Helvetica, Sans Serif;}

ul {color: black;}

Class SelectorsAttributes applied to the HTML elements of

your choice.

id SelectorsAttribute selector based on ID attributes

applied to HTML elements.

Class and id naming ConventionNo whitespace or special charactersCSS is case-sensitiveEstablish standards for your CSS and stay

consistent with them

Practice – Classes and Ids1. Add the id “hourslist” to the first unordered list

element within the section element.2. Add the class “directionslist” to the second

unordered list element within the section element.3. Delete style rule for the unordered lists within the

section element.4. Create a style rule for the unordered list with the

hourslist id that displays the image flake.png as the bullet marker.

5. Create a style rule for the unordered list with the directionslist class that the bullet type as square.

Using pseudo classes and elementsA 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 elementsExamples:a:link {

color:red;

text-decoration:none;

}

a: hover {

color:red;

text-decoration:underline;

}

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

Using pseudo-classes and elementsExamples:

h1:before{content:url(banner.gif);}

h1:after{content:url(logo.gif);}

Using pseudo-classes and elementsExample:

nav ul li:first-of-type {

text-transform: uppercase;

}

Practice - pseudo-classes and elements1. For the first list item of the unordered list within the nav

element, create a style rule to:a. Increase the font size to 150%b. Display the text in small capsc. Display the text in bold

2. For every hypertext link within the navigation list, create a style that removes underlining and set the font color to white.

3. When the user hovers the mouse pointer over list items in the navigation list, change the background color to the value (148, 51, 62).

4. When the user hovers a hypertext link in the navigation list, change the font color to yellow.