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.

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; 16,777,216 to be exact! “Hex” is short for “hexidecimal”, a number system with 16 values instead of our more familiar “decimal” system with 10 values. There are many websites that allow a user to pick a color from a color wheel, then provide the associated hex value.

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: 100px;
• 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;

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;
}

Back to Curriculum Index