COM372-14 : Web Design and Development

Styling & Color

Lesson Number 11, September 19, 2014

Due For This Class

Lesson Breakdown

  1. What colors did you choose for your website? Why?
  2. Adding color to your website.
  3. Using color to help create a visual heirarchy / create calls to action
  4. Color has meaning - we all know what the colors in this graphic represent ... so, what do you think happened when a Papa John's used colors in an unexpected way?
  5. Discovering layout

Cool Color Tools

There are so many great tools for playing with color online, choosing color schemes, and just generally discovering color.

  • Colour Co (this is really awesome - allows you to see color schemes directly in your browser)
  • What the Hex (I am horribly bad at this game)
  • Color Hex (insert a hex code and learn all kinds of info about it)
  • 0 to 255 (pick a color and get a range of that color shaded from lightest to darkest)
  • Hex Clock

In-Class Activity

  1. Open your project-portfolio in Brackets. We will be editing your index.html file, so double-click to open that and edit it.
  2. Create a new folder in your project and name it css. Create a new file in this folder, and name it style.css.

  3. Link your style.css file to your index.html file.

    How?

    Place the following code in the head of your document

    <link rel="stylesheet" href="css/style.css">

  4. Open your style.css file.

  5. Create a comment at the top of your CSS file. Write your name, and then put the hex codes for your three colors in the comment (this will help you to reference them later).

    How?

    Remember, the comment structure for CSS is as follows:

    /* 
Start your comment with a backslash followed by a star.
End your comment with a star followed by a backslash.
Everything between is your comment!
*/

  6. Choose one of your colors, preferably one that is highly saturated.

  7. Using CSS, set this to be the color of all your links and h1's. You want to write these styles in your CSS file.

    How?

    In this example, we are using #990000 as our color. You would use your own color code!

    a{
color: #990000;
}
h1{
color: #990000;
}

    We are using a and h1 as our selectors, because we want to apply the styling to all elements on the page that match those selectors.

  8. Add another CSS rule, this time using h2 as your selector. Set the color of the h2 to one of your other colors.

  9. Let's make sure that our index.html has markup that will match our styling. Edit your index.html. At the beginning of the file, directly after your <body> tag, create a h1 and make sure that it has your name and "Project Portfolio".

  10. Create an h2 under that and make the content "Classwork and Projects for COM372"

  11. Add a paragraph of text under that. Write whatever you want. You can search google for Random Text and get a block of random text.

    Your index.html should now have at least the following content.

    <!DOCTYPE html>
<html>
<head>
<title>MYNAME Project Portfolio</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>MYNAME's Project Portfolio</h1>
<h2>Classwork and Projects for COM372</h2>
<p>A paragraph of random text</p>
..... <!-- you shouldn't have dots here, this is just a note to show the page goes on-->
</body>
</html>

  12. Under the paragraph, create a three new paragraphs. As the content for each one, write your hex codes for your colors. You can add descriptions to your colors 

    <p>A paragraph of random text</p>
<p>Red - #990000</p>
<p>Purple - #3D2040</p>
<p>Yellow - #FFCF40</p>

  13. Surround each of the three paragraphs with a <div>. 

    <div><p>Red - #990000</p></div>
<div><p>Purple - #3D2040</p></div>
<div><p>Yellow - #FFCF40</p></div>

  14. Create styles for your divs. We want to make them squares and give them background colors. In your style.css, write the following styles. Instead of using the sample background color, use one of your colors! 

    div{
width: 200px;
height: 200px;
background-color: #990000;
}

  15. Save your index.html and your style.css, and open your index.html using livepreview. You should see that your divs have changed - they will all have the same background color!

  16. We don't want all our divs to have the SAME background color, we want them to have background colors that represent our color scheme. Let's use classes to help us accomplish this.

  17. Edit your index.html. Add classes to each of your divs. The classes should be: color1, color2, color3. 

    <div class="color1"><p>Red - #990000</p></div>
<div class="color2"><p>Purple - #3D2040</p></div>
<div class="color3"><p>Yellow - #FFCF40</p></div>

  18. We want to change our selector in CSS to apply to these classes instead of to the element div. Edit your CSS rule to have .color1 as the selector instead of div. 

    .color1{
width: 200px;
height: 200px;
background-color: #990000;
}

  19. Save your index.html and your style.css, and open your index.html using livepreview. You should see that your divs have changed - only the first one is styled now!

  20. We will need to repeat our styling so that it can be applied to the other divs.

  21. Copy your rule set (from the . that starts the selector all the way through the closing }) and paste it into your CSS twice. You should now have three rulesets, all with the selector .color1. Change the second selector to .color2 and the third selector to .color3. Then, take your two other colors and use them for the background color for the two new rulesets. 

    .color1{
width: 200px;
height: 200px;
background-color: #990000;
}
.color2{
width: 200px;
height: 200px;
background-color: #3D2040;
}
.color3{
width: 200px;
height: 200px;
background-color: #FFCF40;
}

Homework