Right now your HTML file is telling the browser what each piece of your content might be.. a link, a paragraph, an image. But it probably doesn't look pretty and longer content blocks happily spread out over the width of the browser.

The next step is to position and style our HTML content using a Cascading Style Sheet or CSS. Styles we write in CSS hook into the HTML document through the HTML tags. Notice the h1's match. This example style would turn all top-level headers in our site red.


HTML: (styling everything in an HTML tag)
<h1>The Chicago Dog</h1>

CSS:
h1 { 
    color: red;
}

HTML: (styling everything in an HTML tag marked with a specific class - reusable for any element)
<p class=“alert”>Going out of business!</p>

CSS: (the dot indicates a class)
.red { 
    color: red;
}

HTML: (styling everything in an HTML tag marked with a specific id - unique to page)
<article class=“hot-dog”> . . . </article>

CSS:
#hot-dog { 
    background-color: red;
}

Create a blank stylesheet called styles.css, then add a link from the HTML to the CSS.

By keeping our styles in a separate file, shared by any other pages we have in our site, we can dramatically change or update the look and feel without modifying the content at all. And as you can imagine, this will save us time when we have 100 pages and declare all headlines shall now be purple!

FYI: You might also consider updating your description at this time, if you haven't done so already. This is what appears under your listing in search engine results.

<head>
    <title>The Chicago Dog</title>
    <meta charset="utf-8">
    <meta name="description" content="This 50-60 character description is what will appear under your link in search engines.">

<!-- Stylesheets -->
    <link href="css/reset.css" rel="stylesheet" type="text/css">
    <link href="css/styles.css" rel="stylesheet" type="text/css" media="all">
</head>

B. Testing and planning your project

Do a test to make sure your HTML and CSS are linked, and plan out the next steps

/* 
    The Chicago Dog Tutorial
    ONA 2014
*/

body {
    background-color: #880000;
}

Add comments to plan out our styles

Next we want to add a styles to-do list using the CSS comment (slash-star ... star-slash) underneath our documentation comment and body background color.

TIP: To quickly add or remove a comment, make a selection and hit COMMAND-/ to toggle a comment on and off. This works in your HTML file as well.

This helps us plan our work, but also keeps our styles in order from most top to bottom, from general to most specific. General styles at the top may be overwritten by more specific styles later on — thus the "cascading" part of Cascading Style Sheets.

/*
    TYPOGRAPHY
    http://type-scale.com/
*/



/* 
    HEADER
*/



/*
    MAIN / ARTICLE / ASIDE
*/



/*
    FOOTER
*/



/*
    MEDIA QUERIES
*/

C. Add structural styles

Let's add in these structural styles in a couple of pieces. Save and refresh after each so you can see the progress.

1. Replace the body { } we used as a test with the following code:

* {
   -moz-box-sizing:    border-box;
   -webkit-box-sizing: border-box; 
    box-sizing:        border-box; 
}

body {
    background-color: #880000;
    background: url(../images/chicago-skyline.jpg) repeat-x center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#container {    
    width: 960px;
    margin: 0 auto;
}

Whoa! Cool! But uh, are we supposed to read that text? Carry on...

2. Add styling for the header.

/* 
    HEADER
*/

header {
    background-color: rgba(255,255,255,0.3);
}

header img {
    display: block;
    padding: 40px;
    margin: 0 auto;
}

Pretty! Let's do some more.

3. Add styling for the main section, which contains all of our <article> and <aside> sections.

/*
    MAIN / ARTICLE / ASIDE
*/

main {
    background: #fcfaf2;
}

article {
    padding: 4.0em 8.0em 1.0em;

}

aside {
    background: #dcd5c2;
    padding: 4.0em 8.0em;
}

Not bad! Now we can read the text.

/*
    FOOTER
*/

footer {
    background-color: rgba(255,255,255,0.3);
    height: 200px;
}

Hey! It's starting to look like a real site!



Step 3A | Step 3B | Step 3C


Step Four: Typography & Images   ➳

0 | 1 | 2 | 3 | 4 | 5-6 | 7-8