Cascading Style Sheets
- Treehouse > Customizing Colors and Fonts: Watch all videos and complete all exercises.
In the earliest days of the World Wide Web, there were just documents. The Web was intended to share research documents, and so things that we see now like dynamic applications, beautiful layouts and colors, and cool animations were not even thought of.
Then, companies started to see a glimmer of promise for making money on the Web, so they started sharing their documents. Plain, boring text didn't cut it, so the W3C (World Wide Web Consortium) released CSS1 in 1996 so that professional web page developers - there weren't that many yet - could create more stylized documents with complex layouts and color schemes.
Instructor Suggestion: Have students open up their HTML101 blog Codepen and start adding CSS to that project.
- Show how to select elements by class, and by id.
- Show how to select child, descendant, and sibling elements.
- Show how to use the color and background-color properties.
- Change the default font of the body.
- Make different elements have different font faces.
- Give examples of left, center, and right aligned text.
- Float left, and right. Show how it affect the layout.
- Show usage of
clear: both
to ensure page flow reverts back to standard after a floating element.
- Thickness & color.
- Type (solid, dotted, dashed).
- Show how to do rounded corners with
border-radius
.
Instructor Suggestion: Break now for a class exercise (shown below). Have students open up their profile on Codepen and add a navigation bar to their profile.
Show students how to convert a standard <ul>
element into a usable navigation section at the top of the page.
.nav {
background-color: goldenrod;
height: 30px;
}
.nav > li {
float: left;
list-style-type: none;
margin: 5px 15px 0 15px;
font-family: "Arial";
cursor: pointer;
}
.nav > li:hover {
color: white;
}
With some of the new HTML5 input types, specifically the url
and email
types, the specification required that browsers provide the ability to write CSS pseudo classes that allows developers to style the inputs based on the default validation rules.
<form>
<div>
<label>Enter a URL:</label>
<input type="url" />
</div>
<div>
<label>Enter an email address:</label>
<input type="email" required/>
</div>
</form>
input:valid {
background-color: #ddffdd;
}
input:invalid {
background-color: #ffdddd;
}
- Treehouse > Styling Web Pages and Navigation: Watch all videos and complete all exercises.
- Treehouse > Console Foundations > Getting Started with the Console: Finish all 12 sections.
- A cool CSS game
- Generate and use a cool tooltip. Visit the CSS Tooltip Generator and create the CSS you need. Then, see if you can get a tooltip to display when you hover a link in your profile page.
- Create awesome buttons. Visit the CSS3 Button Generator and make buttons for your navigation instead of links.
- Try some layout challenges. Visit the Wikiversity CSS Challenges page and try to complete as many as you can.
Create a navigation bar out of an unordered list element, and add the following interactivity.
- When the user hovers over one of the links, the color of the text should change.
- When the user hovers over one of the links, the background color of the element that contains the link should change.
- When the user clicks on one of the links, the element that contains the link should grow in size by 5px on the left and right.
You will learn more about how to do this in CSS102, but if you want a challenge now, create a web page that has a navigation bar and plenty of articles so that the content goes well below the fold (fancy term for the amount of real estate that exists when the user first loads the page).
When the user scrolls now to read the rest of the content, the navigation bar should remain at the top of the page, always visible, no matter how far down the user scrolls.