Intro to CSS

Back to Curriculum Index

Goals

  • Style HTML element using CSS rules
  • Use class and ID attributes on HTML elements to more specifically target them in CSS

What is CSS?

CSS is a way to add style to HTML documents on the web. It’s incredibly powerful!

Let’s take a look at some examples of CSS in action: CSS Zen Garden. You’ll notice that every single one of these web pages has the exact same HTML - all the differences in layout and look are achieved through CSS!

While CSS is typically used to control the layout and details of the way a site looks, artists have also used it to create some pretty incredible pieces - check out these portraits and this card.

CSS Rules

How do we write CSS code that instructs the browser to make elements appear differently? We write CSS rules - a set of instructions for each element to follow.

A CSS rule for a button with a color of #333333 and font-size of 32px. The button is labeled selector, color: #333333 is labeled declaration, font-size: is labeled property and 32px is labeled value.

button {
  color: #333333;
}

In the previous example, the browser will set the color of any button on the page to #333333. We can provide multiple declarations inside of a rule, such as:

button {
  color: #333333;
  border: 2px solid pink;
  font-family: Ariel;
}

CSS Colors

There are many ways that we can express the value of a color to the browser. Today, we will just discuss two of them:

  • Color Names - written in English, these names describe the color. We are limited to 140 of them.
  • Hex Values - a six-digit code (letters and/or numbers) preceded by a # allows us to have many more combinations of colors. There are many websites that allow a user to pick a color from a color wheel, then provide the associated hex value.

Try It: Writing your First CSS Rule

In the CSS tab of your CodePen, write a rule that targets all of your button elements.

Change the color and background-colors with CSS. Observe the output in the browser. What is the difference between these two properties?

Explore: Remove the -color from background-color. What happens? What can you infer from this?

Other Commonly Used Properties

There are 520 properties available in the CSS language. It is unlikely that any developer knows every single one. But, there are many commonly used properties that folks who write CSS with some regularity will come to memorize.

Here are a few great places to start:

  • font-size: this property expects a value with a unit; today we’ll introduce px (pixels) and % (percent). Example declaration: font-size: 150%;
  • border: accepts 3 pieces of information: the width of the line, the style of the line, and the color. Example declaration: border: 2px solid #401AA5;
  • height & width: each of these properties needs a value with a unit. We recommend starting with pixels. Example declaration: height: 200px;

Try It: Exploring CSS

Write a CSS rule that targets the paragraphs, then change their background-color and font-size.

Next, write a rule that targets the main heading - change the color of the text and add a border.

Continue to explore and add declarations to make the site your own!

🌶 Finished? Click here for a Spicy Challenge 🌶

Check out the opacity and box-shadow properties and implement them on your site.

Classes and IDs

There will be times when we want to target one paragraph element, but not the 37 others on the site. There will also be times when we want to write a CSS rule for some paragraphs, but not all. This is a great opportunity to use a class or ID attribute!

  • Classes can be used to identify one or more than one elements
  • IDs can be used to uniquely identify one element

Below is the syntax to apply classes and IDs to HTML elements:

<h2 class="sub-heading">Welcome!</h2>
<button id="log-in-btn">Enter Site</button>

<h2 class="sub-heading">More Info Below</h2>

To target them in CSS, we need to use a specific syntax:

/* classes start with . */
.sub-heading {
  color: teal;
}

/* IDs start with # */
#log-in-btn {
  background-color: grey;
  border: 3px solid teal;
}

Try It: Classes & IDs

In the style.css file, use a class attribute to give the same styles to 2 of your paragraphs, but not to the other(s).

Based on how you'd like to style your page, if you see the need for other classes or IDs, go ahead and implement them!

As you are probably in the habit of by now, observe the changes in the browser.


Back to Curriculum Index