In this lab, we'll explore using CSS to change the way that HTML content is presented. You will make two copies of the HTML page you created and link a different style sheet to each one. The goal is to make the two pages look very different from each other by changing the CSS rather than the HTML.

A style sheet is just a text file, .css by convention. Assume you have a stylesheet named style.css in the same directory as an HTML page. You would apply the sheet to that page with a link tag inside the head element:

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

Style sheets contain rules that apply style attributes to certain groups of elements on the page. The selector you use in a rule determines which elements. For example:

h1 { color : #28437b }

#pics {
    background-color:lightgray;
    width:400px;
    border-style:groove;
    border-width:10px;
}

.hot { color: #ff2244; }

Stylin'

Your job is to style the web page you brought to class with you today. Remember, the HTML shouldn't have any presentation-specific information in it. Colors, fonts, positions, etc. The HTML should have only content and structure.

Make two copies of the page, with the exact same HTML. Create a blank stylesheet for each of the copies, put them in the same directory with your HTML files, and link them as described above. Start adding style rules to make the pages look more interesting. See how different you can make the two pages look with the same HTML. Feel free to alter your html (both copies!) to add more structure, like say wrapping things in a div, but remember, no mixing in presentation elements in the HTML. For those of you with experience, no, you can't use an external library. Just vanilla CSS.

Beside the slides from today, you might also want to look things up:

• Use Google to find particular CSS tags! Most searches will get you to...
• The excellent CSS Reference @ w3schools.
• The CSS Tutorial @ w3schools is there too, if you want more information.

I want to see:

• Use of different selectors: tag, class and id
• Font styles (color, size, decoration, etc)
• Using backgrounds and borders to create distinct sections
• Changing the position of things on the page (Check out the position, float and margin attributes).
• Table styling to make it look interesting
• Making links look/behave differently (e.g. on mouse over, on click, when visited)

Submitting Your Work

In this class, all work will be sumitted by pushing using Git. We'll go over in lab how to do that for the first few weeks until everyone is comfortable with the tool.

Class notes on Git

• Always push whatever you worked on in lab! This is how you get participation credit for that.
• Commit whenever you finish a feature, and push whenever you are done for the day.
• Whatever it pushed to GitHub at the deadline is your submission!

URL for this lab: https://classroom.github.com/a/fBqHQjm5