Lesson 11 — CSS: Our First Sheet

In this lesson we will separate out the style attributes of our html elements into their own file as ‘classes’ so that we can reuse them for more than one element.

Currently we have using the html element’s style attribute to add more and more properties e.g. background, border, text-align styles. Let’s start with the following example of a simple stylized box. Note how messy the opening tag looks.

<div style="background: #FFEBC4; border: 1px solid black; border-radius: 20px; margin: 50px auto 0px auto; padding: 30px 15px 30px 15px; text-align: center; width: 400px;">
  An Important Box
</div>

Your box should look like this in your browser.

Div Element with Style Property

We can clean up your code by extracting out all the style properties and placing them into a Cascading Style Sheet (CSS). Your project already has a CSS set up in the form of main.css and can be found in the following location within your project directory.

Location of CSS File

Let’s open up that file and create a class called message-bubble. Note that to tell the browser this is a class we start the name with a full-stop and that you cannot use spaces in your name, instead we just use a hyphen.

.message-bubble {
}

Now we can insert all the style properties we had on our original div element above.

.message-bubble {
  background: #FFEBC4;
  border: 1px solid black;
  border-radius: 20px;
  margin: 50px auto 0px auto;
  padding: 30px 15px 30px 15px;
  text-align: center; width: 400px;
}

Here comes the cool part.

In your original post you can remove the style attribute and simple add the class attribute with the name of your newly created class. It should look like the following. Noting that in this occasion when we name the class we do not need the full-stop in front of the class name.

<div class="message-bubble">
  An Important Box
</div>

Refresh your browser and it should look exactly the same as what we originally had. If it doesn’t you may have to clear your cache, press the clear cache icon and refresh (see Tips & Tricks below).

Div Element With CSS Styling

So your box looks the same and you might be wondering what’s so special about this? Well, the great part now is we can create as many message bubbles as we like now without having to duplicate all the styling.

Add the following message bubbles to your project to see what I mean.

<div class="message-bubble">
  A quick message
</div>
<div class="message-bubble">
  It's easy to use classes
</div>
<div class="message-bubble">
  And it saves me so much time
</div>

Your project should now look like this.

CSS Class Used Multiple Times

Well done, you have created and reused your first CSS class.

Tips & Tricks

Browsers have to download a lot of information from servers around the world. To try and lessen the load they also remember a lot of information to save time and make the experience faster for the user. The information the browser stores is called the cache. This can sometimes cause problems when developing your project.

A quick fix is to install an extension to your browser to quickly clear the cache. It will end up being a button like this which you can quickly press before you refresh your browser.

Clear Cache Extension

To add the clear cache extension enter the following into Google

google chrome clear cache extension

The results should look like this and if it does click the first link.

Google Clear Cache Results

Go through and follow the direction on this page.

Clear Cache Extension

Finally, Chrome may group the extension under this icon, if it does just click it, find the clear cache extension icon and click the pin icon.

Pin Clear Cache Extension