Learning Goals

• Implement clean and consistent CSS syntax
• Use Chrome Dev Tools to debug CSS
• Demonstrate understanding of the box model by recreating small comps

Pre-Work

Read through Intro to CSS Pre-Work document and all links provided and complete exercises provided in it. Be prepared to demonstrate your understanding of the concepts in that document when you come to this class.

Vocabulary

• CSS Cascading Style Sheets
• HTML element A building block that makes up the structure of a web page
• id / class attributes on HTML elements that allow us to identify HTML elements in our CSS
• property (CSS property) The name of a style property of an HTML element (e.g., color, border)
• value The value that is paired with a given style property
• declaration A property/value pair within a CSS rule
• declaration blocks multiple declarations
• selector used to target HTML elements on our web pages that we want to style
• rule selector(s) and a declaration block come together to create a rule

Warm Up

What is CSS?

CSS can do SO MUCH more than just add color or make things pretty. CSS can be used to create artwork like this project by Kassandra Sanchez. CSS can also make complex processes more intuitive and accessible users, like TurboTax and airbnb. CSS is a powerful tool for frontend developers. Let’s jump in to see how it works!

It’s a “style sheet language” that lets you style the HTML elements on your page. CSS works with HTML, but isn’t HTML. CSS controls the positioning, sizing, colors, and specific fonts on your page. There is a class and id attribute available to use on every HTML element. In addition to the plain old element names themselves, these attributes allow you to create “targets” for both your CSS and JavaScript. They are hooks that you can use to manipulate the look and behavior of your HTML elements.

Anatomy of a Basic CSS Rule

We can target an HTML element in CSS many ways:

// by element name
h1 {
  color: red;
}

// by class name
.primary-font {
  font-family: "Montserrat", sans-serif;
  font-size: 45px;
}

// by id name
#about-page {
  background-color: lightgrey;
}

// by a combination of above
.primary-font p {
  font-size: 15px;
  color: darkgrey;
}

See the Pen CSS Rules by Kayla Wood (@kaylaewood) on CodePen.

Read More on the CSS Cascade

Dev Tools and CSS

Developer Tools, or Dev Tools, are available to use in every browser. They help us debug, experiment, and test assumptions in our HTML, CSS, and JavaScript quickly and with a low-risk in the browser. They’re your friend when it comes to understanding how CSS works (or untangling why it isn’t working) – get in the habit of using them early and often!

Editing CSS

To the right of the HTML pane, there’s a small sidebar that gives us styling information for the currently selected element. Similar to the HTML pane, we can add or remove styles and adjust CSS property values from this pane. You can click on any style property associated with the selected element and change its value. You can also use the blue checkbox to toggle the style on or off.

The Box Model

Each element’s content is in a rectangular box. CSS leverages the box model to control layout and design. An HTML element is comprised of its content and the padding, borders, and margins surrounding it. Boxes are “stacked” in the order they appear in your HTML. You can stack them horizontally, vertically, and in the z-plane.

This diagram can be found in the CSS Dev Tools and the same color coding is used when we hover over elements in the browser with the inspector selected.

The Box Model Applied

Recreating Comps

We can apply all the margin and padding we want, but when it comes down to it, many times Front End Developers are tasked with re-creating something a designer has provided them with, commonly called “comps”. Let’s use our tools to build something professional-grade.

Throughout both lessons today, you are going to work on recreating a piece of the Imperfect Foods website.

You will have one hour to work on iteration 1 of this activity. You will work on iteration 2 this afternoon, after you’ve learned about Flexbox.

Wrap Up

Additional Resources

• MDN Common CSS Properties
• Turing CSS Style Guide
• Visual Guide to CSS
• MDN CSS Box Model
• CSS Border Box
• Chrome Dev Tools - CSS