A3 - CSS Classes

Setup

Run update within your Google Drive folder for this class to download the new files. Next, inside Visual Studio Code, open your Unit 2 folder and then navigate to the A3 subfolder. Inside there are two files: a3.html and style.css. Open both of these (it will be helpful to close any other tabs you already have open), then from a3.html open a Live Preview tab.

What you see will certainly not be too visually appealing, but it will be sufficient for the purpose of this assignment.

Overview of the Files

We'll start by focusing on these two lines of the HTML:

<h1 class="green-uppercase">I'm Green!</h1>

<h1 class="blue-uppercase">I'm Blue... ba da dee, ba da da</h1>

and also this chunk of the CSS:

.green-uppercase {
    color: green;
    text-transform: uppercase;
}

.blue-uppercase {
    color: blue;
    text-transform: uppercase;
}

This illustrates how we handle a situation where we might want to have two headers on our page, each styled differently. We can give any HTML element a class attribute, with a name we choose (the name should only have lowercase letters and dashes; no spaces are allowed). In this example, I chose the names green-uppercase and blue-uppercase.

Then, in the CSS, we can style elements based on their class names by starting the section name with a dot (example, .green-uppercase).

<span> and <div> Tags

These two tags are almost identical, in that they do nothing on their own. When using them, we always add a class= attribute, and then the CSS is the only thing that dictates the behaviour of the content inside these tags.

In the HTML file, we have this section:

<div class="important-box">
    <h2>Important - Please read!</h2>
    <p>
        Now that I have your attention, this box really isn't that important.
    </p>
</div>

It is formatted using this section of the CSS:

.important-box {
    color: red;
    background-color:rgb(255, 212, 212);
    padding: 10px;
    margin: 30px;
    border: solid 3px red;
    border-radius: 10px;
    box-shadow: -5px 5px 10px 3px gray; /* Offset 5px left and down, 10px blur, 3px spread, gray */
}

The difference between <span> and <div> is:

• <div> is block level, meaning it will start a new vertical section (or division).
• <span> is inline, meaning you can apply it to a chunk of text within a line.

In the HTML file, you can see I've applied the super-highlight class to both a <span> and a <div>, and the live preview should illustrate the difference nicely:

<p>
    Part of this sentence will <span class="super-highlight">really</span> stand out.
</p>


<div class="super-highlight">
    This entire box<br>
    will really stand out.
</div>

Your Task

There are two additional classes used in the HTML file that so far do not have styling instructions in the CSS:

• unimportant-box
• special

Add entries to the CSS file for both of these classes. See if you can make unimportant-box really dull, and special a litte funky. A good strategy is to start with a copy of an existing entry, then modify it.

Optional Extension

Add some content to the HTML that makes use of a new class name of your choosing, and add styling for that class name in the CSS.