Building iPhone Apps with HTML, CSS, and ... - Cdn.oreilly.com

Intro to CSS
Some text editors are bad for authoring HTML. In particular, you want
to avoid editors that support rich text editing, like Microsoft Word or
TextEdit. These types of editors can save their files in formats other than
plain text, which will break your HTML. If you are in the market for a
good text editor, my favorite by far on the Mac is TextMate (http://
macromates.com/), and I hear that there is a clone version for Windows
called E Text Editor (http://www.e-texteditor.com/). If free is your thing,
you can download Text Wrangler for Mac (http://www.barebones.com/
products/TextWrangler/) or use the built-in Notepad on Windows.
As you’ve seen, browsers render certain HTML elements with distinct styles (headings
are large and bold, paragraphs are followed by a blank line, etc.). These styles are very
basic and are primarily intended to help the reader understand the structure and meaning
of the document.
To go beyond this simple structure-based rendering, you can use Cascading Style Sheets
(CSS). CSS is a stylesheet language that is used to define the visual presentation of an
HTML document. You can use CSS to define simple things like the text color, size, and
style (bold, italic, etc.), or complex things like page layout, gradients, opacity, and much
more.
Example 1-4 shows a CSS rule that instructs the browser to display any text in the body
element using the color red. In this example, body is the selector (what is affected by the
rule) and the curly braces enclose the declaration (the rule itself). The declaration includes
a set of properties and their values. In this example, color is the property, and
red is the value of the property.
Example 1-4. A simple CSS rule
body { color: red; }
Property names are predefined in the CSS specification, which means that you can’t
just make them up. Each property expects an appropriate value, and there can be lots
of appropriate values and value formats for a given property.
For example, you can specify colors with predefined keywords like red, or by using
HTML color code notation. This uses a hexadecimal notation: three pairs of hexadecimal
digits (0–F) representing (from left to right) Red, Green, and Blue values. Properties
that expect measurements can accept values like 10px, 75%, and 1em. Example 1-5
shows some common declarations. (The color code shown for background-color corresponds
to the CSS “gray”.)
Example 1-5. Some common CSS declarations
body {
color: red;
background-color: #808080;
6 | Chapter 1: Getting Started