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
(please wait until class to go through this page!)
In today’s lesson, we will begin to cover the basics of building websites. The first most important building block of a website is the HTML language, which allows us to give the browser instructions to render our website.
Exercise 1: Add some boxes (div tags)
In the below code editor add some div tags, and see your resulting boxes!
See the Pen MakeSomeBoxes by Angel Grablev (@agrublev) on CodePen.
Exercise 2: Add an image
Now let’s utilize the self closing tag for adding an image.
Add the img tag and then add the src attribute with the value “http://x.co/myimg”
See the Pen MakeSomeBoxes by Angel Grablev (@agrublev) on CodePen.
Exercise 3: My webpage
Let’s build a simple website by simply adding a number of div tags with the appropriate class names.
See the Pen MyWebpage by Angel Grablev (@agrublev) on CodePen.
The final result should look like this:
See the Pen MyWebpageFinished by Angel Grablev (@agrublev) on CodePen.
Please sign up for repl by going to this link http://x.co/joinrepl
There should be one assignment named “Simple Page for yourself” which is due next Tuesday!