CSS: Fundamentals

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

Answer the following questions in your notebook. Be ready to share out your answer as if you were in an interview.

  • What is the difference between HTML and CSS?
  • List at least two ways an element can be targeted in CSS, and write out the syntax.
  • List at least three CSS properties and explain what they do.

What is CSS?

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

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.

Explore

With your partner, use the CodePen above to explore.

  • Uncomment each line in the CSS file at a time (starting at the top). Before you uncomment, make a prediction about what you will see on the page.
  • Do you notice a pattern for what styling is taking precedent?
  • Write down any questions that come up!

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.

Editing CSS

Dev Tools Challenge

Directly from the CSS pane, we can edit the CSS and see the changes reflected immediately.

Let’s make the following edits on kodewithklossy.com:

  • Change the background color of the div that holds the mission to rebeccapurple
  • Change the background color of the nav to orange.
  • Change the “Kode With Klossy” logo in the nav bar to have a height of 90px and a width of 320px
  • Experiment with deselecting a few CSS styles. What happens?

Finished Early?

  • Close the Dev Tools. Mess around with the size of the window. Do you notice any issues with this site’s styling? Why might thinking about screen size be important when designing a website?

The Box Model

Each elements 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.

Box Model

The Box Model Applied

Explore Box Model

Setup

  • Fork a copy of this static-site-playground directory
  • Clone it down to your machine
  • Open it up in your text editor
  • Test things are working as expected by opening in the browser by running open index.html in your terminal
  • Explore the code! How is the CSS file linked to the HTML file?

Write some CSS!

  • On your own, take a few minutes to practice writing the syntax of CSS rules and seeing how margin and padding affect an element.
  • A common mantra when working on CSS is “when in doubt, border it out”. Apply a border of an obvious color to both the section and button so you are 100% clear on where things are. Hint: Make sure to be researching properties on MDN!
  • Add margin and padding to your button
  • Add margin and padding to the section

If you have time left, see what else you can change or add with CSS!

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.

The screen shots below are taken from the “Your Orders” page from Amazon.

Recreating Amazon Buttons

With your partner, decide who will drive and who will navigate.

First, work to recreate the “Track package” button. Since the focus is box model, do not worry about the slight linear gradient in the background color; just use #f0c14b and #846a29 for the border. Things to keep in mind:

  • Approximately what percentage of the button do the words take up on Amazon’s button? How closely does yours match that?
  • About how much space is between the top of the letter and the top border?
  • How thick is the border?
  • What do the corners of the button look like?

Now, work to recreate the 4 grey buttons. You already have a lot to work with from the code you wrote for the first one. Use #e7e9ec for the background and #A2A6AC for the border. Things to keep in mind:

  • How much space is between each grey button?
  • How much space is between the yellow and first grey button?

Wrap Up

Solo Journaling

  • How does CSS differ from HTML?
  • Explain the Box Model
  • What questions do you still have about CSS?

Next week we will learn how to create layouts using the CSS display property!

Additional Resources

Lesson Search Results

Showing top 10 results