HTML Session 2.1

Provide the code to enter the style comment "Tri and Succeed Sports Color Styles".

/* Try and Succeed Sports Color Styles */

Progressive enhancement

A coding technique in which code conforming to older standards is placed before newer code.

What is progressive enhancement?

A coding technique in which code conforming to older standards is placed before newer code.

Style rule

A list of style properties applied to an element or to a group of elements.

Modules

A module has three attributes. The attributes are id, which is used by scripts to gain access to the module node, src, which is the url of either a script file or an HTML file, and style, which is used to set the size and location of the module. (There may turn out to be addition attributes.)

Hexadecimal number

A number written in the base 16 numbering system, which uses the 16 numerals 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, and F.

CSS at-rule

A rule used to send directives to the browser indicating how the contents of the CSS file should be interpreted and parsed

RGB triplet

A set of numbers representing intensities of red, green, and blue.

Style inheritence

An additional factor in how an element is rendered is that properties are passed from a parent element to its children

Embedded styles

Are the styles added to the head of an HMTL document. Only apply to the HTML document in which they are created and they are not accessible to other documents in the website, but they do override any styles in an external style sheet

Color values

Colors are given an exact numeric representation

Opacity

Defines how solid the color appears

What keyword do you add to a style property to override style precedence and style inheritance?

Embedded styles

Inline styles

Highest order of precedence, are added as elemental attributes within an HTML document and thus apply to that element alone

Vendor prefix

Indicates the browser vendor that created and supports the property

What are inline styles, embedded styles, and external style sheets? Which would you use to define a design for an entire website?

Inline styles: Highest order of precedence, are added as elemental attributes within an HTML document and thus apply to that element alone Embedded styles: Are the styles added to the head of an HMTL document. Only apply to the HTML document in which they are created and they are not accessible to other documents in the website, but they do override any styles in an external style sheet External style sheets: Styles that the website author creates and places within a CSS file and links to the page Entire page: external style sheets

Lightness

Measures the brightness of the color and ranges from 0% (black) up to 100% (white)

Saturation

Measures the intensity of the chosen color and ranges from 0% (no color) up to 100% (full color)

Browser extensions

Small programs or scripts that increase the functionality of a website.

Browser styles or user agent styles

Styles built into the browser itself

User-defined styles

Styles defined by the user based on the settings he or she makes in configuring the browser

External styles

Styles that the website author creates and places within a CSS file and links to the page

Hue

The tint of the color and is usually represented by a direction on a color wheel

The color chartreuse is located at 90° on the color wheel with 100% saturation and 50% lightness. Provide a style rule to display address text in black with chartreuse as the background color.

address { color: black; background-color: hsl(90, 100%, 50%0; }

Provide the style rule to display block quote text in red using an RGB triplet.

blockquote { color: rgb(255, 0, 0,); }

Based on the following style rule for paragraph text, which style property will be used by an older browser that supports only CSS2? p{ color: rgb(232, 121, 50); color: hsla(23, 80%, 55%, 0.75); }

color: rgb(232, 121, 50);

Provide a style rule to display h1 and h2 headings with a background color of yellow (an equal mixture of red and green at highest intensity with no blue) at 70% opacity.

h1, h2 { background-color: rgb(255, 255, 0, 0.7); }