Course Content

Introduction to CSS Part I

1. Basic Introduction

CSS Including CSS: Internal Styles Including CSS: External Styles Including CSS: Inline Styles Basic Syntax of CSS Basic Selection in CSS Commonly Used Basic CSS Properties Challenge

2. Selectors and Cascade

ID Selectors Class Selectors Other Selectors Cascade in CSS Inheritance Specificity Manipulate Cascade, Specificity and Inheritance Challenge

3. Box Model

Box Model Properties Sizing Elements Positioning Elements

Commonly 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)).

css

index.html

index.css

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).

css

index.html

index.css

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).

css

index.html

index.css

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.

css

index.html

index.css

text-align

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

css

index.html

index.css

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:

css

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

css

index.html

index.css

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:

css

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

css

index.html

index.css

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?

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

Select the correct answer

font-type

text-size

font-size

font-weight

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

Select the correct answer

background-color: #FF0000;

bg-color: red;

color: #FF0000;

background: red;

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

Select the correct answer

padding: 10px 20px;

spacing: 10px 20px;

border-width: 10px 20px;

margin: 10px 20px;

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

Select the correct answer

padding: 10px 5px 15px 20px;

padding-size: 10px 5px 15px 20px;

margin: 10px 5px 15px 20px;

spacing: 10px 5px 15px 20px;

Everything was clear?

How can we improve it?

Thanks for your feedback!

Section 1. Chapter 7

Ask AI

Ask anything or try one of the suggested questions to begin our chat

Course Content

Introduction to CSS Part I

1. Basic Introduction

CSS Including CSS: Internal Styles Including CSS: External Styles Including CSS: Inline Styles Basic Syntax of CSS Basic Selection in CSS Commonly Used Basic CSS Properties Challenge

2. Selectors and Cascade

ID Selectors Class Selectors Other Selectors Cascade in CSS Inheritance Specificity Manipulate Cascade, Specificity and Inheritance Challenge

3. Box Model

Box Model Properties Sizing Elements Positioning Elements

Commonly 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)).

css

index.html

index.css

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).

css

index.html

index.css

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).

css

index.html

index.css

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.

css

index.html

index.css

text-align

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

css

index.html

index.css

margin

css

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

css

index.html

index.css

padding

css

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

css

index.html

index.css

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?

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

Select the correct answer

font-type

text-size

font-size

font-weight

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

Select the correct answer

background-color: #FF0000;

bg-color: red;

color: #FF0000;

background: red;

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

Select the correct answer

padding: 10px 20px;

spacing: 10px 20px;

border-width: 10px 20px;

margin: 10px 20px;

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

Select the correct answer

padding: 10px 5px 15px 20px;

padding-size: 10px 5px 15px 20px;

margin: 10px 5px 15px 20px;

spacing: 10px 5px 15px 20px;

Everything was clear?

How can we improve it?

Thanks for your feedback!

Section 1. Chapter 7