Course Content

CSS Fundamentals

1. Getting Started with CSS

What is CSS and Why is it Important?Linking CSS to an HTML Document Mastering CSS Selectors for Styling HTML Elements Challenge: Apply Your First CSS Styles Challenge: Style with Class Selectors Enhancing Styles with User Action Pseudo-Classes Challenge: Apply User Action Pseudo-Classes Changing Text Colors in CSS Optimizing Workflow for Efficient CSS Coding Challenge: Use Variables for Better CSS Management

2. Styling Text in CSS

Mastering Text Styling in CSS Text Formatting Techniques for Readability Challenge: Format Text with CSS Adding Custom Fonts to a Web Page Understanding and Using Font Properties Challenge: Explore Font Properties

3. The CSS Box Model & Spacing Elements

What is the CSS Box Model?Understanding Box Sizing in CSS Adding Space with Margins and Padding Challenge: Apply Box Sizing to Elements Using Structural and Functional Pseudo-Classes Challenge: Practice Structural Pseudo-Classes Understanding Block, Inline, and Inline-Block Elements Working with Block-Level Elements Working with Inline Elements Challenge: Predict Page Layout with Different Element Types

4. Mastering Flexbox for Layouts

What is Flexbox and Why Use It?Setting the Flex Direction for Layouts Justifying Content Horizontally in Flexbox Aligning Items Vertically in Flexbox Understanding Flex Item Properties Challenge: Apply Flexbox Concepts Challenge: Build a Layout with Flexbox

5. Adding Decorative Effects with CSS

Using Background Colors for Design Applying Background Images to Elements Working with Images in CSS Creating Effects with Decorative Pseudo-Elements Adding Shadows for Depth and Style Challenge: Implement Decorative Effects in CSS Further Steps

Adding Space with Margins and Padding

The margin, padding, and border properties help us add more space to elements, improving the web resource's appearance, readability, and usability. Let's take a closer look at each of them.

margin and padding Properties

padding

padding refers to the space between an element's content and its border.

padding: top right bottom left

We have multiple ways to give a value to padding.

Shorthand

/* Same padding of 20px applied to all four sides: */
padding: 20px;

/* Top and bottom paddings of 10px, left and right paddings of 20px: */
padding: 10px 20px;

/* Top padding of 10px, left and right paddings of 20px, bottom padding of 5px: */
padding: 10px 20px 5px;

/* Top padding of 10px, right padding of 15px, bottom padding of 20px, left padding of 25px: */
padding: 10px 15px 20px 25px;

Each padding Separately

padding-top: 10px;
padding-right: 15px;
padding-bottom: 25px;
padding-left: 5px;

margin

margin refers to the space between an element and the adjacent elements. It is the area outside the element's border.

margin: top right bottom left

We can give margin in a couple of ways.

Shorthand

/* Same margin of 20px applied to all four sides: */
margin: 20px;

/* Top and bottom margins of 10px, left and right margins of 20px: */
margin: 10px 20px;

/* Top margin of 10px, left and right margins of 20px, bottom margin of 5px: */
margin: 10px 20px 5px;

/* Top margin of 10px, right margin of 15px, bottom margin of 20px, left margin of 25px: */
margin: 10px 15px 20px 25px;

Each margin Separately

margin-top: 10px;
margin-right: 15px;
margin-bottom: 25px;
margin-left: 5px;

border Property

border refers to the line that surrounds an element's padding and content. It is the area that separates the element's content from its margin.

border: width style color;

Shorthand

border: 4px solid brown;

It means that the border of all sides will look the same. Their width is 4px, style is solid, and color is brown.

Let's consider the following example and figure out the possible border styles:

index.html

styles.css

Output

Each border Separately

/* Instead of `top`, can be used any side (`right`, `left`, or `bottom`) */
border-top-color: aquamarine;
border-top-width: 12px;
border-top-style: groove;
border-top-right-radius: 4px;
border-top-left-radius: 8px;

1. What is the difference between `margin` and `padding` in CSS?

2. What is the purpose of the `border` property?

3. How can we apply different `margin` values to different sides of an element?

Everything was clear?

Thanks for your feedback!

Section 3. Chapter 3

Ask AI

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

Course Content

CSS Fundamentals

1. Getting Started with CSS

2. Styling Text in CSS

3. The CSS Box Model & Spacing Elements

4. Mastering Flexbox for Layouts

5. Adding Decorative Effects with CSS

Adding Space with Margins and Padding

The margin, padding, and border properties help us add more space to elements, improving the web resource's appearance, readability, and usability. Let's take a closer look at each of them.

margin and padding Properties

padding

padding refers to the space between an element's content and its border.

padding: top right bottom left

We have multiple ways to give a value to padding.

Shorthand

/* Same padding of 20px applied to all four sides: */
padding: 20px;

/* Top and bottom paddings of 10px, left and right paddings of 20px: */
padding: 10px 20px;

/* Top padding of 10px, left and right paddings of 20px, bottom padding of 5px: */
padding: 10px 20px 5px;

/* Top padding of 10px, right padding of 15px, bottom padding of 20px, left padding of 25px: */
padding: 10px 15px 20px 25px;

Each padding Separately

padding-top: 10px;
padding-right: 15px;
padding-bottom: 25px;
padding-left: 5px;

margin

margin refers to the space between an element and the adjacent elements. It is the area outside the element's border.

margin: top right bottom left

We can give margin in a couple of ways.

Shorthand

/* Same margin of 20px applied to all four sides: */
margin: 20px;

/* Top and bottom margins of 10px, left and right margins of 20px: */
margin: 10px 20px;

/* Top margin of 10px, left and right margins of 20px, bottom margin of 5px: */
margin: 10px 20px 5px;

/* Top margin of 10px, right margin of 15px, bottom margin of 20px, left margin of 25px: */
margin: 10px 15px 20px 25px;

Each margin Separately

margin-top: 10px;
margin-right: 15px;
margin-bottom: 25px;
margin-left: 5px;

border Property

border refers to the line that surrounds an element's padding and content. It is the area that separates the element's content from its margin.

border: width style color;

Shorthand

border: 4px solid brown;

It means that the border of all sides will look the same. Their width is 4px, style is solid, and color is brown.

Let's consider the following example and figure out the possible border styles:

index.html

styles.css

Output

Each border Separately

/* Instead of `top`, can be used any side (`right`, `left`, or `bottom`) */
border-top-color: aquamarine;
border-top-width: 12px;
border-top-style: groove;
border-top-right-radius: 4px;
border-top-left-radius: 8px;

1. What is the difference between `margin` and `padding` in CSS?

2. What is the purpose of the `border` property?

3. How can we apply different `margin` values to different sides of an element?

Everything was clear?

Thanks for your feedback!

Section 3. Chapter 3

CSS Fundamentals

Adding Space with Margins and Padding

margin and padding Properties

padding

Shorthand

Each padding Separately

margin

Shorthand

Each margin Separately

border Property

Shorthand

Output

Each border Separately

1. What is the difference between margin and padding in CSS?

2. What is the purpose of the border property?

3. How can we apply different margin values to different sides of an element?

CSS Fundamentals

Adding Space with Margins and Padding

margin and padding Properties

padding

Shorthand

Each padding Separately

margin

Shorthand

Each margin Separately

border Property

Shorthand

Output

Each border Separately

1. What is the difference between margin and padding in CSS?

2. What is the purpose of the border property?

3. How can we apply different margin values to different sides of an element?

1. What is the difference between `margin` and `padding` in CSS?

2. What is the purpose of the `border` property?

3. How can we apply different `margin` values to different sides of an element?

1. What is the difference between `margin` and `padding` in CSS?

2. What is the purpose of the `border` property?

3. How can we apply different `margin` values to different sides of an element?