Using CSS

body {
  font-size: 12px;
  background-color: red;
}

<p style="font-size:12px;background-color:red">
  This is a paragraph with a red backgrund and 12px letters.
</p>

In the examples above, body and p are the selectors. font-size and background-color are known as the properties. 12px and red are known as values.

What do selectors do? What about properties? What about values?

Types of Selectors

Elements

The elements selector styles ALL elements of a specific type. Example:

<p>I will be red.</p>
<p>Me too!</p>

p {
  color: red;
}

Classes

The .class selector styles all elements with the specified class. As a convention, web developers use classes to select multiple HTML elements.
Example:

<p class="intro">This will have margins and a border!</p>

.intro {
  margin-left: 10px;
  margin-right: 10px;
  border: 5px solid red;
}

IDs

The #id selector styles the element with the specified id. As a convention, web developers use IDs to select one specific element.
Example:

<p id="myid">This will be cyan!</p>

#myid {
  color: cyan;
}

Properties and Values

Properties and value pairs define how an HTML element (whether selected by element, class or ID) should look. Different properties expect different value types. For example, background-color expects an RGB value (though it can take other values) while font-size expects a numerical pixel value (though it can take others). Visit the W3 website of the CSS property you're interested in to learn more about the large number of CSS properties.

CSS Box Model

Please review the CSS box model.

Learn more selectors here.

Classwork

Use Thimble to create the Android logo with only HTML and CSS.
Do the HTML & CSS track on Codecademy

Homework

Complete the CSS section of FreeCodeCamp.
Recreate the Google homepage. Focus on the middle image and search bar; leave the header and footer for last.

Resources

CSS Reference

CSS