The time really did fly by. When I told My Friend Who Knows Everything that I was taking this class, he was appalled that we were typing everything out, instead of using web development software that would do the work for us and not correctly. The odd thing is, as the weeks have gone on, all this tedious typing has actually gotten easier.
I will now attempt to explain the difference between selectors and classes and why I would use one or the other.
Is it okay that I looked it up on the w3.org world wide web consortium web site? A selector is the part of a CSS rule that matches an (X)HTML tag. somewhere in the document it is applied to. When a selector is styled with CSS, all instances of the matching tag in the (X)HTML document have that rule applied to them, unless the rule is overridden by another rule.
Selectors can be associated with block-level tags like <p> (paragraph), <h1> (or any of the <hx> headers); or inline tags, like <a> (anchor) or <strong>. Now, I wouldn't dream of actually trying this, since we weren't taught it, but apparently you can do lots of fancy stuff like select only emphasized text that occurs within an h2 tag, and other stuff too arcane for me to follow.
I would use a selector when I want to apply a style to every, or almost every, occurance of an (X)HTML element.
A class is a special kind of selector, she says, wading out onto thin ice. The style rule associated with this class will be applied to any element, that is any element that has that class name associated with it.
So, for this paragraph, I assigned the "example" class to the "p" tag that encloses it. The class of "example" provides for justified text with wide right and left margins.
In this paragraph, I invoke a class that turns just a few words red.
I would use a class when I want to apply a style to only a few occurances of an element (e.g., just the occasional paragraph), or to many different elements (it can be applied as many times as I need it, to any element in the document). To illustrate margins, I defined a class named ".margins" and enclosed from the beginning of the document to here in a div tag. That applies the margins to paragraphs, headings, and even this paragraph, which has the "example" class applied to it, which further indents it.
This section, starting with the heading above, has no section-wide margins (though some of the tags have their own margins applied). I have defined padding for this section that doubles the left and right values of the margin definitions, that is, right-padding of 8em where the section above had right-margin of 4em.
The h3 above has obeyed the padding as if it were a margin.
Here is a paragraph with the "example" class applied. So, what I'm seeing is, I don't actually understand. Everything is being indented according to what is prescribed, either in the padding div or the margin div. H1, h2 and h3 have margins and padding defined for them. They (at least h2 and h3) honor that relative to what the div prescribes, indenting in from the point set by the higher, or further away, rule. The paragraph and h4 heading don't have their own margins or padding. So they just indent how much the div says to. But the effect on the block-level tags is the same regardless of whether the indents are defined as margins or padding.
The header above demonstrates the padding defined in the div.This is the end of the padding div.
The thumbnails below are separated by margin and padding values in the "img" selector. But at the bottom, I overrode those values with the "close" class to keep the validator images close together.
Index of Ellen's web pages for Build 1. (This is lesson 6.)
Lesson 1, "Dogs of My Life".
Lesson 2, "Set Up Your Router".
Lesson 3, "Font Properties".
Lesson 4, "Images".
Lesson 5, "Margins and Padding".
Return to home.
If you think the content of this page is really lame, please email me.
