Intro to CSS Common Properties

Learning objective: By the end of this lesson, students will learn how to apply and manipulate common CSS properties, including font attributes and color, to control the appearance and layout of HTML elements.

CSS properties are used to control the appearance and behavior of HTML elements. There are many different CSS properties, but some of the most common ones are font properties, color, and background.

Font properties

Font properties let us control the appearance of text on a web page. Some of the most common are:

Let’s try styling our <h2> elements:

h2 {
  font-family: Arial, sans-serif;
  font-size: 28px;
  font-weight: bold;
  font-style: italic;
  text-align: center;
}

color

We’ve already seen how the color property allows us to specify the color of fonts.

There are three common ways to specify color values in CSS:

All three of the example values above will give us the same color!

Any of the three methods is acceptable for declaring a color value, but there are advantages to using RGB or hex codes, namely precision and range.

Hex codes and RGB values give us variety and precision that color names can’t. One of the reasons for this is that once you deviate from basic colors like red, green, blue, and so on, color names can be subjective. There are only 140 predefined color keywords in CSS, but over 16 million possible hex/RGB color combinations exist.

🎓 You Do

Take a few minutes and visit one of the following resources and learn more about a couple of properties of your choosing:

After you’ve learned about that property, apply it in your code.

Practice

Now that you’ve learned about some common properties, let’s get some more practice.