There's a lot you can do with CSS Selectors. You don't need to let them get too complicated, but the combinations can allow you to do some cool things programmatically. In the example below, I've demonstrated a few of those techniques.
NB: Don't feel like you have to master all of these (this is a tiny fraction of what is out there...). Just pick a couple and figure them out. (It makes sense to experiment at length with each of my examples, below. Don't just look at my single example and assume that will mean anything to you later).
Visit the W3School's Selector Tester to see some of them in action.
- Under the "everything" selector (the asterisk), I've set the "margin" property to 20px. This changes every block on the page (unless it already has its own margin setting): After setting the margin property to 20px, a block of text that was (say) 100px wide and 150px tall will now have an additional margin of 20px on each side... making the text block now 140px by 190px.
- Under the h1 selector, I turn to the padding property, and set it to 20px. Padding makes space inside the content box, while the margin makes space outside the content box. By setting padding to 20px, I force the skyblue block that contains my text to insert room between the letters and the edge of the box.
- But I also set my width property to 50%. The width property essentially sets the width of the content area inside the box. 50% refers to 50% of the h1 selector's parent's width. The h1 selector's parent is the container it is in, which in this case is the body tag (which is set to 100% width by default).
- Take a look at what happens when we combine the container width as a percentage after we set the padding. In fact, resize your window to see it happen. See how the text leaves a uniform amount of blue space on all sides (the padding), and simply forces the box to change height AND width to accomodate the new window size?
- Try this: Change the width property from relative (50%) to absolute (300px). Now resize your browser window. See how we've lost that flexibility?
- The paragraph selector
p is familiar, and there's nothing weird about its style. Until you move to the next selector, which is... weird.
p:first-of-type is called a pseudo-class. There are lots of them, all for specific situations. But don't worry about that for now: What is important is that you know that a pseudo-class works like a filter... In this case, the text of the very first paragraph that your browser encounters will receive the styles listed (in addition to all the styles listed under p, too!). After the first one is rendered, the rest will just be styled according to the p selector in the CSS sheet. This technique can be great for automatically setting an executive summary paragraph in a different typeface, or for rendering the first paragraph of your fairy tale in an ornate (but hard-to-read) typeface, leaving the rest of your text undisturbed.
- Note too the padding-left property in the p:first-of-type selector. If I stipulate the property padding, the browser assumes I mean padding on the top, bottom, left, and right, and assumes they're all set to the same value. BUT I can add some more specific properties, like padding-top, padding-bottom, padding-right, and padding-left. This works as well with margin, border, and a few others.
- We're almost done, friend: Hang in there. Take a look at the next pair of selectors. First is a custom class I've built called "redfooter". It has to start with a dot because it isn't standard -- I created it. That period means I will need to refer to it in my HTML as a class. For example: h1 class = redfooter. Normally that just means style this section using both the h1 class styles and the redfooter styles. But when I use the selector in this fashion, p.redfooter, I mean "only use the following styles if we're inside a paragraph (p) that is set to class redfooter. If we're inside an h1 with that class? Nope. A div? Not a chance.
- But there's a terrible inconsistency between the footer and the h1 block. Why is that? Is it really inconsistent, or does it just appear to be? Is there a fix? Can we "grow" the box horizontally and not expand it vertically?
See the Pen
MiamiGuidelines_furtherExamples by Garrison LeMasters (@Garrison)