The Complete Advanced Guide to CSS/

...

/

Initial Styling

Initial Styling

Let's kick off with some styles!

We'll cover the following...

As a refresher, here’s the markup we’ll be working with.

Press + to interact
<div class="movie">
  <h1> The SuperMan </h1>
  <p>An alien orphan is sent from his dying planet
    to Earth, where he grows up to become his 
    adoptive home's first and greatest superhero.
    <button>Add to Cart</button>
  </p>
 </div>

What do you make of it?

Also, here’s the end goal, again.

widget


Styling the Parent Class

I’m taking a top-down approach with this project. So, I’ll walk you through styling the parent container, .movie

First things first.

  1. We need the width of .movie to fill the entire width available.
  2. We need to set a background image on .movie. One that doesn’t get cut off, but covers the entire area available.
  3. Finally, we need a nonuniform spacing within the .movie
...