1 / 23

Review: HTML Dog CSS Intermediate Tutorial

Review: HTML Dog CSS Intermediate Tutorial. 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

timon-caldwell
Download Presentation

Review: HTML Dog CSS Intermediate Tutorial

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Review: HTML Dog CSS Intermediate Tutorial

  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. Class and ID Selectors

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

  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 ( . ) Class and ID Selectors

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

  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. Class and ID Selectors

  7. The major difference between ID and class is that an IDis 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

  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 • Classelements are especially good for adding style details to a small section of text for emphasis throughout the page Class and ID Selectors

  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 withinparagraph tags would be affected by the style described. Class and ID Selectors

  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 Grouping

  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 Nesting

  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” Nesting

  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;} PseudoClasses

  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 PseudoClasses

  15. PseudoClasses

  16. PseudoClasses

  17. Some CSS properties allow a string of values, replacing the need for specifying foura 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

  18. Shorthand Properties

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

  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) Shorthand Properties

  21. Shorthand Properties

  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) Background Images

  23. Background Images

More Related