HTML, CSS, and Classes

Classes are great. They make it possible to do so much more with HTML and CSS. Admittedly, they start to get away from the “separation of content from form” that web developers often crave, but maybe it is a good compromise to make.

Get started with classes

To see how this works, let’s look at an example on codepen.

First, here’s a simple excerpt from an article without worrying about class. This is a good baseline: It is where we’re at now.

A class is essentially a tool for customizing your output: It can do anything you can imagine. But it requires that we add some code to both the HTML and the CSS. However – and this is really important – a class is effectively invisible until we add style to it in CSS.

To illustrate how this works, I’ve added two classes into this HTML. But I’ve only styled one of the classes in my CSS. Have a look!

Take a look at the CSS in that example. Classes use what is sometimes called a “dot syntax”. That means that what we usually think of as a period – that little bit of punctuation that sits quietly at the end of most sentences, and occasionally inside abbreviations – takes on a whole new role. (That’s very common: Programmers use the same computers as the rest of us, so they end up re-purposing punctuation all the time. Think of the bang (!) at the beginning of a DOCTYPE declaration.)

To add one or more classes, I need to do the following.

In the HTML

Choose the specific instance of an HTML element I want to change. For example, a specific paragraph, a particular image, or even a specific blockquote.

Pick a name for your class that describes the role that your special HTML element plays in your document. For example, “introduction” or “urgent” or “worth_noting”. To make things simpler in the long term, avoid using spaces (opt for underscores instead).

Got your class name? Great. For this example, the element I want to style is a paragraph <p> and the special class name will be “outcome”. Here’s what that paragraph element’s opening tag would then look like:

<p class="benefit">

Really clear, right? We just add the word class, an equals sign, and the name of our new class inside quotes! Then we close up the tag as usual with a right-hand angle bracket.

So here’s the good news: Everything else about that special paragraph remains unchanged! Even the closing tag is just a standard closing tag. Great. Now let’s move over to our CSS.

In the CSS

Inside your CSS, you’ll now need to add your class name to the selector.

p.benefit {
  background: white;
}

There are lots of ways to do this, each with different outcomes, but for this example, I’m going to use a very basic approach. Even so: The simplest approach allows us to create a much more powerful, custom version of CSS!

Here’s a codepen that shows how this works. Note that I’ve added a few classes – I can use as many as I want!

I encourage you to play with this pen in order to better understand how these classes are affecting my output. A couple of things to look for:

  1. I started by styling the <body>, which is essentially the container for the whole document. All of the children of the <body> will play by those rules (INHERITANCE). In this case, that means respecting my right and left margins.
  2. Next, I added three declarations that will all apply to the <p> selector: color, font-family, and padding. By default, those properties will apply to every <p> throughout my HTML document, whether they are plain-vanilla (<p>) or have a fancy class= designation! One a <p>, always a <p>
  3. …Until you’re not. So here is where things get complicated (and the reason there is a CASCADE in Cascading Style Sheets): When I add style declarations to a specific class that are in direct conflict with my original <p> declarations, then we have a problem: I am asking for the browser to do two DIFFERENT things at the same time. In this case, for example, I declared at the start that <p> would have a background: skyblue; but then I said that p.benefit would need to have a background: white. So what’s a girl to do?
  4. It is complicated, but it happens all the time (and can even be useful). Conflicts are USUALLY resolved by the web browser according to two criteria: (1) What was the most SPECIFIC set of instructions I received? and (2) What was the MOST RECENT set of instructions I received?
  5. Again, that can sometimes make things… really, really, really complicated for people like us. For now, just keep this in the back of your mind, though: It will become clearer with more practice.

Your turn

OK: Now its time to see how this works firsthand. Remember the Pokemon text (from Polygon.com) that I presented on this site earlier today? Remember how hard it was to add a lot of variance to the page? Well, that was back when you thought that every <p> had to be the same! But now you know: They don’t have to stay that way!

Exercise

Here’s that pen again. Restyle the text to take advantage of this new knowledge. Remember: You’re going to have to add a little bit of new material to the raw HTML, too. For reference, listed below are (1) the original gist and (2) the qualities I’d asked you to try and create. Those requests should make more sense now!



Goals
  • More links to related content sprinkled throughout the text;
  • A consistent, but more varied color palette (ex: a dark background with neon or pastel foreground colors);
  • Use of more than one typeface;
  • Use of non-serifed typefaces (e.g., Helvetica instead of Times);
  • Margins and line-heights that vary throughout the text;
  • More frequent, more graphic quotes.