Part 4:Back to the Future

How to Update the Styling of the Page

Step 1: You will learn how to solve the problem of the last post, in this step. Uh, wait what was the issue in the last post again? …You couldn’t visually tell the difference between the different sections.

For this next part you should think of each section as living inside of it’s own row, and each row having it’s own content inside of it. If that doesn’t make sense, think of it like a table that has different sets of data in it. If your are still confused, a cuter visualization is you have five boxes sitting next to each other on your living room floor, and each box has a different cat in it. The box represents the row and the cats represent the content.

Step 2:

content-row:This class says that this HTML element represents a row that goes across the entire width of the page. These rows also have their own content.

row-content: This class is used for the actual content of each row. A.k.a. the stuff people will actually see, when they look at the page. You should have this to be inside of the row. You also should make it centered with and have a maximum width of 960px. Like you’ve been doing before.

odd/even: You can now style the alternating rows differently from each other. You don’t have to call either odd and even. You can pick any two different names. Odd and even are just easy to tell apart and remember.

Step 3: Time to work on you CSS file!

Add .content-row.odd{} then after that .content-row.odd{} Your odd won’t be stylized yet but don’t worry you’ll do that in a later post. For the even section you are going to make the background color grey, background-color: #AAAAAA Then you will make the text white color: white:

Now, we don’t look like twinzies!
Show your support

Clapping shows how much you appreciated Rose Pacheco-Campbell’s story.