HTML5 AND CSS3

Neal Stublen

nstublen@jccc.edu

CHAPTER 6

INTRODUCING CSS3

New Element Styling html5shiv.js provided support in older IE

browsers for new sectioning elementsaside, 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;

}

CSS3 Selectors

Relational Selectors article time

Descendant – time element within article element

article > timeChild – 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

Relational Selectors

article ~ timeGeneral sibling – time element and article

element share the same parent and time element appears anywhere after the article element

What Does It Select?

li + liEvery element in a list except the first one

.clock timetime elements within an element using

class=“clock” #main > article

article elements that are direct

children of an element with the

id=“main”

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

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”

Attribute Selectors

article[id*=“news”]Matches any article element with the text

“news” appearing within its id attribute

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

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)

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)

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

Structural Pseudo-classes :root (the html element) ul li:nth-child(3)

Matches every li element that is the third child of a ul parent

ul li: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

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

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

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

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 (:)

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.

Selected Text

The page can have selected elements::selection::-moz-selection (Firefox)

Make selected text white.

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.

CSS3 Colors

Pre-CSS3 Colors

The color red could be expressed as:#f00#ff0000rgb(255, 0, 0)rgb(100%, 0%, 0%)red

CSS3 Color Additions

More color keywordsblanchedalmond, cornflowerblue,

mediumseagreen RGBA support adds alpha value to

specify the color’s opacityrgba(255, 0, 0, 0.4) – red, 40% opaque

Make standard text at 40%,

but selected text at 100%

CSS3 Color Additions

HSL, HSLAHue, saturation, lightness (and alpha)Hue is an integer valueSaturation and lightness are percentages

http://www.workwithcolor.com/

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);

}

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;

Drop Shadows Drop shadows can be added to any element

box-shadow: [inset] horz vert blur

spread color;

IE6-IE8 uses a plug-in filter (see text) Multiple shadows can be separated by

commas Shadows follow element edges

Text Shadows

Shadows can also be added to text content

text-shadow: top left blur color;

Ad Styling

Let’s try to add the CSS necessary to style the “Wanted” ad

border-radius box-shadow text-shadow