So far, we have looked at CSS selectors that correlate with HTML tags Now, we’ll see how you can define your own selectors using class and ID selectors.

Review: HTML Dog CSS Intermediate Tutorial

Class and ID Selectors

• So far, we have looked at CSS selectors that correlate with HTML tags

• Now, we’ll see how you can define your own selectors using class and ID selectors

• Class and ID selectors allow you to format the same HTML element differently in different sections of your page.

Class and ID Selectors

• The HTML document contains the attributes ID and Class to reference the style associated with that section in CSS:

Class and ID Selectors

• Class and ID selectors are indicated in both HTML and CSS, but only function stylistically, therefore they are not HTML elements but CSS elements

• An ID selector is a name preceded by a hash ( # )

• A class selector is a name preceded by a period ( . )

Class and ID Selectors

• You might use the ID “top” to give a particular element of text a specific background-color plus 1em of padding.

Class and ID Selectors

• Similarly, you might use the class “intro” to make a particular section of text the color red and with a font-weight of bold.

Class and ID Selectors

• The major difference between ID and class is that an ID is used for positioning individual elements on a page, as we will see coming up.

• Given that a unique ID can only hold specify one position, it can only be applied to one element at a time on a page.

• This unique ID can be used on multiple pages, but only once per page.

• IDs are good for positioning elements.

Class and ID Selectors

• Class selectors can be used as many times as you need them on a single page, and are therefore not good for specifying where an element should appear on a page

• Class elements are especially good for adding style details to a small section of text for emphasis throughout the page

Class and ID Selectors

• IMPORTANT: You can also apply selectors specific to the HTML elements within them (rather than all HTML elements within them) by simply stating the selector before the ( . )

• For example: p . jam {whatever } means that only the information within the “jam” class within paragraph tags would be affected by the style described.

Grouping

• You can give the same properties to a number of selectors without having to repeat them by separating the selectors by commas

• Only do this, however if all selectors share all properties

Nesting

• If you structure your CSS well, you shouldn’t have to use a large number of class or ID selectors because you can specify properties within other selectors

Nesting

• By separating selectors with spaces we are saying “the ‘h1’ inside ID ‘top’ is color ‘#ff0’ and ‘p’ inside ID ‘top’ is red and bold”

Pseudo Classes

• Pseudo classes are bolted to selectors to specify a state or relation to the selector

• They take the form

selector: pseudo class { property: value;}

Pseudo Classes

• There are four pseudo classes that can be used when applied to links:

• link is for an unvisited link• visited is for a visited link• active is for a link when it is clicked on• hover is for a link when the cursor is held over it

Pseudo Classes

Pseudo Classes

Shorthand Properties

• Some CSS properties allow a string of values, replacing the need for specifying four a number of separate properties

• Property shorthand consists of values separated by spaces

• margin, padding, and border-width allow you to amalgamate top, right, bottom, left in short-hand

Shorthand Properties

Shorthand Properties

• border-width, border-color and border-style can also be summed up as, for example:

Shorthand Properties

• By stating just two values (such as margin: 1em 10em;)• The first value will be the top and bottom and the second

value will be the right and left• Font related properties can also be gathered together with

the font property• (‘/1.5’ is the line-height)

Shorthand Properties

Background Images

• There are a number of properties involved in the manipulation of background images

• The property background can deal with them all, bringing all the properties together:

• background-color• background-image• background-position • top, center, bottom, left, right

• background-repeat• this can be repeat, repeat-y, repeat-x, or no-repeat

• Background-images can be used in most HTML elements – not just for the whole page (body)

Background Images