5th Grade, McCrae, 03-23 – Web Design 6: Color

Grading Rubric:

4 Pts	A text file named "style.css" is handed in.
3 Pts	The text file includes the starter code provided during the lesson.
3 Pts	The text file modifies the color choices to make the web page look nicer.

We're going to continue with the work we did during the previous classes, spending some time adding to it.
1. We're still doing work that's taught to 8th grade, but we are going at a slower pace than what is expected for them.
2. This is one of those lessons where the video tutorial is super important. If you aren't in class, you NEED to watch it.
We'll begin by opening a basic text editor.
1. On the Windows computers in the lab, that's Notepad.
2. If you're doing this on a Mac at home, that's TextEdit.
3. Mr. Smith likes using Linux, he'll be using a program literally called "Text Editor."
4. Mr. Smith's 8th graders use a fancier program called "VS Codium," which you're also allowed to use, but this is far from a requirement.
5. (Even Chromebooks have text editors, though Mr. Smith doesn't use those.)
Find and open your index.html file in your Documents folder. (Remember that we backed our work up to Google Drive last class, your work should be there if you're working from home.

We're going to make a NEW text file and save it in the same folder as your index.html file. This new file should be called style.css.

We're going to start off adding this code to the style.css document you've just created. Once you've done that, save your work and reload your index.html page in your web browser.

body {
background-color: #ffffff;
color: #000000;
}p {
color: #000000;
}
strong {
color: #000000;
}

em {
color: #000000;
}

h1 {
color: #000000;
}

h2 {
color: #000000;
}

h3 {
color: #000000;
}

a:link {
color: #000000;

}

a:visited {
color: #00ff00;

}

a:hover {
color: #ff0000;

}

a:active {
color: #0000ff;

}

Each color in this CSS file is shown with what's called a "Hex Code." (It's called "hex" because it has 6 characters.)
These are hard to memorize, but fortunately we don't have to. A lot of tools we've used before have Hex code built into their color pickers!
Change the color choices to make your website look nicer. ("Nice" is an opinion, so long as you change colors and I can still read your website you should be good.)

If you break something, CTRL-Z is useful! If you need to start over, the starting code is right there to copy.
Go to Canvas to hand in your css!

This is an IN-CLASS assignment, NOT HOMEWORK. There are no extended deadlines for the remainder of this Quarter!