Please use the CSS Reference post to help you along!. Let’s start with a div that has some class: Let’s get started with some basics!

See the Pen cssIntro1 by Angel Grablev (@agrublev) on CodePen.

Now do it yourself 😉 Open this CodePen Let’s get fancy Open this CodePen More exercises:

• https://www.w3schools.com/css/exercise.asp?filename=exercise_syntax3
• https://www.w3schools.com/css/exercise.asp?filename=exercise_margin2
• https://www.w3schools.com/css/exercise.asp?filename=exercise_padding2
• https://www.w3schools.com/css/exercise.asp?filename=exercise_dimension1
• https://www.w3schools.com/css/exercise.asp?filename=exercise_dimension2
• https://www.w3schools.com/css/exercise.asp?filename=exercise_boxmodel1
• https://www.w3schools.com/css/exercise.asp?filename=exercise_boxmodel2
• https://www.w3schools.com/css/exercise.asp?filename=exercise_boxmodel4

Let’s start with some sample div that has a class:

<div class="nameOfDiv">
    Some text
</div>

Now in our stylesheet (or in a codepen use the CSS section and enter your CSS code) we select this specific div with the . selector for class:

.nameOfDiv {
   /* We'll enter our declarations here */ 
}

Inside the curly brackets, we can enter a new declaration on each line. Here is a nice overview of the possible properties you can specify:

Declaration key	Declaration values	Explanation of property
background	black, red, orange, pink, tomato, green, white, etc	Sets the background color of our element. It takes in a name of a color.
color	same as background, a named color	Set the text color of the element (all children of the element will inherit this color!)
width	% (of the page) or pixels using px. 30% or 300px	Sets the horizontal size of our element
height	% (of the page) or pixels using px. 30% or 300px	Sets the vertical height of our element
padding	Preferably use pixels, but can also take in %. 15px	Sets the inner padding of an element
margin	Preferably use pixels, but can also take in %. 15px	Sets the outer margin of an element
display	block, inline, inline-block, flex	Allows us to choose how we want our element to display on the page. Flex makes all immediate children into columns.

Now let’s combine all these declarations inside our CSS selector:

.nameOfDiv {
    background: orange;
    color: white;
    width: 150px;
    height: 50px;
    padding: 15px;
    margin: 10px;
    display: inline-block;
}

Great, now the result should look like this:

If we simply add a couple more div’s with the same name the result would be:

This is thanks to the power of an inline-block element which gets the benefits of block (padding/margin) and inline by showing multiple elements on the same line!

An alternative way to accomplish the same result without using display inline-block is to use flex. We need to add a parent that wraps the three div’s nameOfDiv and make the parent display flex. Like this:

<div class="flex">
    <div class="nameOfDiv">Some text</div>	
    <div class="nameOfDiv">Some text</div>	
    <div class="nameOfDiv">Some text</div>	
</div>

And the CSS would be:

.flex {
    display: flex;
}
.nameOfDiv {
    background: orange;
    color: white;
    width: 150px;
    height: 50px;
    padding: 15px;
    margin: 10px;
}

Notice that nameOfDiv is no longer display inline-block. However, with the flex parent we still see:

Feel free to play with the flex example here https://codepen.io/agrublev/pen/ZqdGXR