Introduction to CSS

Tue, Feb 04, 2020

Lesson: Style a basic web page using CSS

This page describes the in-class assignment for the second class. Your assignment is to add some CSS to the basic web page you created in the first class.

This is how the page will look at the end of the lesson:

Finished page example

Start with a basic HTML page

Use the index.html page from the previous lesson as a starting point. We will make one small change to your file: Just after the opening <body> tag, we will add a <div id="container"> tag, which will wrap your entire page. Just before the closing </body> tag, add a closing </div> tag as well.

If you’re uncertain if your project from the previous lesson is correct and want to start fresh, below is a boilerplate HTML page from last class. You can use this as a starting point instead, if you wish.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>My First Webpage</title>
        <meta name="description" content="An example web page built in Web Skills class">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <div id="container">
            <header>
                <h1>Jeremy Rue</h1>
                <h2>My first web page</h2>
            </header>
            <nav>
                <ul>
                    <li>Home</li>
                    <li>Blog</li>
                    <li>Portfolio</li>
                    <li>Contact</li>
                </ul>
            </nav>
            <article>
                <h2>Photos from my last vacation</h2>
                <img src="http://s23.postimg.org/83dry9qhn/flower.jpg" alt="Flower">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p class="quote">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </article>
            <article>
                <h2>Photos from my last vacation</h2>
                <img id="flower" src="http://s23.postimg.org/83dry9qhn/flower.jpg" alt="Flower">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p class="quote">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </article>
        </div>
    </body>
</html>

Add <style> tags to the head for including CSS code

CSS code goes between the opening and closing <style> tags in the <head> of the document.

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>My First Webpage</title>
    <meta name="description" content="An example web page built in Web Skills class">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <style>


    </style>
    
</head>

Notice the addition of the style tags above. Make sure to add these to your own page in the appropriate place in the <head> of your document.

Adding some body styles

Styles that affect the body tag of your HTML document are considered baseline styles. Since your entire page is within the <body> tag, they will affect everything!

We will first change the font to Garamond, creating a fallback to Georgia, then any serif font. Let’s also set the background color.

body{
    background-color: #4A547F;
    font-family: Garamond, Georgia, serif;
}

The above code goes inside your style tags.

Adding some styles to the container ID

We created a <div id="container"> tag to your page earlier. That ID is accessible in CSS by using the pound symbol #container. This gives us the ability to style this tag specifically, and differentiate it from other div tags.

The styles we will add are background color to a whiter color, adding some padding and setting a defined width. By setting the left and right margins to “auto,” we create an effect of centering this div tag.

#container{
    background-color: #eeeeee;
    padding: 10px;
    width: 500px;
    margin-left: auto;
    margin-right: auto;
    border: 1px dotted black;
}

Add the following CSS rule after the body rule. Careful not to place one inside the other.

Styling the header tags

For the main heading, we will make the font size larger than the default by changing it to 60 pixels. We also want to center the text, and remove the default margins.

h1{
    font-size: 60px;
    text-align: center;
    margin: 0;
}

h2{
    text-align: center;
    margin-top: 0;
}

Styling the unordered list for navigation

We are using an unordered list for our navigation, denoted by a <ul> tag. Let’s center the contents of the tag, add a background color and 10 pixels of padding.

For the <li> tag, we will display in inline which means we want it to run on like text, instead of each element being on its own line. This will cause each list item to appear side-by-side.

ul{
    text-align: center;
    background-color: #939CBF;
    padding: 10px;
}

li{
    display: inline;
    padding: 10px;
}

Another thing we can do is change the background color whenever the user move the mouse over this <li> tag by using the :hover pseudo-selector. The :hover means this style will only be applied when the user moves the mouse over the li tag.

li:hover{
    background-color: white;
    cursor: pointer;
}

Styling the block quote

To make the two block quotes stand out, and indicate visually they are from another source, we will style them using the class selector .quote.

.quote{
    margin: 30px;
    font-style: italic;
    font-family: Helvetica, Arial, serif;
    line-height: 20px;
    color: #999999;
}

Resizing the image

If you want to resize the image, you can do that in CSS as well. We can set width and height properties after referencing the image like so width:300px. But we’ll set the width to 100% so that it consumes the entire space it’s given. This will also make it more responsive. There is a special value of auto that we can set on the height. Auto simply means the height should automatically be set at the appropriate ratio given the width the image has.

img{
    width: 100%;
    height: auto;
}

Centering an image

If you ever want to center an image, you have to change its display property to block first. This means the image won’t be inline like text, and that you can apply both margin-left and margin-right values to the image.

/* center an image */
img{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Next, add some of your own styles. It’s important to experiment.

HOMEWORK ASSIGNMENT

You can turn this in on bcourses.

Step 1:

Log into your Github account if you haven’t done so already. Then click the following link to accept the assignment: https://classroom.github.com/a/X2NHENr2.

Step 2:

Open up Github Desktop, and clone the CSS-Part-1 repository. Make sure to save it in the j220_coding folder that should already be on your desktop.

Step 3:

On a Mac, you can right-click (or control + click) on the folder you cloned and select New Terminal at Folder option from the context menu.

Alternatively, you can open the Terminal program on your computer and type cd ~/Desktop/j200_coding/. The type ls to see a list of folders, and then cd [name of folder] without brackets.

Step 4:

Run the following command from your Terminal:

npm install

This will install dependencies into this folder only in order to make this website run.

Step 5:

Open the project folder in Sublime Text 3. One easier way to do this is to type subl .

(NOTE: In order for the above command to work, you’ll need one setup step, which is to run the command below. You only need to do this once to set it up.)

ln -s "/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl" /usr/local/bin/subl

Step 6:

Run the following command from your Terminal:

grunt

This will launch a mini webserver on your computer. You can open the URL in your browser.