Signed in as
It's a common misconception that the majority of code written on any given site is HTML. In reality, HTML comprises the skeleton of the site, but there's typically a lot of CSS to help style things. The key-value pairs take up space and can create some really large style sheets. Help students to understand the importance of CSS in giving them - and their users - the experience they're looking for.
Students - and all people - easily get it in their heads that certain people aren't born with design genes. Design is a skill; and, like any skill, it can be learned! Patience and persistence is key.
Have students think of any sports team at your school. Ask them to imagine that team lining up to compete against another school's team. Chances are, their uniforms are fundamentally the same: soccer players are going to wear shorts, long socks, and a shirt. However, there are differences between each team. Have them categorize what characteristics can be different from team to team. Discuss as a class. The goal is to lead them to understanding that all HTML is fundamentally the same: just a composition of elements. However, individual styling with CSS is what creates unique layouts and appearances.
Lead them through the content of the lesson. Have them work on the activity with any time remaining after you introduce the concepts. Circulate the room to help students.
Take the formative assessment and work towards mastery.
To continue with our theme from the previous lesson, this is not an in-depth dive on how to utilize CSS in an efficient way. More than anything, we're hoping to understand the basics and - as with HTML - get a better grasp on the syntax of CSS.
CSS stands for cascading style sheets. The term cascading refers to the fact that CSS is arranged in a way that different sets of rules build on previous stages.
Scope is an important concept in CSS. We'll dive into this idea more in a few weeks, but we can set style rules that are very broad - such as that they apply to everything rendered by the browser - or very narrow - such as only elements that meet specific conditions utilize those styles.
More than anything, CSS allows us to make our pages look...not like total crap.
At its most basic level, CSS works using a syntax of key-value pairs nested within a selector.
The selector tells the browser which elements should receive the rules written inside of it; the rules are defined by taking a property of the element, and assigning it a value.
So you have an idea of how this lesson is organized, we'll look at a couple of different methods of using selectors to assign style rules to elements.
The example below isn't real, but is a way of keeping the formula in your head.
1/* This is a comment in CSS */ 2/* Below you'll find the key-value pair format with selectors */ 3selector { 4 key: value; 5}
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>
Type selectors refer to types of elements. These are the 'built-in' HTML tags that we learned about in the last lesson. 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}
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.question h3 { 2 color: tomato; /* Yes, real color!*/ 3}
There are many other ways of selecting elements. CSS is built to allow us to be incredibly specific or very general with our style rules. We'll spend more time in a few weeks learning how to combine different key-value pairs to create some really great, responsive layouts. In our final lesson of this unit, we'll learn how we can interact with the DOM and manipulate content.
Basic CSS