Signed in as
This is really the first lesson wherein a problem-solving mindset is valuable. As you can see in the notes below, students will have some bumps in the road during this lesson. Your guidance in helping them understand how to work through problems will set the tone for the remainder of this bug-filled course.
HTML, arguably, is easier than CSS. When you have your syntax written correctly, things just appear on the page. CSS can be frustrating and students will start to encounter their first real points of friction here. Help them learn how to debug by talking through what they think their code is doing vs. what it actually is doing.
Our big focus on CSS is helping students understand how to select and apply style rules to elements. This is going to take some practice by you, and a bit of riffing since everyone's classroom is different, but you're looking to replicate and repeat - several times - a process like this:
Like our previous lesson, walk students through importing and writing CSS in their project. Give them time to start developing their own classes and selectors to begin styling the appearance of their site. Our next lesson will focus on creating a layout; this may frustrate them, but encourage them to focus on the type, colors, and feel of the site.
Take the formative assessment at the end of class. Work towards mastery.
If you've reached this lesson, hopefully your site's HTML is fully scaffolded out. If so, congrats! If not, head back to the previous lesson for help and make sure you have a relatively complete skeleton for your site. Why? We're going to be learning how to style and arrange our content; without content, it's going to be hard to get things how you'd like.
As we learned earlier, there are several ways of getting CSS into our page.
<link> tag in our <head> element that has an attribute of <href> (hypertext reference) set equal to the path of our CSS file.style attribute on any HTML element.<style> block on our page that contains a list of rules specific to this HTML page.1<html> 2 <head> 3 <title>Hello, World!</title> 4 <!-- We can import CSS --> 5 <link rel="stylesheet" href="style.css" /> 6 </head> 7 <body> 8 <!-- We can write styles directly inline --> 9 <h1 style="color: blue">Hello, World!</h1> 10 </body> 11 <style> 12 /* We can write styles inside a style tag */ 13 </style> 14</html>
For the purposes of this project, we'll use our first option by importing a dedicated CSS file that will house all our style rules.
We covered selectors briefly in an earlier module. For this lesson, we'll work through ways of selecting types and creating classes. We'll even go for some less common, more specific strategies at the end.
From our second module, we learned that type selectors refer to types of elements. These are the 'built-in' HTML tags. Below, you'll see a series of colors assigned to the backgrounds and texts of different HTML elements.
1/* Applied to all elements in the <body> */ 2body { 3 color: white; /* text */ 4 background-color: rgba(3, 5, 24, 0.87); /* background */ 5} 6 7/* All <h1> elements will get these styles */ 8/* Since this is more narrow in scope, these rules will override the ones applied to the <body> */ 9h1 { 10 color: green; 11 background-color: grey; 12}
We also learned that HTML allows us to add classes to our HTML elements. This is handy because it enables us to differentiate between different 'components' on a page. While <div> is a super common tag, we could make a <div> with a class of something more specific. For example:
1<div class="scoreCard"> 2 <div class="teamInfo"> 3 <h2>Team One: 12 points</h2> 4 <h2>Team Two: 10 points</h2> 5 </div> 6 <div class="question"> 7 <h3>Question #6</h3> 8 <p>A really difficult trivia question?</p> 9 </div> 10</div>
With three different classes above, we can write specific rules for each class. For syntax, class selectors are prefixed with a period to denote we're writing rules for a class.
1.scoreCard { 2 padding: 40px 20px; 3 border: solid 1px black; 4 border-radius: 13px; 5} 6 7.teamInfo { 8 width: 100%; 9 height: 5vh; 10} 11 12.question { 13 padding-top: 50px; 14 text-align: center; 15}
We can even combine class selectors with type selectors to get super-specific on our elements. Let's say we wanted special rules for our <h3> element inside of the question class, we could simply write:
1.quetsion h3 { 2 color: tomato; /* Yes, real color!*/ 3}
CSS allows us to be super specific and select only certain children via a selector. All HTML is organized in a nested fashion where certain elements are considered parents; those parents have child elements. Elements can be siblings of each other inside a parent element.
So, let's say we have a ordered list of runners on a score table. What if we want the first runner to have their name in green to signify they're first?
1<ol class="runners_list"> 2 <li>Lisa</li> 3 <li>Bart</li> 4 <li>Homer</li> 5</ol>
We'll use the class selector to grab the <ol> of runners_list and then select only the first child using something called a pseudo-class.
1.runners_list :first-child { 2 color: green; 3}
What if we want Homer to feel bad and have his text read red?
1.runners_list :last-child { 2 color: red; 3}
Pseudo-classes are great in that they focus on a special type of state, or condition of an element. These will be really handy when we start to see how we can affect the rendering and styling of elements based on certain events.
Client site: Style