And we don’t mean classes, we mean… classes.

HTML

HTML stands for Hypertext Markup Language, which is a fancy way of saying “text with links and stuff.” This page is HTML. The New York Times is HTML, every single web page that you ever look at is HTML.

HTML is also stupid easy.

<h1>I am a headline</h1>
<h2>I am a slightly smaller headline</h2>
<h3>I am another headline that is even smaller yet</h3>
<p>I am a paragraph</p>
<p>I am a paragraph with <strong>bold text</strong> or <em>italicized text</em></p>

That’s all a web page is! Boring and ugly, until you add CSS into the mix.

CSS

CSS stands for Cascading Style Sheets, and it adds a little bit of beauty to the barren world of HTML. Headlines get nice fonts, different text elements become different colors, content is aligned in columns - that’s all CSS.

If HTML looks like this…

<h3>This is a headline</h3>
<p>And here is some text</p>
<h3>Here is another headline</h3>
<p>And here is a paragraph of text about it</p>

Then the CSS to style it might look like this…

h3 {
  font-size: 42px;
  font-weight: bold
  font-family: 'Helvetica Neue', Helvetica, 'Comic Sans MS', sans-serif;
  margin-bottom: 15px;
}

p {
  padding-bottom: 10px;
  font-family: 'Papyrus', 'Times New Roman', serif;
}

Now all the h3’s are big and bold, while the paragraph tags are all set in Papyrus with a little padding on the bottom.

Simple enough?

Classes

Classes come in when you want to add in a new style for a paragraph but not have it affect every paragraph.

<p>Boring paragraph</p>
<p class="fun">Fun paragraph</p>
<p>Another boring paragraph</p>
<p class="fun">Another fun paragraph</p>

p {
  color: black;
  font-family: 'Helvetica', sans-serif;
}

p.fun {
  color: red;
  background-color: yellow;
  font-style: italic;
  text-decoration: underline;
}

p.fun means “apply this style to every p tag that also has the class of fun.” You could also just say .fun, too, if you were using the class on other kinds of elements.

Multiple classes

<p>This is nothing interesting</p>
<p class="fun big">This is fun and big</p>
<p class="fun">This is just fun</p>
<p class="big">This is just big</p>

If your class statement has multiple words in it, each one is a separate class. fun big isn’t a single class, it’s something that has the class of both fun and big.

.fun {
  color: red;
}

.big {
  font-size: 24px;
}

IDs

Classes mean, “maybe I’ll have a lot of these,” but sometimes you only need one. In that case you could also use an id instead.

<div id="main-container">
  <p>This is inside of the main container</p>
</div>

To style something with an ID using CSS, you use the # symbol.

#main-container {
  width: 600px;
  margin: 0 auto;
}