2-CSS Body and Header

Video

Steps

1. Let's start adding some CSS for styling. Start with the overall body:

   /*Common elements*/
   body {
        font-size: 67.5%;
        font-family: Tahoma, Geneva, sans-serif;
        background: #39150C url(img/paper_1332008.jpg) no-repeat fixed top center;
        padding: 0;
        margin: 0;
        -webkit-background-size: 100% 100%;
        -moz-background-size: 100% 100%;
        background-size: 100% 100%;
        -o-background-size: 100% 100%;
   }

2. If you run the app, it will look like this:

   

3. A lot of the above CSS is self-explanatory. But there are some things in there that might seem odd. What are those things? What should you go and research here?

4. After you've done a little discussion on the additions, let's add some more CSS for our common elements:

   h1 {
        color: #2BA967;
        font-size: 2.0em;
        margin: 0.5em 0 0.5em 0;
        padding: 0;
   }
   h2 {
        color: #745b2f;
        font-size: 1.7em;
        padding: 0px;
        margin: 0.5em 0 0.35em 0;
   }
   p {
        font-size: 1.2em;
        line-height: 1.4em;
        color: #555;
        padding: 0px;
        margin: 0px 0.5em 0.75em 0px;
   }

5. When you run the app, you should see changes to basic elements:

   

6. If you want to know what something is doing, remember that you can go and inspect your code in the browser window. For instance, let's say we wanted to figure out what the margin for the <h1> is doing. We can simply right click on it and inspect it, changing the margins to different sizes:

   

7. There are a few shortcuts to open up Chrome tools and inspect everything: ctrl+shift+i, ctrl+shift+c, or fn+f12

8. To learn what's happening, change the margin values and see what happens.

9. Try this for other elements.

10. Let's add a few more items here.

    ol {
        font-size: 1.2em;
        margin: 0 0 0 1.0em;
        padding: 0 0 0 1.0em;
    }
    ol li {
        margin: 0;
        padding: 0 0 0.2em;
    }
    a, a:visited {
        color: #C64322;
    }
    a:hover {
        color: #333;
    }
    hr {
        padding: 0;
        margin: 1.5em 1.5em 0.75em 0.5em;
    }

11. Again, go ahead and investigate the changes that we made here using Chrome tools. Play with each one of these to get an idea of what is being targeted and how it is changing.

12. Here are a few things that we'll add now but use later:

    .contentWrapper {
        margin: 0 auto;
        max-width: 1170px;
        padding: 0 3.0em;
    }
    .left {
        float: left;
    }
    .right {
        float: right;
    }
    /*Header*/

13. Let's add the code for the Header. Note that the end comment on line 74 is not shown in this screenshot:

    header {
    padding: 2.5em 0 0.5em;
    margin: 0 0 2.0em;
    background: #39150C url(img/bg_cheeses_lg_2600w.jpg) center 0px;
    }
    header h1 {
    font-family: "Times New Roman", Times, serif;
    color: #745b2f;
    font-size: 7.5em;
    letter-spacing: -0.025em;
    margin: 0;    
    /*text-shadow: 1px 2px 0 #bd8437;  offset-x | offset-y | blur-radius | color */
    }
    header h2 {
    font-weight: 300;
    font-size: 3.8em;
    color: #2BA967;
    margin: -0.4em 0 0 1.0em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    }

14. What happens if we play around with the text-shadow on line 74?

15. Notice the word Fromage? Any different?

16. This is just an example of how we can add embellishments to various specific elements.

17. Let's move on to the next section and work on the navbar.