Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Impara Commonly Used Basic CSS Properties | Basic Introduction
Introduction to CSS Part I

bookCommonly Used Basic CSS Properties

color

This property sets the color of the text. You can specify the color using a name (e.g., red), a hex code (e.g., #ff0000), or an RGB value (e.g., RGB (255, 0, 0)).

p {
  color: red;
}
index.html

index.html

index.css

index.css

copy

font-size

This property sets the size of the text. You can specify the size using a unit of measurement (e.g., px, em, rem).

p {
  font-size: 20px;
}
index.html

index.html

index.css

index.css

copy

font-family

This property sets the font family for the text. You can specify a specific font (e.g., Arial) or a generic font family (e.g., sans-serif).

p {
  font-family: Arial;
}
index.html

index.html

index.css

index.css

copy

background-color

This property sets the background color of an element. The value can be specified using a name, hex code, or RGB value, just like the color property.

body {
  background-color: #00609C;
}
index.html

index.html

index.css

index.css

copy

text-align

This property sets the alignment of the text within an element. The possible values are left, center, right, and justify.

h1 {
  text-align: center;
}
index.html

index.html

index.css

index.css

copy

margin

Margin is used to add space outside an element, and padding is used to add space inside an element. The margin property is used to add space around the outside of an element. It can be set for each side of the element individually (top, right, bottom, left) or all sides at once.
For example, to add 20 pixels of margin to the top and bottom of an element, you can use the following CSS:

element {
  margin-top: 20px;
  margin-bottom: 20px;
}

To add 20 pixels of margin to all sides of an element, you can use the following CSS:

element {
  margin: 20px;
}
index.html

index.html

index.css

index.css

copy

padding

The padding property in CSS is used to add space within an element. It can add space inside an element's top, bottom, left, and right sides. Padding is different from margins, which add space outside of an element.
It is also applied similarly to how margin is:

element {
  padding: 10px;  /* Adds 10 pixels of padding to all sides of the element */
}

Just like margin, padding can also be specified different values for each side of the element:

element {
  padding-top: 5px;  /* Adds 5 pixels of padding to the top of the element */
  padding-right: 10px;  /* Adds 10 pixels of padding to the right side of the element */
  padding-bottom: 15px;  /* Adds 15 pixels of padding to the bottom of the element */
  padding-left: 20px;  /* Adds 20 pixels of padding to the left side of the element */
}
index.html

index.html

index.css

index.css

copy

1. What is the CSS property used to change the font size of an element?

2. How do you set the background color of an element in CSS?

3. What is the correct syntax for setting the margin of an element in CSS?

4. How do you set the padding of an element in CSS using the shorthand property?

question mark

What is the CSS property used to change the font size of an element?

Select the correct answer

question mark

How do you set the background color of an element in CSS?

Select the correct answer

question mark

What is the correct syntax for setting the margin of an element in CSS?

Select the correct answer

question mark

How do you set the padding of an element in CSS using the shorthand property?

Select the correct answer

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 1. Capitolo 7

Chieda ad AI

expand

Chieda ad AI

ChatGPT

Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione

Suggested prompts:

Mi faccia domande su questo argomento

Riassuma questo capitolo

Mostri esempi dal mondo reale

Awesome!

Completion rate improved to 5.26

bookCommonly Used Basic CSS Properties

Scorri per mostrare il menu

color

This property sets the color of the text. You can specify the color using a name (e.g., red), a hex code (e.g., #ff0000), or an RGB value (e.g., RGB (255, 0, 0)).

p {
  color: red;
}
index.html

index.html

index.css

index.css

copy

font-size

This property sets the size of the text. You can specify the size using a unit of measurement (e.g., px, em, rem).

p {
  font-size: 20px;
}
index.html

index.html

index.css

index.css

copy

font-family

This property sets the font family for the text. You can specify a specific font (e.g., Arial) or a generic font family (e.g., sans-serif).

p {
  font-family: Arial;
}
index.html

index.html

index.css

index.css

copy

background-color

This property sets the background color of an element. The value can be specified using a name, hex code, or RGB value, just like the color property.

body {
  background-color: #00609C;
}
index.html

index.html

index.css

index.css

copy

text-align

This property sets the alignment of the text within an element. The possible values are left, center, right, and justify.

h1 {
  text-align: center;
}
index.html

index.html

index.css

index.css

copy

margin

Margin is used to add space outside an element, and padding is used to add space inside an element. The margin property is used to add space around the outside of an element. It can be set for each side of the element individually (top, right, bottom, left) or all sides at once.
For example, to add 20 pixels of margin to the top and bottom of an element, you can use the following CSS:

element {
  margin-top: 20px;
  margin-bottom: 20px;
}

To add 20 pixels of margin to all sides of an element, you can use the following CSS:

element {
  margin: 20px;
}
index.html

index.html

index.css

index.css

copy

padding

The padding property in CSS is used to add space within an element. It can add space inside an element's top, bottom, left, and right sides. Padding is different from margins, which add space outside of an element.
It is also applied similarly to how margin is:

element {
  padding: 10px;  /* Adds 10 pixels of padding to all sides of the element */
}

Just like margin, padding can also be specified different values for each side of the element:

element {
  padding-top: 5px;  /* Adds 5 pixels of padding to the top of the element */
  padding-right: 10px;  /* Adds 10 pixels of padding to the right side of the element */
  padding-bottom: 15px;  /* Adds 15 pixels of padding to the bottom of the element */
  padding-left: 20px;  /* Adds 20 pixels of padding to the left side of the element */
}
index.html

index.html

index.css

index.css

copy

1. What is the CSS property used to change the font size of an element?

2. How do you set the background color of an element in CSS?

3. What is the correct syntax for setting the margin of an element in CSS?

4. How do you set the padding of an element in CSS using the shorthand property?

question mark

What is the CSS property used to change the font size of an element?

Select the correct answer

question mark

How do you set the background color of an element in CSS?

Select the correct answer

question mark

What is the correct syntax for setting the margin of an element in CSS?

Select the correct answer

question mark

How do you set the padding of an element in CSS using the shorthand property?

Select the correct answer

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 1. Capitolo 7
some-alt