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

}
font-size: 12px;
font-style: italic;
font-weight: bold;
font-family: Arial;
Selectors come in a variety of flavors. If you wanted all of your hyperlinks (the a element)
to display in italics, you would add the following to your stylesheet:
a { font-style: italic; }
If you wanted to be more specific and only italicize the hyperlinks that were contained
somewhere within an h1 tag, you would add the following to your stylesheet:
h1 a { font-style: italic; }
You can also define your own custom selectors by adding id and/or class attributes to
your HTML tags. Consider the following HTML snippet:
Hi there!
Thanks for visiting my web page.
I hope you like it.
Pizza
Beer
Dogs
If I added .loud { font-style: italic; } to the CSS for this HTML, Hi there! and
Pizza would show up italicized because they both have the loud class. The dot in front
of the .loud selector is important. It’s how the CSS knows to look for HTML tags with
a class of loud. If you omit the dot, the CSS would look for a loud tag, which doesn’t
exist in this snippet (or in HTML at all, for that matter).
Applying CSS by id is similar. To add a yellow background fill to the highlight paragraph
tag, you’d use this rule:
#highlight { background-color: yellow; }
Here, the # symbol tells the CSS to look for an HTML tag with the id highlight.
To recap, you can opt to select elements by tag name (e.g., body, h1, p), by class name
(e.g., .loud, .subtle, .error), or by id (e.g., #highlight, #login, #promo). And you can
get more specific by chaining selectors together (e.g., h1 a, body ul .loud).
There are differences between class and id. class attributes should be
used when you have more than one item on the page with the same
class value. Conversely, id values have to be unique to a page.
When I first learned this, I figured I’d just always use class attributes
so I wouldn’t have to worry about whether I was duping an id value.
However, selecting elements by id is much faster than selecting them
by class, so you can hurt your performance by overusing class selectors.
Web Programming Crash Course | 7