Cascading style sheets

Your job this time is to learn some CSS basics for adjusting colors, sizes, fonts, and backgrounds.

Again, save this page on your computer. Your browser should also save example2.css at the same time. You'll want to open both example2.html and example2.css in a text editor to do some experimentation.

Styling paragraphs

Here's some text in a normal paragraph tag.

Here's some text in a paragraph with class "important". Look at the HTML and the CSS to see how we make it look important.

This paragraph has class "resize_me". Try editing the CSS for this class using the various size units provided by CSS. (Search "css size units" for some help. Units include px, pt, in, cm, mm, em, ex, %, and more.)

This is an indented paragraph. I'm just going to keep typing so it will be long enough to wrap onto a second line. I wonder if this is long enough yet. There's a woodpecker trying to bring down a tree on my patio, one head-bang at a time. (Is this long enough now?)

This paragraph is both indented and important. I'm just going to keep typing so it will be long enough to wrap onto a second line. I wonder if this is long enough yet. There's a woodpecker trying to bring down a tree on my patio, one head-bang at a time. (Is this long enough now?)

Can you have two HTML elements with the same class?

Colors

Try changing the background and text color for this paragraph to various values. Note that there are some built-in color names (like "red", "green", "purple", etc.), but you can also specify colors using 2 hexadecimal digits for the red, green, and blue components of the color you want. Since 2-digit hexadecimal numbers range from 00 to FF (0 to 255 in base ten), you can get a very bright purple with #xFF00FF (that is, the maximum red and the maximum blue, with no green at all), or a more muted and darker purple with #x990099). Search for "css color chart" or something like that to see some handy images.

Styling headings

Can you change the styles of an h2 tag the same way we changed it for paragraphs? Experiment with that. For example, try making this section's h2 tag red and 50% bigger than a default h2 tag.

Styling tables

Here's a table

	Antlers?	Wings?	Noisy?
Crow	No	Yes	Yes
Moose	Yes	No	No
Moth	No	Yes	No

Here's another table

	Antlers?	Wings?	Noisy?
Seagull	No	Yes	Yes
Elk	Yes	No	Sometimes
Moth	No	Yes	No, but kinda creepy

Those cell borders make all the interior lines look doubled-up. Can you search to figure out how to fix that so there are just single lines between cells? Try applying that change just to the second table.

class versus id

Any HTML element can have a class attribute, an id attribute, both, or neither. The difference is that many elements can share a class, while only one element in a page is allowed to have any given id. Take a look at the CSS to see how this paragraph is styled, and how the styles for the "important" class are combined with the styles for the "class_vs_id" id.

Inline styles

You can apply a style to just some inline text using the span tag.