What are Cascading Style Sheets 3 (CSS3) used for?
To specify the presentation of elements separately from the structure of the document.
What is an inline style?
A style that declares an individual element's format using the HTML5 style attribute, e.g. <p style = "font-size: 20pt;">.
How are CSS property declarations written?
Each property is followed by a colon and its value; multiple declarations are separated by a semicolon.
Where is an embedded style sheet placed?
In the HTML5 document's head section, inside a style element.
Which MIME type do style sheets use?
text/css (the style element's type attribute).
MIME types: text/javascript, text/plain, text/html, image/png, image/jpeg
text/javascript = JavaScript markup; text/plain = plain text; text/html = HTML markup; image/png = PNG images; image/jpeg = JPEG image (and text/css = CSS documents).
Which property sets boldness? Give its values and numeric equivalents.
font-weight: bold, normal (default), bolder, lighter, or 100–900 in multiples of 100; normal = 400, bold = 700.
How are style classes and id selectors written?
A style class is preceded by a period, e.g. .special { color: purple; }, applied with class = "special". An id selector has the form #elementId.
Why use generic font families?
They let authors specify a type of font instead of a specific font, in case a browser does not support a specific font.
Why are relative font-size values preferred over points?
Because an author does not know the specific measurements of each client's display; relative values permit more flexible viewing (users can change font sizes for readability).
User, author and user-agent styles: which takes precedence?
User styles take precedence over user-agent styles; author styles take precedence over user styles.
Why are they called "Cascading" Style Sheets?
Styles cascade, or flow together, so the ultimate appearance of elements results from combining styles defined in several ways.
A child em and its parent p set different colors. Which wins, and why?
The child's style — properties defined for child and descendant elements have higher specificity than those for parents and ancestors, and conflicts are resolved in favor of higher specificity.
Values of text-decoration
underline, overline, line-through, blink.
What is a pseudoclass, and when is hover activated?
Pseudoclasses give access to content not declared in the document. hover is activated when the user moves the mouse cursor over an element.
List the relative length units.
px (pixels — varies with screen resolution), em (height of uppercase M), ex (height of lowercase x), percentages (of the default font size).
List the absolute length units and the pt/pc conversions.
in, cm, mm, pt, pc. 1 pt = 1/72 in; 1 pc = 12 pt.
What is an external style sheet, and what is "skinning"?
A separate document containing only CSS rules. Modifying that single CSS file changes the styles across all pages that use it — sometimes known as skinning.
How are CSS comments written, and where can they go?
They start with /* and end with */, and may be placed in inline styles, embedded style sheets and external style sheets.
Write the link element for styles.css and explain rel, type and href.
<link rel = "stylesheet" type = "text/css" href = "styles.css">. rel = relationship between the documents (a stylesheet); type = MIME type of the linked document; href = URL of the style sheet.
background-image and background-position: format and values
background-image: url(fileLocation). background-position: top, bottom, center, left and right, individually or combined, or lengths.
Values of background-repeat
no-repeat (one copy), repeat (default; vertical and horizontal tiling), repeat-x (horizontal only), repeat-y (vertical only).
What does background-attachment: fixed do? What is the default?
It fixes the image in the position set by background-position, so scrolling does not move it. The default, scroll, moves the image as the user scrolls.
text-indent
Indents the first line of text in the element by the specified amount.
text-align values and what overflow: scroll does
text-align: center, left, right. overflow: scroll adds scroll bars when content exceeds the element's set width and height.
Order the box model from the inside out.
Content → padding → border → margin.
Padding vs. margin
Padding: the distance between the content inside an element and the inside of its border (the element's edge). Margin: the space between the outside of the element's border and all other content on the page.
The three border properties and their values
border-width (any CSS length, or thin, medium, thick); border-color; border-style (none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset).
What does floating an element do?
Moves the element to one side of the screen; other content then flows around it.
What are media types? How do you write styles for all media and only for print?
They let you decide how a page looks depending on the media used (most common: screen). @media all { … } for all media; @media print { … } for print only.
Name the media features listed for media queries, and how orientation is decided.
width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio. Orientation is portrait if height > width, landscape if width > height.
Which property and pseudoclass build a CSS drop-down menu?
:hover (styles while the mouse is over an element) and display (block, inline, or none = not rendered). Fig. 4.17: nav ul { display: none; } nav:hover ul { display: block; }
User style sheets: where are they set, and which font sizes override them?
In the browser's options (not linked to the document). Absolute font sizes override user style sheets; relative sizes yield to the user-defined style.