Styling Content

At this point you should have a basic layout that is styled and the HTML content in place. This page shows how to style the content by styling the example we have been using so far.

Here’s what we want it to look like in the end:

For reference here is our design with the content labeled:

And here’s the page with the CSS for the layout we have so far:

We still have the wrong background colors for the columns so we can see where they are. We will correct that as we go along.

We’ll start styling the element generally and then get more specific. Much of what we’re doing first is styling type. We’ll follow our own rules from this page on typography, http://webdesign.blogs.peopleio.net/design/typography/,  (which also has a lot of other resources on typography). We’ll also follow the design comp of course.

First we add in the font families for the paragraphs and titles. People often refer to the font family values as the font stack. The main text is Verdana. Our alternatives for the font stack are Tahoma and sans-serif. For the titles the font is Helvetica Neue Light, the alternatives are Helvetica, Arial and sans-serif. For more info on font stacks visit the typography page above and scroll down for the font stack links.

/*for the paragraphs */
body{
    font-family:"Verdana", Tahoma, sans-serif;
} 

/* for the titles */
h1, h2, h3, h4, h5, h6{
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight:300;
}

Careful readers may have noticed that I said the font was Helvetica Neue Light and only wrote Helvetica Neue in the font-family. It’s too long to explain here but basically the font-weight makes it light. Read this page for some more info about that, link_to_page. Notice that we haven’t specified any of the colors or font sizes for the various h2 and h3 elements. We can do that now and make it more specific (for the colors at least) by the section in which each title lives.

First we’ll map out what we want our fonts to be, here we just write out what we’ve used so far but a style guide would include all possibilities.:

h2= 18px
h3:=14px
p = 11px

Now lets add the CSS for that.


/*for the paragraphs */
body{
font-family:"Verdana", Tahoma, sans-serif;
font-size:11px;
}

/* for the titles */
h1, h2, h3, h4, h5, h6{
font-family:"Helvetica Neue", Helvetica, Arial, serif;
font-weight:300;
}

h2{
font-size:18px;
}

h3{
font-size:14px;
}

Here’s how it looks so far.

You may have noticed that we haven’t styled the p element yet. That is because the body element is the parent (it contains) all of the other elements. So the p will inherit from the body.

The next thing we’ll do is to add the various colors and background colors for the sections and their titles.

Categories, Favorite Links, Recent Posts titles= #6aad2d (green)

Side_nav background color = #e3daeb (light purple)

Article Titles, about me title = #976dc4 (purple), font-weight=bold

Recent Portfolio Additions titles = #ffffff (white)

Recent Portfolio Additions background = #a186be (dark purple)

About Me background = #eeffce (light green)

Here is the CSS:


/* Categories, Favorite Links, Recent Posts titles= #6aad2d (green) */
#categories h2, #favorites h2, #recent_posts h2{
	color: #6aad2d;
}

/* Side_nav background color = #e3daeb (light purple) */
#side_nav{
	background-color:#e3daeb;
	width:120px;
	margin-right:8px;
	float:left;
}

/* Article Titles, about me title = #976dc4 (purple) */
.article h3{
	color: #976dc4;
	font-weight:normal;
} 

#aboutme h2{
	color: #976dc4;
}

/*Recent Portfolio Additions titles = #ffffff (white)*/
#recent_portfolio h2{
	color: #ffffff;
}
/*Recent Portfolio Additions background = #a186be (dark purple)*/
#recent_portfolio{
	background-color: #a186be;
}

/*About Me background = #eeffce (light green)*/
#aboutme{
	background-color: #eeffce;
}

#aboutme h2{
	color: #976dc4;
}

Next we need to deal with the lists (removing the bullets) and general spacing issues. Before we do anything we’re going to reset the margins and padding for the page. Browsers add different amounts of margin and padding to various block elements. We’re going to reset those so we can add it ourselves. There are some who advocate reset stylesheets that go futher than this and reset font-size, cellspacing, borders and more. We’re going to keep it simple and just reset the margins and padding with this css. Place it before any other styles:

* { margin: 0; padding: 0; }

Here’s what it looks like after that:

Now we will add back in the padding and margins we need (by the way some margins were already added with the CSS for the layout; that is why we put the reset before the other styles, so we don’t erase them).

Margins for the tops of the first sub sections in each column
.article{
margin-top: 10px;
}
#categories{
margin-top:10px;
}
#recent_portfolio{
margin-top:10px;
}

Get rid of the bullets in the lists
/*remove bullets from lists and give spacing*/
#categories li, #favorites li, #recent_posts li, #nav li{
list-style-type:none;
}

And add some spacing between them (we will deal with the nav on another page):
#categories li, #favorites li{
margin-bottom:8px;
}
#recent_posts li{
margin-bottom: 10px;
}

We want to move the categories and favorites away from the edges of the column a bit (padding) and separate them from each other (bottom-margin on categories
#categories{
margin-top:10px;
margin-bottom:20px;
padding: 0 5px; /*when you just use two numbers the first is for the top and bottm and the second is for left and right */
}
#favorites{
padding: 0 5px; /*when you just use two numbers the first is for the top and bottm and the second is for left and right */
}

Give some bottom margin for the paragraphs (to add spacing between them).

p{
margin-bottom:1em;
}

Change the font-size for the article_info (the text with the date and number of comments under the article) to 9px.
.article_info{
font-size:9px;
}

And change the footer to size the font and set the padding
#footer p{
font-size:10px;
line-height:20px; /*setting the line-height to the same height as the footer centers the text vertically */
padding:0 5px;
}

And here is the result of all of that:

And that’s it for now. We will leave the navigation and slicing the image for the design to other pages.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>