Introduction to Cascading Style Sheets

CSS Properties Practice

Here's a simple HTML and CSS template for learners to practice using various CSS properties. The HTML has a variety of elements, so learners can try out different styling properties, like color, font, padding, margin, borders, etc.

HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Properties Practice</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <header id="header">
    <h1>Practice CSS Properties</h1>
    <p>Experiment with different CSS properties to see how they affect styling.</p>
  </header>

  <section class="content">
    <h2>Section Heading</h2>
    <p class="text">This is a paragraph inside the content section.</p>
    <p class="highlight">This paragraph has a highlight class.</p>
    <button class="btn">Click Me</button>
  </section>

  <div class="box-container">
    <div class="box box1">Box 1</div>
    <div class="box box2">Box 2</div>
    <div class="box box3">Box 3</div>
  </div>

  <footer>
    <p>Contact us at <a href="mailto:example@example.com">example@example.com</a></p>
  </footer>

</body>
</html>

CSS (styles.css)

This CSS file is mostly empty to give learners room to experiment with various properties.

/* Basic reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Add your styles here */

/* Example CSS properties */

/* Color and Background */
header {
  background-color: lightblue;
  color: navy;
  padding: 20px;
  text-align: center;
}

/* Font and Text */
h1 {
  font-family: Arial, sans-serif;
  font-size: 24px;
  font-weight: bold;
}

/* Margin and Padding */
.content {
  padding: 15px;
  margin: 20px;
}

/* Border and Border Radius */
.box {
  width: 100px;
  height: 100px;
  margin: 10px;
  text-align: center;
  line-height: 100px;
}

/* Experiment with properties here */

Practice Exercises

By practicing with these properties, learners will become familiar with styling elements in different ways and using various CSS techniques for layout and styling.

You'll find the previous CSS code in our Code Pen, click on the link, type the correct code into the CSS. When you fix all the errors the render window should look like the following screenshot.

Screenshot from codepen.io

Here are the instructions:

  1. Color and Background: Set the background color of the .highlight paragraph to a light yellow and change the text color to dark gray.
  2. Font and Text: Change the font size of the <h2> element to 20px and make it italic.
  3. Button Styling: Style the .btn class by setting a background color, changing the font color, adding padding, and rounding the corners with border-radius.
  4. Borders: Add a border to each .box with different colors for each box (e.g., solid, dotted, dashed). Use border-radius to make the corners rounded.
  5. Padding and Margin: Increase the padding inside the .content section and set a margin around it.
  6. Hover Effect: Add a hover effect to links inside the <footer> to change color when hovered over.

In order to complete this assignment, you'll need to know how to screenshot your computer

Screenshot on a Mac

In order to take a screenshot on your Mac:

  • With the dialog or window you'd like to screen shot visible on your monitor, press command (⌘) + shift (⇧) + 4.
  • Draw a marquee around the portion of the display you'd like to screen shot.
    OR
  • Press the space bar and then click on the window you'd like to screenshot. (This only works on an open window or dialog. The OS helps you by "graying out" the window when you hover over it.

Screenshot on a PC

In order to take a screenshot on your PC:

  • With the dialog or window you'd like to screen shot visible on your monitor, press Windows (&x229e;) + Shift (⇧) + S.
  • Draw a marquee around the portion of the display you'd like to screen shot.
  • After capturing the screenshot, a thumbnail will appear in the bottom right corner of the screen.