Skip to content

Exercises (CSS): Webmaking with HTML and CSS

Jump to bottom
Jonathan edited this page Jun 19, 2023 · 5 revisions

CSS exercises

Exercise 5: background-color 

selector { property: value; }

Instructions

Let's write some CSS rules to change the background color of some of our elements! First, create a style element (<style>...</style>) inside your head element. Then:

  1. Set the header element's background-color to mediumvioletred.
  2. Set the background-color of your section elements to lightgrey.
  3. Set the background-color of your main element to goldenrod.

Hints

  • Follow the CSS syntax pattern: selector { property: value; }. For task 1, this means: use header as the selector, background-color as the property and mediumvioletred as the value.

Code snippets
  • Adding a style element and the solution for task 1 (the other tasks follow this pattern).
<!DOCTYPE html>
<html>
  <head>
    <style>
      header { background-color: mediumvioletred; }
    </style>
  </head>
  <body>
    <!-- body content -->
  </body>
</html>

Exercise 6: Using rgb colors

rgb(R, G, B), where R, G, and B can be numbers (0 to 255), percentages (0% to 100%), or none.

Instructions

For this short exercise, create CSS rules based on the instructions below:

  1. Set the background-color property of your h1 element to rgb(68,68,68) (dark grey).
  2. Set the color property of your header element to a bright yellow or gold color using an rgb expression. Hint: red and green should dominate for yellows and golds.

Hints

  • Don't forget that your CSS goes inside your style element!
  • Follow the CSS syntax pattern: selector { property: value; } using an rgb expression for the value.

Code snippets
  • Using an rgb expression to set the background-color property of header elements to a pale blue.
      header { background-color: rgb(65, 120, 240); }

Exercise 7: CSS classes

Instructions

<h1>Getting started with 
  <span class="big">HTML and CSS</span>
</h1>

Together, let's first add a span element with the big class (i.e., class="big") inside our h1 element. Then, let's:

  1. Create a CSS rule for the class selector, .big.

  2. Create a declaration to set the font-size property to 120%.

    Contrasting color schemes can make your web page more visually appealing. For the rest of this exercise, you will create a CSS rule that will apply a color scheme of light text/dark background.

  3. Create a CSS rule with the class selector, .dark.

  4. Create declarations to do the following:

    1. Set the background-color property to darkslategrey.
    2. Change the color property (text color) to white.

  5. On your page, apply this rule to one or more (but not all) of your section elements by adding a class attribute and the dark class (i.e., class="dark").

Hints

  • Don't forget that your CSS goes inside your style element!
  • Class selectors start with a dot . followed by the name of the class, e.g.
.big { /* property: value; */ }`

Code snippets
  • The h1 element in the finished project also has some em elements sprinkled in.
<h1>Getting started with 
  <span class="big">
    <em>HTML</em> and <em>CSS</em>
  </span>
</h1>

Exercise 8: font-family

Instructions

In this short exercise, we'll create a rule for the body element and use it to change the typeface of the whole page.

  1. Create a rule that uses body as a selector.
  2. Add a declaration to your new rule that sets the font-family property to 'Segoe UI', sans-serif Be sure to include both the font name as well as the fallback typeface (sans-serif).

That's it! Because of inheritance, every element contained in body (so, every element on the page) will use body's value of font-family.

Exercise 9: max-width & padding

Instructions

Find your rules that use the h1 & section selectors. Then, modify each rule to include declarations for the following properties:

  1. max-width, with a value between 500px and 700px. This is the horizontal width of the element.
  2. padding, with a value between 10px and 20px.

Code snippets

 
h1 {
  background-color: rgb(68,68,68);
  max-width: /* ... */;
  padding: /* ... */;
}

section {
  background-color: lightgrey;
  /* ... */
}

Exercise 10: margin magic

Instructions

Find your rules that use the h1 & section selectors. Then, modify each rule to include declarations for the following properties:

  1. For your section rule, set the margin property to auto.
  2. For your h1 rule, set the margin property to auto and the text-align property to center.

Polishing the design: Stretch concepts

img styling

img {
  max-width: 100%;
}

More h1 styling

h1 {
  background-color: rgb(68, 68, 68);
  max-width: 600px;
  padding: 10px;
  margin: auto;
  text-align: center;

  /* new properties 👇 */
  text-transform: uppercase;
  font-size:250%;
  line-height: 1;
}

The h1 em selector

  • A selector that works based on the relationship between elements. It means "all em elements inside of h1 elements" (of which there are 2).
h1 em {
  color:skyblue;
}

The header img element and header-img class

<header>
  <img class="header-img" src="https://picsum.photos/seed/qrst/800/250" alt="">
  <h1>...</h1>
</header>
.header-img {
  display:block;
  width:100%;
  max-width:620px;
  margin:auto;
}

Clone this wiki locally