2. 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.

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

4. 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 (. )

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

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

7. 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.

8. 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

9. 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.

10. 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

11. 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

12. 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”

13. Pseudo classes are bolted to selectors to specify a state or relation to the selector They take the form selector: pseudo class { property: value;}

14. 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

17. 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

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

20. 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)

22. 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)