Don't change anything in the HTML!

  1. Give the body of this page a background-color.

  2. Use a group selector to give the divs with classes named "intro" and "conclusion" padding, margin, background-color, and border.

  3. Apply some type of styling to the span elements with a class named "highlight", such as color, background-color, font-style, and/or font-weight.

  4. Inside the div that has a class named "intro", there is a span with a class named "highlight". It contains the text "so rude". Provide some type of styling for this. It could override some styling applied in the previous step. Or it could provide some additional styling. It should only affect this particular span element.

  5. Inside the div with a class named "conclusion", there is also a span with a class named "highlight". It contains the text "best writers". Provide some styling for this. It should only affect this particular span element.

  6. Inside the div that has a class named "intro", there is a paragraph with a class named "standout". Give this a background-color. It should only affect this particular paragraph.

  7. Inside the div that has a class named "conclusion", there is a paragraph with a class named "standout". Give this a background-color. It should only affect this particular paragraph.

  8. Inside the div that has a class named "intro", there is a paragraph with a class named "standout". Within that, there is a strong element with the text "should not capitalize Web or Internet". Provide some type of styling for this. It should only affect this particular strong element.

  9. Inside the div that has a class named "conclusion", there is a paragraph with a class named "standout". Within that, there is a strong element with the text "descendant selectors". Provide some type of styling for this. It should only affect this particular strong element.

  10. Use the a:link, a:visited, a:hover, and a:active selectors to style the links on this page. Make sure you put them in the correct order.

  11. Add padding, margin, background-color, and border to the img element.

  12. Make this list item and only this list item right here red and bold.

A toad staring at you

Practice 4 Fun!

Published on by

Intro

In this practice exercise, we are going to have fun with CSS selectors. Please don't roll your eyes. That would be so rude, Chester. Selectors determine what you are selecting to style. It's a really good term. Some technical terms aren't that obvious about their purpose. But constructing selectors is not easy. Well, sometimes it is. Othertimes, it gets complicated. This paragraph seems too long. When writing for the web, you don't really need to adhere to traditional ideas about paragraphs. It should be contructed for clear communication. With this paragraph, I have failed.

I read that the Associated Press (AP) has said that we should not capitalize Web or Internet anymore. I got in the habit of capitalizing them. I don't work in journalism and I am not sure if I should care about what the AP thinks. But I guess it's still a good resource for those who work in marketing and other kinds of communication fields. You can find more information about the AP Stylebook here. And that concludes the introduction.

CSS Selectors

CSS selectors allow you to select the HTML elements that you would like to style.

Group Selectors

"Group selector" is a pretty obvious term too, I guess. It says that we are styling a group of things the same way. You use commas to separate each selector within the group. You shouldn't put a comma after the last one, though. If you do, the CSS validator will get angry.

What other types of things do we put commas in between? Maybe we would list types of sandwiches and put commas in between? I don't get the Oxford comma obsession with some people. Yeah, I think we should use it. But I'm not passionate about it. But I am passionate about sandwiches. Mark Twain once said that "sandwiches are the best thing about San Francisco in the summer time". Or that could have been Wayne Gretzky. I'm not sure. But I do believe that we should use commas, appropriately.

I hate how instructors are always like "Hey fellow kids, I'm doing something rad to help you grok a complex subject". I'm not a big fan of the word "grok". I guess instructors just want to be liked and get good student reviews and possibly sandwiches. I think that John Lennon wrote a song about that. I was actually going to write about group selectors in this entire section. But what more is there to write about? The great writers from the 20th Century ran this topic into the ground. I get it. You want to style a group of elements the same way. Enough already.

Oh, but one more thing about group selectors: They involve commas. Did I mention that? You use commas to separate each element in the group. It's so that you can style a group of things in the same way. We will probably get back to discussing sandwiches again soon.

Descendant Selectors

This is a concept that confuses some students. Some people don't think of HTML elements as containers that other HTML elements can jump inside of. But it's kind of like Russian nesting dolls. One stacks inside of another. A span is inside of a paragraph, that's inside of a div, that's inside of the body, that's inside of the <html> element. Did I use commas correctly? You could nest elements inside of elements for the rest of your days on Earth. That would not be a very good use of your life, in my opinion. But it's fun to do it for a part of your life.

  1. div
  2. paragraph
  3. span

The div is the grandparent. The paragraph is the parent. The span is the child.

But the paragraph is also a child. It is a child of the div. And the div is the parent of the paragraph. And the div is a child of the body. And the body is the child of the <html> element. I guess the <html> element doesn't have a parent. That's sad.

Inline, Block-level, and Inline-block elements

Inline elements flow side-by-side, like lines of text. Span, strong, and the <a> element are all inline elements.

Block-level elements take up the entire width across and stack on top of each other like those wooden blocks that you carved out of the ole oak tree. It's the same one that you tied the yellow ribbon around. But why did you do that? What does that song mean? Am I talking to Tony Orlando? I just read the Wikipedia page. It's about sandwiches.

The img element is an inline-block element. They line up side-by-side like inline elements. But they also have a defined height and width like block-level elements. They are hybrids like the alien-human hybrids in the X-Files. However, they do not ooze green stuff.

Conclusion

I didn't begin this section with "in conclusion". That's the sign of a bad writer. All of the best writers used "in conclusion" at the end. Steinbeck perfected this. I wasn't sure how all of the dust and wrath fit in. But his words after "in conclusion" (followed by a comma) really cleared it up for me.

In conclusion, group selectors let you style a group of things the same way (using commas), descendant selectors let you create more specific selectors that are contructed based upon the context of the HTML, there are different kinds of HTML elements that "behave" differently, and I'm hungry.