Understanding the Basics
of CSS

On page 595, the HTML embeds CSS (Cascading Style Sheets) commands into h1 and img tags to indicate heading style (style="color:chocolate;" and style="float:left;"). This way of applying styles is called “inline” CSS. The next example embeds these styles within the HTML document head:

These two examples use a separate document called from the head:

In CSS, cascading means your browser checks any external style sheet first, then styles in the head of the current document, and then any inline styles. If styles contradict, inline styles override styles in the head, which in turn override external styles. (See thoughtfullearning.com/h602 to learn more.)

▶ CSS and HTML Measurements

Differences in screen size, screen resolution, browser behavior, and user-chosen settings can complicate on-screen layout. It helps to understand the following measurement types used in CSS and HTML code.

• px: Short for “pixels,” the glowing dots in a video screen. Each pixel has three components—red, green, and blue.
• dpi: Short for “dots per inch,” or the number of pixels in one inch. Most computer monitors have a resolution of 72 dpi; some have 96 dpi.
• in, cm, mm: Short for “inches,” “centimeters,” and “millimeters” respectively. (Note: They seldom display accurately on-screen.)
• pt, pc: Typographical abbreviations for “points” and “picas.” An inch holds 72 points or 6 picas. (Again, on-screen display may vary.)
• em, ex: Typographical abbreviations for changes to the “em-height” and “x-height” of the current font family. (See page 603.)
• %: Used with fonts to show a percentage change from the base font. If p { font:10pt; }, then h1 { font:120%; } would make the h1 size 12pt.

▶ Height and Width

As some Web pages load, the text jumps around to make room for images as they appear. You can avoid this on your pages by setting a height and width for images and other “block-level elements” such as p, h1 through h6, and div.

▶ Padding and Margin

Padding adds space to an object; margin adds room around it. Browsers apply both in “top, right, bottom, left” order, so padding:10px,5px,10px,5px; adds 10 pixels of space above and below, with 5 pixels on right and left. (Abbreviating to padding:10px,5px; sets top and bottom to 10, left and right to 5, while margin:10px; sets all four margins to 10.)

▶ Font Characteristics

Font is a typographical term for a collection of letters, numbers, and symbols in a particular style, such as Apple Chancery, Bookman Old Style, Courier, and so on. In CSS, font styles can be assigned to nearly any HTML tags that can surround text, including body, p, h1 and other header tags, a, span, and div.

• Font-family can be specific (like “Comic Sans”) or generic (serif, sans-serif, or monospace). Not all computers support all fonts, so you’ll often see a declaration like font-family { "Times New Roman", Times, Serif; }, allowing those without the first to default to another. (Note: Font names with spaces must use quotation marks.)
• Font-style sets normal, italic, or oblique (a leaning, pseudo-italic style).
• Font-size determines the size in any of several different measurements.
• Font-variant is used to set “small-caps.”
• Font-weight can make a font “bold,” “bolder,” or “lighter” or can be set to any of nine values from “100” (lightest) to “900” (boldest).
• Font is the catchall declaration, allowing any or all of these to be set at once (e.g., font { "Times New Roman", Times, Serif; 24pt; small-caps; bold; } ).

▶ Classes (.) and IDs (#)

In CSS, classes and ids make coding easier.

• Classes group similar items: .left { float:left; padding:5px,20px,5px,5px; } and .right { float:right; padding:5px,5px,5px,20px; } in the page head would let us use <img class="left" src="some.url"> and <img class="right" src="some.url"> on the page.
• IDs are for individual items. You could set all images right with img { float:right; } in the head, then add #firstimg { float:left; } in the head to define an exception, and use <img id="firstimg" src="some.url"> to apply that exception in the body.