The Complete Advanced Guide to CSS/

...

/

Beginning the Project

Beginning the Project

Before exploring positioning in CSS I want to get you started on the project we will build in this section.

We'll cover the following...

Getting Started

The project begins with the modest markup below:

Press + to interact
<html>
 <head>
   <title> Teach me positioning </title> 
 </head>
 <body>
   <section class="phone-body">
   </section>
 </body>
</html>

As you may have guessed, .phone-body refers to the outer phone container.

I’ll go ahead and give it a width and height:


	width: 350px;
  height: 700px;

Well, that’s good but not good enough to get anyone excited.

Let’s display something on the screen.

Not bad.

Be sure to check the code tabs above.

The html is the same as the former. No additions made here.

On the CSS side of things though, there’s a bit in there. Look closely, and you’ll realize all of that is familiar terrrain.

:root {
  --secondary-bg: rgba(0,0,0,0.9);
}
body {
  min-height: 100vh;
  margin: 0;
  font-family: serif;
  background: var(--secondary-bg);
}
.phone-body {
  width: 350px;
  height: 700px;
  
  border-radius: 30px;
  border: 2px solid red;
}

First off there’s a color variable on line 2. Gosh, I love variables.

The variable is used to give the body a dark background, as seen on line 9. From previous lessons, you should know ...