Common CSS Properties

CSS (Cascading Style Sheets) is a language used to style and layout HTML documents. With CSS, you can control the color, font, size, spacing, and layout of HTML elements. In this section, we'll look at some common CSS properties and how to use them.

• color: This property sets the color of text. You can use color names, RGB values, or HEX values to specify the color. For example:

p {
  color: red; /* color name */
}
 
h1 {
  color: rgb(0, 128, 0); /* RGB value */
}
 
a {
  color: #0000ff; /* HEX value */
}

• font-size: This property sets the size of text. You can use pixels, ems, or percentages to specify the size. For example:

p {
  font-size: 16px; /* pixels */
}
 
h1 {
  font-size: 2em; /* ems */
}
 
span {
  font-size: 150%; /* percentage */
}

• font-family: This property sets the font used for text. You can specify a list of font names and/or generic font families. For example:

p {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

• background-color: This property sets the background color of an element. You can use color names, RGB values, or HEX values to specify the color. For example:

body {
  background-color: #f5f5f5;
}
 
div {
  background-color: rgba(0, 0, 255, 0.5); /* RGB value with alpha */
}

• width, height: These properties set the dimensions of an element. You can use pixels, ems, or percentages to specify the size. For example:

img {
  width: 100%; /* fill the parent element */
}
 
div {
  height: 50vh; /* 50% of the viewport height */
}

• margin, padding: These properties set the space around and within an element, respectively. You can specify different values for each side of the element using shorthand notation, or use individual properties for each side. For example:

p {
  margin: 10px 20px; /* 10px top/bottom, 20px left/right */
}
 
div {
  padding-top: 20px;
  padding-right: 10px;
  padding-bottom: 30px;
  padding-left: 5px;
}

• display: This property sets the layout mode of an element. There are several display values, including block, inline, and flex. For example:

img {
  display: block; /* display as a block-level element */
}
 
span {
  display: inline; /* display as an inline-level element */
}
 
div {
  display: flex; /* display as a flex container */
}

These are just a few of the many CSS properties you can use to style your HTML elements. It's important to remember that CSS is a powerful tool, and it can take some time and practice to master.

Learn more about CSS and make practice (opens in a new tab)

CSS Tutorial | Youtube (opens in a new tab)