Are you ready for a hands-on challenge? It's time to get back to your clientlayout.htm and clientstyles.css pages from the previous assignments and do some creative design work.

Your first challenge is to get some nonsense text into the content division of your clientlayout.htm so you have something to work with. Put in a least one h1 element, a paragraph or two, and an unordered list. You can use the nonsense text and tags from the lesson or from the LoremIpsum.txt file in the downloaded AdvCSSCourse folder. Save the page and view it in a browser. Don't expect it to look perfect right off the bat. You need to do some styling.

To style things, you'll need to do some work in clientstyles.css, not the page itself.

The client layout page has three columns rather than two. So, to ensure that text in the content division doesn't overlap leftcolumn and rightcolumn, you'll need to set the left and right margins of the content division equal to the widths of those two sidebar columns. In the last assignment, you left those each at 10em. So, you need a #content style rule in layoutstyles.css that sets the left and right margins of that division accordingly.

 

Tip: Remember, it's a good idea to save the style sheet and refresh the page in the browser every time you make a change. Seeing the effect of every single change immediately helps you learn how things work and nips problems in the bud as soon as they occur.

While you're creating the #content style rule, think about adding some padding inside of it to prevent text in that division from touching the edges of the division. Feel free to specify a background color and text color for the division, as well.

Why don't you try something a little different for the body{} style rule? How about using the font family and centering all text like this:

 

font-family: Geneva, Tahoma, sans-serif;
text-align:center;

Next, create a style rule for h1, h2, and h3 elements in the content division. Even if there aren't h2 or h3 elements in the page, there's no harm in anticipating that you might use them and creating a style rule in advance. Let's try something like this for the headings in the content division:

 

font-family: "Apple Chancery" "Brush Script MT", "Monotype Corsiva", cursive;
color:#45322F;

CSS is a very flexible language. To illustrate that, create a style rule that applies to paragraphs, unordered lists, and ordered lists in the content division. Set their text alignment to left, their line height to 1.25em, and their font size to 0.8em (which is equal to about 10 points), like this:

 

text-align:left;
  font-size:0.8em;
  line-height:1.25em;

That still leaves the left edge of any lists in the page that are sticking out. How about adding another style rule that applies only to unordered lists and ordered lists in the content division? Add a padding descriptor to set the top, right, bottom, and left margins to 5, 0, 5, and 30 pixels respectively, like this:

 

padding: 5px 0px 5px 30px;

That should be enough to get you started. After you've added all the style rules to the style sheet, saved it, and refreshed the page in the browser, your clientlayout.htm page should look something like this:

 

Clientlayout.htm with new style sheet applied

Do you think you can do all that without peeking? It's a little different from what we did in the lesson. But the same concepts and syntax rules still apply.

The answers are below. The only thing you have to do in clientlayout.htm is add the nonsense text to the content division:

Click here to view the answers.