Intro to CSS

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

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:

  • via element name
  • via class name
  • via id name
  • via a combination of above

See the Pen CSS Rules by Turing School of Software and Design (@turing) on CodePen.

Explore

With your partner, use the CodePen above to explore. Then, answer the questions below:

  • Can you add two classes to an element? What is the syntax?
  • Which class will take precedent?
  • If an element has both a class and an id, and conflicting rules are applied to the class and id, which takes precedent? What about element and class? Element and id?

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 text color of all the nav items to orange.
  • Change the “Kode With Klossy” logo in the nav bar to have a height of 90px and a width of 320px
  • Hide the element that contains the content under the sub header “In The News”

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. You will probably find it extremely helpful!

Box Model

The Docs

The Box Model Applied

First, let’s flex those command line muscles you’ve been building:

  • Create a directory called static-site-playground
  • Create a file index.html, copy and paste in the HTML provided below
  • Create a file main.css
  • Link the index and main files you just made
  • Test things are working as expected by opening in the browser by running open index.html in your terminal:
<!doctype html>
<html>
  <head>
    <title>CSS Playground</title>
  </head>
  <body>
    <h1>Button Practice</h1>
    <article>
      <button class="track-package">Track package</button>
    </article>
  </body>
</html>

Next, we’ll use this HTML to do some experimenting with Box Model behavior.

Explore Box Model

On your own, take a few minutes to practice writing the syntax of CSS rules and seeing how margin and padding effect 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 article and button so you are 100% clear on where things are.
  • Add margin and padding to your button
  • Add margin and padding to the article

With your partner, choose a website you frequently visit. Find a button or box that demonstrates the use of padding. Find a place where margin was probably used to provide breathing room. Be ready to show and share!

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.

Recreating Amazon Buttons

With your partner, decide who will drive and who will navigate. The navigator should close their computer.

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 5 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?

Box-Sizing and the CSS Box Model

In HTML, you can visualize each element as its own rectangular box. There are a number of CSS properties that can affect the final width and height of each of these boxes. The CSS Box Model describes how the final height and width of an element is determined.

We have an article element that we gave a width of 400 and a height of 200. However, we’ve also applied several additional properties that are affecting its size and positioning. The padding and border properties are both adding 20px to the element’s height and width. Now the actual visible dimensions of our element are 480x280. The Dev Tools panel provides a handy graphic of how our article is being rendered.

This is the default behavior for the rendering of block elements in CSS and is due to the box sizing property having a default value of content-box. The box-sizing property allows us to override this behavior and alter how the dimensions of an element are calculated:

*,
*:after,
*:before {
  box-sizing: border-box;
}

Setting the box-sizing property to border-box will alter the model so that the width and height properties include the content, padding and border. If we were to set box-sizing: border-box on our previous example, our element would be rendered at exactly the 400x200 dimensions we specified. It’s padding and border properties would be included within those dimensions, making our content area slightly smaller.

Revisiting Amazon Buttons

Revisit your Amazon buttons and add the CSS rule shown above that applies the box-sizing property to your CSS. How does it change what’s rendered in the browser? How is the size of the elements impacted?

Inline vs. Block

While doing your capstone or in yesterday’s Intro to HTML lesson, you may have noticed that some HTML elements behave differently, in terms of whether they are on their own line or not.

Every HTML element has a default display property - either inline or block.

Block elements start on a new line and take up the entire width of the page, even if the content doesn’t take up the entire width of the page. Some elements that default to display: block are p, h1 and section. Open up this CodePen to see this illustrated:

See the Pen Block Elements by Amy Holt (@ameseee) on CodePen.

Inline elements only take up the space their content requires, so you may see multiple inline elements sitting next to each other. Some elements that default to display: inline are img, a, input, and em. Open up this CodePen to see this illustrated:

See the Pen Inline Elements by Amy Holt (@ameseee) on CodePen.

You’re not stuck with the default display

While every element has a default, we can modify the display of any given element with CSS.

Changing Display

One by one, fork each CodePen. Add a declaration to one rule at a time, changing the value of the display property from its default.

We will go into much more detail on how to use the different display properties tomorrow; this is meant to be a high level introduction.

Additional Resources

Lesson Search Results

Showing top 10 results