Scribd
Upload
4 views

CSS Overview With Examples

The document provides an overview of CSS, covering key concepts such as selectors, properties and values, the box model, positioning, and flexbox. It includes examples for each concept to illustrate how they are applied in styling HTML elements. This serves as a foundational guide for understanding and using CSS effectively.

Uploaded by

stoke7428
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

CSS Overview With Examples

The document provides an overview of CSS, covering key concepts such as selectors, properties and values, the box model, positioning, and flexbox. It includes examples for each concept to illustrate how they are applied in styling HTML elements. This serves as a foundational guide for understanding and using CSS effectively.

Uploaded by

stoke7428
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

CSS Overview

1. Selectors:

Selectors are used to select the HTML elements you want to style.

Example:

- Element Selector: `p { color: blue; }`

- Class Selector: `.title { font-size: 20px; }`

- ID Selector: `#header { background-color: black; }`

2. Properties and Values:

CSS is made up of properties and values.

Example:

- Font Size: `p { font-size: 16px; }`

- Background Color: `div { background-color: lightgray; }`

3. Box Model:

All HTML elements can be considered as boxes. The box model consists of: margin, border, padding, and

Example:

```

div {

width: 300px;

padding: 20px;

border: 5px solid gray;

margin: 10px;

}
```

4. Positioning:

CSS gives you control over the layout of your elements using different positioning properties.

Example:

- Static Positioning: `div { position: static; }`

- Relative Positioning: `div { position: relative; top: 10px; }`

- Absolute Positioning: `div { position: absolute; top: 50px; }`

- Fixed Positioning: `div { position: fixed; top: 0; }`

- Sticky Positioning: `div { position: sticky; top: 0; }`

5. Flexbox:

A modern layout model in CSS.

Example:

```

.container {

display: flex;

justify-content: space-between;

align-items: center;

```

You might also like