HTML5 and CSS3

1. Neal Stublen nstublen@jccc.edu HTML5 and CSS3

2. Chapter 6Introducing CSS3

3. New Element Styling • html5shiv.js provided support in older IE browsers for new sectioning elements • aside, header, footer, article, etc. • We still need to make these render as block elements instead of inline elements (which is the default) article, aside, figure, … { display:block; }

4. CSS3 Selectors

5. Relational Selectors • article time • Descendant – time element within article element • article > time • Child – time element is an immediate child of an article element • article + time • Adjacent sibling – time element and article element share the same parent and the time element immediately follows the article element

6. Relational Selectors • article ~ time • General sibling – time element and article element share the same parent and time element appears anywhere after the article element

7. What Does It Select? • li + li • Every element in a list except the first one • .clock time • time elements within an element using class=“clock” • #main > article • article elements that are direct children of an element with the id=“main”

8. Attribute Selectors • video[src] • Matches any video element with a src attribute (regardless of its value) • audio[preload=“auto”] • Matches any audio element with a preload attribute set to “auto” • p[lang|=“en”] • Matches any p element with a lang attribute equal to “en” or starting with “en-”

9. Attribute Selectors • div[class~=“fancy”] • Matches any div element with a class attribute including the whole word “fancy” • article[id^=“news”] • Matches any article element containing an id that starts with “news” • article[id$=“news”] • Matches any article element containing an id that ends with “news”

10. Attribute Selectors • article[id*=“news”] • Matches any article element with the text “news” appearing within its id attribute

11. What Does It Select? • time[data-autofill] • Any time element with the custom attribute data-autofill • article[class|=“playlist-entry”] • Any article element with a class that equals “playlist-entry” or starts “playlist-entry-” • [class~=“banner-ad”] • Any element with the “banner-ad” class

12. Pseudo-class Selectors • :enabled • :disabled • :checked • :indeterminate • :target (# anchor target in url) • :default (among a set of elements) • :valid (based on type/pattern attributes) • :invalid (empty or invalid form elements)

13. Pseudo-class Selectors • :in-range (elements w/ min/max values) • :out-of-range • :required (form controls) • :optional (non-required form controls) • :read-only (not user alterable) • :read-write (user alterable)

14. What Does It Select? • time[data-autofill] • Any time element with the custom attribute data-autofill • article[class|=“playlist-entry”] • Any article element with a class that equals “playlist-entry” or starts “playlist-entry-” • [class~=“banner-ad”] • Any element with the “banner-ad” class

15. Structural Pseudo-classes • :root (the html element) • ulli:nth-child(3) • Matches every li element that is the third child of a ul parent • ulli:nth-last-child(2) • Matches the next to last li element that is a child of a ul parent • article:nth-of-type(5) • Matches the fifth article element within any parent element

16. Structural Pseudo-classes • article:nth-last-of-type(2) • Matches the next to last article element within any parent element • :first-child • :last-child • :first-of-type • :last-of-type • :only-child

17. Structural Pseudo-classes • div:empty • Matches any div element that has no child elements • p:lang(fr) • Matches any p element in a language denoted by the “fr” abbreviation • :not(:disabled) • Matches all elements that are not disabled

18. What is “n”? • ul > li:nth-child(2n) • Matches every other li element that is an immediate child of a ul element • ul > li:nth-child(2n+1) • Matches every other li element that is an immediate child of a ul element, but offset by one

19. Pseudo-elements • Pseudo-classes target element attributes and states • Pseudo-elements target text that part of the document but not accessible as part of the document tree • Pseudo-elements are targeted with a double colon (::) instead of a single colon (:)

20. Text Nodes • All text nodes have a first letter and first line • ::first-letter • ::first-line • Make the first line of the paragraph red. • Double the size of the first letter.

21. Selected Text • The page can have selected elements • ::selection • ::-moz-selection (Firefox) • Make selected text white.

22. Generating Content • Pseudo-elements can be used to insert content into a document • ::before • ::after • Add a PDF icon after a link. • Insert “(PDF)” text after the anchor content.

23. CSS3 Colors

24. Pre-CSS3 Colors • The color red could be expressed as: • #f00 • #ff0000 • rgb(255, 0, 0) • rgb(100%, 0%, 0%) • red

25. CSS3 Color Additions • More color keywords • blanchedalmond, cornflowerblue, mediumseagreen • RGBA support adds alpha value to specify the color’s opacity • rgba(255, 0, 0, 0.4) – red, 40% opaque • Make standard text at 40%, but selected text at 100%

26. CSS3 Color Additions • HSL, HSLA • Hue, saturation, lightness (and alpha) • Hue is an integer value • Saturation and lightness are percentages • http://www.workwithcolor.com/

27. CSS3 Color Additions • opacity can also be set as a CSS property to adjust the transparency of elements on the page div.halfopaque { color: black; background-color: rgb(255, 0, 0); opacity: 0.5; } div.halfalpha { color: black; background-color: rgba(255, 0, 0, 0.5); }

28. Border Radius • Rounded corners can be specified on one or more corners of an element border-radius: 25px; border-radius: 10px 10px 5px 5px; border-top-left-radius: 10px; border-radius: 20px / 10px;

29. Drop Shadows • Drop shadows can be added to any element box-shadow: [inset] horzvert blur spread color; • IE6-IE8 uses a plug-in filter (see text) • Multiple shadows can be separated by commas • Shadows follow element edges

30. Text Shadows • Shadows can also be added to text content text-shadow: top left blur color;

31. Ad Styling • Let’s try to add the CSS necessary to style the “Wanted” ad • border-radius • box-shadow • text-shadow