you created in the previous step. Remember this box won’t have any color yet. We’ll show you a trick to color it in on the next step.
Our HTML looks like this:
IN CSS:
#bigbox {
width: 290px;
height: 290px;
}
--------------------------
http://imgur.com/pu4gSEP
IN CSS:
Now let’s give that box some color! Now you’re probably thinking we could just add a background-color attribute to the #bigbox id we already created, and you would be correct! That would get the job done pretty well. But remember we want to give multiple boxes the same color later in the project. For that a CSS .class will be a better choice.
Classes are similar to the #id styles we’ve been working with except the same class can be used to style multiple elements, including DIVs that already have #ids in our layout. That will make more sense in just a bit. Let’s make that .class first.
In your CSS tab start a new line.
Begin writing your first color class. It looks exactly the same as the other styles we’ve typed up so far except instead of “#” in front of the selector we put a “.” (period). We are only defining color with these classes so the only attribute needs to be background-color. Try just “red” as the background-color.
.red {
background-color: #cc3333;
}
IN HTML:
To apply the .red class to our #bigbox DIV, simply add the text class="red" to its tag in HTML.
IN CSS:
Now that you know how .class works, go ahead and make classes for the other colors in this painting: .blue, .yellow, and .black. You can make additional color classes as well.
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.yellow {
background-color: yellow;
}
.black {
background-color: black;
}
--------------------------
http://imgur.com/k4vtzgl
IN CSS:
You probably noticed the big red box is on the wrong side. These things happen. Web elements will default to the upper left if they aren’t assigned any other positioning. Let’s move this box to the place its supposed to go.
There are many different ways of positioning an element the but method we will be using is called float. It makes things move (or float) either right or left until they bump into something. Normally a DIV will position itself underneath the previous element, but when DIVs are "floated", they can align side-by-side until there is no more space and they are forced to wrap.
Let's make a class called .right and use it to float the bigbox DIV to the right:
Here's the relevant CSS:
.right {
float: right;
}
IN HTML:
And here's what changed in the HTML:
Note that an element can only have a single #id, but it can have more than one .class.
Floated elements will stack up against each other. This means if we give all the boxes in our rows the .right .class they will float up next to each other and form a nice horizontal row. That’s what we want for the next step.
--------------------------
http://imgur.com/KSYpSO6
IN CSS:
Now let’s add one of those black bars. We’ll add them the same way we added the big red box. Make a new #id for the top divider and assign a color and position class to it in the HTML. our divider is 10px wide and 290px tall.
Our CSS code looks like this:
#divider1 {
height: 290px;
width: 10px;
}
IN HTML:
--------------------------
http://imgur.com/7v0k3Ut
Now let’s make a column, called #topleftcolumn. We will be putting three boxes in it, two with the .mediumbox class, and a horizontal #divider2 in between.
#topleftcolumn won't be visible, but it helps position and stack those three boxes vertically within that last bit of the row.
IN HTML:
IN CSS:
.mediumbox {
width: 100px;
height: 140px;
}
#divider2 {
height: 10px;
width: 100px;
}
Since the two boxes are the exact same size we can use one .class for both of them instead of using a unique #id.
--------------------------
http://imgur.com/EhiiHqa
This is just another black divider, but it's not inside #toprow.
Here's the HTML markup:
...Can you figure out the CSS?
--------------------------
http://imgur.com/GmUw8pk
Now you’re ready to do the last row your self. You have all the pieces and knowledge at your disposal. The process is the same as the top row we just completed just with different sizes and colors. Keep an eye on those little boxes at the right. They’ll need their own column.
--------------------------
http://imgur.com/zS2HKmI
You’re done! Doesn’t it look great? Actually, maybe it doesn’t look that great. Maybe you want to make it wilder, add more colors or change the ones that are already there. Good thing that’s easy to do. Go back into the CSS tab and start changing the values of the color classes we made. If you’re feeling really crazy, maybe change some box sizes or add new ones. See if you can make it a whole new painting.