Module 5: CSS Basics
Now that you've had a chance to practice some HTML fundamentals, complete a quick check-in to see how you're feeling about your new skills:
Now let's add HTML's stalwart partner, CSS, to our skill set. With the power of CSS, you can apply a wide variety of styles to your HTML and take your webpages to the next level.
Module 5 Deliverable
For this module, you'll be creating an HTML file and a CSS file. You can add these files to the prework folder on your computer and place them in the Module-5 subfolder.
What Is CSS?
CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation of a webpage. To continue our example from the previous module, if HTML is the skeleton of a webpage, then CSS is its fat, skin, and pinstripe suit. Whereas HTML is strictly concerned with the markup of webpages, CSS is focused on colors, aesthetics, and visual layout. It works by hooking onto specific elements of an HTML page and formatting them using any number of options (called styles).
However, jumping into CSS isn't always straightforward. As is a common theme in web development, the process for formatting visual styles on a website requires an explicit level of detail and a precise command of the language. Again, it's worth remembering that creating web applications isn't a drag-and-drop process. Colors, aesthetics, fonts, and visual layouts each need to be coded in order for every browser to consistently render the page correctly.
A Chocolatey Dilemma
To begin our exploration of CSS, we'll need to create a starting HTML file. You can use the one below as an example.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ode to Chocolate</title>
</head>
<body>
<h1>An Ode to Chocolate</h1>
<h2>A Chocolatey Reflection</h2>
<p>I love chocolate soooooo much. If I could, I would eat chocolate every single day, every single hour, every single second. I am so obsessed about chocolate that I dream about it every single night. People tell me I have a problem, but I say, "How can chocolate be a problem? Chocolate IS the ANSWER."</p>
<img src="https://images.unsplash.com/photo-1511381939415-e44015466834?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600" alt="chocolates">
<h2>Favorite Chocolates</h2>
<ul>
<li class="almond">Almond Joy</li>
<li class="butterfinger">Butterfinger</li>
<li class="ferrero">Ferrero Rocher</li>
<li class="all">But I also love all kinds.</li>
</ul>
</body>
</html>
If you copy this code into Visual Studio Code, save it as an HTML file, and then load it into browser, you should see a webpage that looks something like the below.
Not bad. But sort of boring.
In fact, we might suspect that the author of this webpage would probably like a more chocolate-colored theme.
Enter CSS
This is where CSS comes in! With a few extra lines of code, we can completely change the background color, font sizes, and text colors of the website. Take a moment to add the below code to inside your <head> tag.
<head>>
<style>
body {
background-color: brown;
}
h1 {
color: white;
text-decoration: underline;
}
h2, h3, p {
color: yellow;
}
p, li {
font-size: 24px;
font-family: cursive;
}
.almond {
color: white;
}
.butterfinger {
color: orange;
}
.ferrero {
color: gold;
}
.all {
color: blue;
}
</style>
</head>
Once we save our HTML file again, the layout will look like the below.
Much better!
How CSS Works
If you spend a few moments looking at the new code, you will notice that we used a consistent syntax like the below.
HTML-TAG {
CSS-PROPERTY: VALUE
}
In effect, we're referencing specific HTML elements and then applying changes to how they are formatted. The format options are each known as properties in CSS, with specific options for how they can be modified. Don't expect to memorize all of the formatting options available through CSS. For many of your early weeks and months as a developer, you will need to continually reference websites like W3 Schools, among others, to recollect the exact syntax.
Believe it or not, through just simple HTML and CSS alone, you will be able to build complex web layouts like the one below. (In fact, this is a screenshot of your first homework assignment in class.)
What Are Classes?
If you were paying close attention, you may have noticed that certain HTML elements in our last example also included a mysterious use of the word class. We used these throughout the list of favorite chocolates:
<ul>
<li class="almond">Almond Joy</li>
<li class="butterfinger">Butterfinger</li>
<li class="ferrero">Ferrero Rocher</li>
<li class="all">But I also love all kinds.</li>
</ul>
Classes (along with IDs) offer us a method to style specific or multiple HTML elements using the same CSS. We'll talk a lot about classes and IDs during the program, but it's helpful to have some exposure in advance.
To get you started, this next activity will give you some practice in styling HTML, using such CSS selectors like classes and like HTML tags.