Module 3: HTML & CSS Basics Part 2

Now that you've had some practice creating basic HTML, it's time to learn about CSS. 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 3 Deliverable

This module does not have a deliverable that you will place in your prework folder. It is, however, important that you complete all of the codealongs outlined in the module.

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.

Enter CSS

Let's first take a look at a sample set of CSS styles so you can get comfortable with the syntax:

<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>

So what's going on here?

How CSS Works

If you spend a few moments looking at this 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.

Mod9-3

What Are Classes?

HTML elements use an HTML attribute called class to access specific CSS styles. Here's an example of an unordered list that uses classes to create different styles for each list item:

<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 HTML tags.

Styling with CSS

Let's jump in and start working with styles! Complete the following codealong and get started with CSS:


Sizing with CSS

Now that you've had an opportunity to work with styling your CSS, let's complete the following codealong to see how we can change font sizes:


Putting It All Together

You've now covered all of the most fundamental components of HTML and CSS. Let's put them all together to create your first web page:


Now that you've practiced HTML and CSS in codealongs, complete a quick check-in to see how you're feeling about using CSS:

Great job starting out with HTML and CSS! Now let's install some tools so that you can code on your own!

Resources

Prework Support

Looking for prework support? Our team of tutors are eager to help! Request a tutor session with the following steps:

1. If not already logged in to BCS, login using your credentials (supplied 24 hours after enrollment).

2. Click Support in the top right.

3. Complete the form fields to submit your request:

  • Under Question Category, select "Tutor Request.”

  • Under Question Category, select "Request a Tutor.”

  • Under Currently, Which Sessions Would You Like to Discuss?, select “Prework assignment”.

4. Complete the additional fields and submit your request.