styling markup

blog: finishing off the header

We've made a lot of progress on our header and can finish it off now that we've introduced floats.

input { border: 1px solid rgb(193,193,193); padding-left: 3px; } #header_container { float: left; width: 100%; color: rgb(255,255,255); letter-spacing: 2px; background-color: rgb(116,168,245); } #search_container { margin: 0; padding: 5px 10px 5px 0; float: right; } #title_parts { margin: 5px 0 0 15px; }

navigation container - blog version 13

These few additions, in bold, finish up the banner at the top of our blog. First we added the rule for the search_container and floated it to the right side of the banner. Next, we added a rule for all <input> elements on the page, overriding the default border and adding a bit of padding. We also float the header_container div left so it will contain any elements floated within it. Our last changes involved styling the title portion of the header. We enlarged the 'title' portion and made it bold while decreasing the font size of the 'subtitle' portion and setting its font weight to normal. This allows us to put both parts right next to each other yet keep them visually distinct. The last part adds a little margin on our 'title_parts' div to separate our title from the edges of the page.

You may notice that now we have a think white border at the top of our page that was not there before. This is being caused by the default margin on the <h1> element and will be fixed soon.

blog: formatting section headers

Recall that the main portion of our text is divided into three main sections: 'info_photo_container', 'link_collection_container' and 'article_collection_container'. We'll color each of these differently. Also, each section has subheaders, which we'll give a neutral color and style. The CSS additions are as follows:

h1 { font-size: 100%; color: rgb(255,255,255); padding-left: 10px; margin-top: 0; } h2 { font-size: 90%; color: rgb(150, 150, 150); border-bottom: 1px dotted rgb(150,150,150); } #article_collection_container h1 { background-color: rgb(150,150,150); } #info_photo_container h1 { background-color: rgb(133,195,41); } #link_collection_container h1 { background-color: rgb(251,150,34); }

navigation container - blog version 14

With these new 5 rules we first define the general appearance of <h1> and <h2> elements, setting the size and text colors of each. We then define the specific background colors we want to use for each of our <h1> three sections by using the background-color property.

blog: three-column layout

Our page is now a lot closer to looking like the final product, but a key part is missing. We want our three main sections to be three different columns on the page, and right now they are stacked on top of one another. We can use what we learned about floating elements to achieve this three-column layout. All we need to do is set widths for our left and right columns and then apply the proper floats.

#article_collection_container { margin: 0 260px 0 210px; } #content_container { clear: both; background-color: rgb(255,255,255); margin-top: 10px; padding: 15px; } #info_photo_container { width: 200px; float: left; } #link_collection_container { width: 250px; float: right; }

navigation container - blog version 15

I've put them in alphabetical order above but that's not the best way to read them. Instead, visualize an empty page. On this page we've forced a 200px-wide element to the left-hand side (the info_photo_container) and a 250px-side element on the right-hand side (the link_collection_container). Because the user can make their browser window as wide as their monitor will let them we can't just assign some fixed width for the middle column if we want our page to be fluid. But however big the window is, we know that the left-most 200px and the right-most 250px are occupied by our first and third columns, which are both floated. And because they are both floated, and our middle column is not, the middle column will rise up and try to take their place causing some awkward overlapping in most browsers. Here is the key to the layout: since we know the width of the left and right columns we can use those widths as the margins for our middle column (plus a little extra for column spacing).

We also threw in a rule for the content_container, which wraps around the other three, which gave it some padding and made sure it 'cleared' any floating elements above it (since most of the header elements are floated.) It's definitely not perfect yet - most browsers will show a little overlap still because some of our elements in the left column are expanding outside of the space allowed for them, but we'll get to that shortly.

The important thing to note here is that, because we marked up our document and clearly grouped and identified each content section, we were able to transform a vertical layout into a 3-column horizontal one with no tables and only 3 of the CSS rules above.

blog: cleaning up our lists

Both the left and right columns of our page have list elements that need to be styled. The list in the left column contains images and we're just going to remove the style completely. The list in the right column is a collection of links to different web pages. Here are the style rules we'll add.

a { color: rgb(80,80,80); text-decoration: none; font-weight: bold; font-size: 90%; letter-spacing: 1px; } ul.images { list-style: none; margin: 0; padding: 0; } ul.images li { padding-top: 5px; } ul.links { list-style-image: url('/web_class/images/link.gif'); }

navigation container - blog version 16

Because our lists contain so many links, we'll start by changing the default style of all links on the page. I don't personally like the bright-blue underlined default font for <a> elements, so in the first rule I reset the color and removed the underline. I also made the font bold, shrunk it by 10% and spaced the letters a bit further apart than normal.

Next we style the 'images' list in the left-hand column. No new properties here - we simply remove the list style, margins and padding, and add a bit of padding to the top of each element of the list.

Finally we added a custom image to each element of the link collection list using the list-style-image property. The value of this property must be a path (URL) to an image.

blog: it's the little things that matter

You can see that we're pretty close to being finished with the overall appearance of our blog. We'll toss in a few easy changes here.

div.date_container { font-size: 70%; color: rgb(150,150,150); margin-bottom: 10px; } #clarke_book { float: left; } #coffee { float: right; margin: 10px 5px 5px 10px; }

navigation container - blog version 17

The first rule above styled the small date in the upper left column. Because it's a minor date and shouldn't be too noticeable, I've made the font smaller and lightened the text. The next two rules simply float the images in each article so that the text wraps around them. While we're dealing with the little things, let's clean up the dates in the article titles, style the blockquote in the first article and give each some spacing.

.article_container { margin-bottom: 35px; } blockquote { font-style: italic; } span.article_date { color: rgb(100,100,100); font-size: 80%; padding-left: 25px; }

navigation container - blog version 18

No new style properties here, just some of the small details that hopefully make a site easier to look at. Only two more steps to go. First we'll take the ugly data table and make it something someone might actually read.

blog: styling the table

div.table_container { padding: 0 10px 0 20px; } #coffee_stats { border-collapse: collapse; width: 100%; margin: 15px 0 15px 0; } #coffee_stats caption { font-size: 90%; font-weight: bold; text-align: center; color: rgb(150,150,150); } #coffee_stats td.blank, #coffee_stats th.blank { border: none; } #coffee_stats thead th { color: rgb(100,100,100); } #coffee_stats td, #coffee_stats th { border: 1px solid rgb(193,193,193); text-align: center; }

navigation container - blog version 19

We've applied 6 rules here but only one of them contains a daclaration we haven't seen before. We first add some padding to the container div holding the table. Next to the table itself, which has an id of 'coffee_stats', we set the width to be 100% of the container div and add some margin. The border-collapse property collapses any borders that might be touching one another, such as the ones between table cells. If we didn't use this we would either get spacing between each cell or the double borders.

Next we style the caption of the table with standard declarations. We have a few table cells that are empty so we remove the borders from these to avoid ugly empty squares. This is also the first time we show that a single rule can have multiple comma-separated selectors. Using this same method we style each of the <td> and <th> elements with a single rule, setting a border and centering the text of each. We have only one last thing to add.

blog: controlling page width

Our blog is now in its final form except for one small problem. When you resize the browser window to be smaller, the middle column shrinks. We wanted our page to be fluid, so this is what we want. But if the user sizes it too small funny things begin to happen, and eventually the appearance breaks down altogether. We want our page to be fluid and expand when the user makes the window larger or smaller, but we want to set a limit on how small it can go. Here's the last bit of CSS:

#content_container, #nav_container, #header_container { min-width: 700px; }

navigation container - blog final version

Our last CSS rule has three selectors separated by commas so we can use the same declaration for all three. Here we introduce the min-width property to limit how small the user can shrink the page. For some reason, this terribly useful property is absolutely ignored by Internet Explorer but we'll include it anyway as a benefit for those using more standards-compliant browsers.

That's it for styling with CSS for now. We've taken a simple text document, marked it up with descriptive and ugly HTML and then written a stylesheet to transform it into something more beautiful. It may seem like these 20 steps were a lot to go through to make a decent looking page, it gets much easier once you become familiar with all the CSS properties available to you. I'm no expert, and it only took me about an hour to write the stylesheet from scratch after finishing the markup.

what's next?

On the next page we'll explore how to create some cool effects using CSS, like drop-shadows and rounded corners.