Learn core CSS principles, explore layout creation, and refine skills in typography and styling.

Web Page Styling—CSS

In this module, we’ll introduce you to the essentials of CSS. We’ll learn about core concepts such as the cascade and inheritance. We’ll cover various CSS units and dive into fundamental principles like the box model, margins, padding, and fonts. We’ll also teach you about flexible layouts using display properties and CSS positioning techniques. Additionally, you’ll explore backgrounds, colors, images, and practical examples to solidify your understanding. By the end of this module, you will be able to confidently create well-structured web pages.

Getting Started with CSS



# The `padding` property

The `padding` property is conceptually similar to the `margin` property, with a few slight differences. The padding defines the inner portion of the box model. It creates space around the content of an element, within any margins and borders. We specify our element’s `padding` at each side, like so:

```css
padding-top: 10px:
padding-right: 20px;
padding-bottom: 10px
padding-left: 20px;
```

## Padding shorthand

We can use the `padding` shorthand in the same manner as the `margin` shorthand:

```css
padding: 10px 20px 30px 0px;
```

Just like with margins, `padding` values can also be `px`, `em`, `rem`, percentages, or any other CSS unit value.

# Example

Getting Started with CSS

CSS Core Concepts

CSS Units

CSS Fundamentals

Unlocking Flexible Layouts with CSS Display

CSS Positioning

Typography in CSS

Backgrounds and Colors

Images and Floats in CSS

Conclusion

The `padding` property

Getting Started with CSS

CSS Core Concepts

CSS Units

CSS Fundamentals

Unlocking Flexible Layouts with CSS Display

CSS Positioning

Typography in CSS

Backgrounds and Colors

Images and Floats in CSS

Conclusion

The padding property

The `padding` property