Labs
3 Presentation

Presentation

Objective

  1. Stylesheets, cascading order, and syntax.
  2. Selectors, properties, values, and units.
  3. The box model.

1 Basics

Search for and install Visual Studio Code extensions from the marketplace (opens in a new tab) to enhance your experience.

  1. Experiment with multiple ways of including CSS in your HTML pages: inline, internal/embedded, and external.

You can learn more about the box model using this guide (opens in a new tab) from CSS-Tricks and this guide (opens in a new tab) from MDN Web Docs.

  1. Use the W3Schools CSS tutorial (opens in a new tab) to complete the following CSS exercises (opens in a new tab):

    • selectors
    • background
    • border
    • margin
    • padding
    • height/width
    • box model
    • outline
    • text
    • font
    • links
    • lists
    • combinators
    • pseudo-classes
    • pseudo-elements
    • attribute selectors
    • rounded corners
    • color

Complete the CSS Diner (opens in a new tab) game to test your selector skills.

  1. Use an internal stylesheet to present the provided quantum.html and qubit.html pages as shown in Figure 1; do not modify the document structure of the pages.

    quantum.html
    <head>
  <style type="text/css">
    * {
      box-sizing: border-box;
    }
  </style>
</head>

Figure 1: CSS basics

2 Extra

Complete the CSS Sundae (opens in a new tab) game to learn more about positioning.

Go through all the W3Schools tutorials (opens in a new tab) and complete all the exercises (opens in a new tab) for a thorough understanding of CSS.

Resources

2 Content4 Layouts