Common CSS properties

Text

#

In this lesson, we will learn about some of the most commonly used CSS properties. We will also learn how to use these properties to style our web pages. So let’s get started!

Color

#

The color property is used to set the text color of an element. You can specify the color value using several different methods, such as using color names, hexadecimal values, RGB values, or HSL values. Here’s an example:

h1 {
  color: red;
}

The code above will make all the headings red. You can also use the color property to set the color of other elements, such as paragraphs, links, and lists. Here’s an example:

p {
  color: red;
}

a {
  color: blue;
}

The code above will make all the paragraphs red and all the links blue.

Font size

#

The font-size property is used to set the size of the text. You can specify the size of the text using several different methods, such as using absolute values, relative values, or using the em unit. Here’s an example:

h1 {
  font-size: 16px;
}

p {
  font-size: 1.5em;
}

a {
  font-size: 150%;
}

The code above will make the headings 16 pixels in size, the paragraphs 1.5 times the size of the parent element, and the links 150% of the size of the parent element.

Font family

#

The font-family property is used to set the font of the text. You can specify the font of the text using several different methods, such as using a list of font names, or using the generic-family value. Here’s an example:

h1 {
  font-family: Arial, Helvetica, sans-serif;
}

p {
  font-family: "Times New Roman", Times, serif;
}

The code above will make the headings use the Arial font, and the paragraphs use the Times New Roman font.

Text align

#

The text-align property is used to set the horizontal alignment of the text. You can specify the horizontal alignment of the text using several different methods, such as using the left value, the right value, or the center value. You can also use the justify value to justify the text, although this is not recommended on the web. Here’s an example:

h1 {
  text-align: center;
}

p {
  text-align: justify;
}

The code above will make the headings centered, and the paragraphs justified.

Text decoration

#

The text-decoration property is used to set or remove decorations from text. You can specify the decoration of the text using several different methods, such as using the none value, the underline value, or the overline value. Here’s an example:

h1 {
  text-decoration: underline;
}

p {
  text-decoration: overline;
}

The code above will make the headings underlined, and the paragraphs overlined.

Background and spacing

#

Background color

#

The background-color property is used to set the background color of an element. You can specify the color value using several different methods, such as using color names, hexadecimal values, RGB values, or HSL values. Here’s an example:

h1 {
  background-color: #ff0000;
}

The code above will make the background of all the headings red. Did you notice that we used a hexadecimal value to specify the color? You can use hexadecimal values to specify the color. The hexadecimal value #ff0000 represents the color red. You can use the Color Picker to find the hexadecimal value of any color.

You can also use the background-color property to set the background color of other elements, such as paragraphs, links, and lists. Here’s an example:

p {
  background-color: #ff0000;
}

a {
  background-color: #0000ff;
}

The code above will make the background of all the paragraphs red and the background of all the links blue.

Margin

#

The margin property is used to set the margin of an element. You can specify the margin of an element using several different methods, such as using absolute values, relative values, or using the em unit. Here’s an example:

h1 {
  margin: 16px;
}

p {
  margin: 1.5em;
}

a {
  margin: 150%;
}

The code above will make the headings have a margin of 16 pixels, the paragraphs have a margin of 1.5 times the size of the parent element, and the links have a margin of 150% of the size of the parent element.

Padding

#

The padding property is used to set the padding of an element. You can specify the padding of an element using several different methods, such as using absolute values, relative values, or using the em unit. Don’t worry if you don’t understand what this is right now. We will learn more about the box model in the next lesson and we will learn more about the margin and padding properties.

Here’s an example:

h1 {
  padding: 16px;
}

p {
  padding: 1.5em;
}

a {
  padding: 150%;
}

The code above will make the headings have a padding of 16 pixels, the paragraphs have a padding of 1.5 times the size of the parent element, and the links have a padding of 150% of the size of the parent element.

Border

#

The border property is used to set the border of an element. You can specify the border of an element using several different methods, such as using absolute values, relative values, or using the em unit. Here’s an example:

h1 {
  border: 1px solid red;
}

p {
  border: 2px dotted blue;
}

a {
  border: 3px dashed green;
}

The code above will make the headings have a border of 1 pixel in size, solid, and red, the paragraphs have a border of 2 pixels in size, dotted, and blue, and the links have a border of 3 pixels in size, dashed, and green.

To be continued

#

There are many more CSS properties than we can cover in this lesson. I recommend that you have a cheat sheet around when you are learning CSS. You can find a cheat sheet here. But now, let’s move on to the next lesson and learn more about the box model.

Resources

#

• CSS Reference