Exercise Sheet for the introduction to css class
Slides
- Navigate to the CSS Zen Garden website.
- On the right hand side of the page, select Make 'em Proud. Notice how the list of designs is now on the left side of the page! CSS did that.
- On the left hand side of the page, select A Robot Named Jimmy. Notice how the list of designs is at the bottom of the page.
- Play around with the different themes and notice how the colors, headings, and elements rearrange themselves on the page.
- On the right hand side of this screen, you'll see a button that says Download ZIP. Click it!
- Unzip the folder and open the index.html file in a text editor like Notepad.
- Open the style.css file in a text editor as well.
or
- Wherever you saved the index.html file you worked on last time, open it in a text editor.
- Create a file titled style.css in the same folder.
Why didn't we do this for you? Because it's fun to do it yourself!
In your index.html file look for the <head> element. It looks like this:
<head>
<title>Hello World</title>
</head>Insert the following snippet underneath the <title> element:
<link rel="stylesheet" type="text/css" href="style.css"> This tells the browser "When you display this page, please follow the rules in this file for styling."
In your style.css file:
Change the background color for the body element.
body {
background-color: green;
}Change the background color for a paragraph.
p {
background-color: orange;
}Change the text color of an element. Example:
p {
background-color: orange;
color: white;
}In your index.html file:
Add a class to several html elements. Here's an example that adds two classes:
<p class="tanya">How was your day?</p>
<p class="adele">It was fine thanks.</p>
<p class="tanya">Was it really fine?</p>Add an id to an html element. Here's an example:
<p id="jess">Hey ya'll, what are you talking about?</p>In your style.css file:
Add a selector for a class and change the text color. A class selector is indicated by the . in front of the word. Here's an example:
.tanya {
color: green;
background-color: silver;
}
.adele {
color: white;
background-color: maroon
}Add a selector for an id and change the text color. An id selector is indicated by the # in front of the word. Here's an example:
#jess {
color: red;
} - Play around with other css properties. See a list of them at the Mozilla Developer's Network.
- Sign up for Code academy and take the web Fundamentals class!
Code Academy