🎨HTML & CSS

Introduction to CSS

Updated 2026-04-20

4 min read

Introduction

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML. It is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript. CSS is designed to enable the separation of content and presentation, which improves content accessibility, provides more flexibility and control in the specification of presentation characteristics, enables multiple web pages to share formatting, and reduces complexity and repetition in the structural content.

What is CSS?

CSS allows you to apply styles to elements on your webpage. These styles can include colors, fonts, spacing, layout, and many other visual aspects. By using CSS, developers can create visually appealing and consistent designs across multiple web pages.

Basic Syntax

A CSS rule consists of a selector and a declaration block:

selector {
  property: value;
}

Selector: The HTML element you want to style.
Declaration Block: Contains one or more declarations separated by semicolons. Each declaration includes a CSS property and a value.

Example

Let's apply some basic styles to an HTML paragraph:

<!-- index.html -->
<p class="highlight">This is a highlighted paragraph.</p>

/* styles.css */
.highlight {
  color: blue;
  font-weight: bold;
}

In this example, the p element with the class highlight will have its text colored blue and made bold.

Selectors

Selectors are patterns used to select the HTML elements you want to style. CSS provides several types of selectors:

Element Selector

Selects all elements of a specific type:

p {
  color: green;
}

This will apply the green color to all paragraph (<p>) elements.

Class Selector

Selects elements with a specific class attribute:

.highlight {
  background-color: yellow;
}

This will apply a yellow background to all elements with the class highlight.

ID Selector

Selects an element with a specific ID attribute (note that IDs should be unique per page):

#header {
  font-size: 24px;
}

This will set the font size of the element with the ID header to 24 pixels.

Combinators

Combinators are used to combine selectors in more complex ways:

Descendant Selector: Selects elements that are descendants of another element.
```
div p {
  text-align: center;
}
```
This will center the text of all <p> elements inside a <div>.
Child Selector: Selects elements that are direct children of another element.
```
ul > li {
  list-style-type: square;
}
```
This will apply a square bullet to all <li> elements that are direct children of an <ul>.

CSS Properties

CSS properties define the visual appearance of HTML elements. Some common properties include:

Color: Sets the text color.
```
color: red;
```
Background Color: Sets the background color of an element.
```
background-color: lightgray;
```
Font Size: Sets the size of the font.
```
font-size: 16px;
```
Margin: Adds space outside the border of an element.
```
margin: 20px;
```
Padding: Adds space inside the border of an element.
```
padding: 10px;
```

CSS Box Model

The CSS box model is a fundamental concept in web design. It describes how elements are laid out on a webpage:

Content: The actual content of the element, such as text or images.
Padding: Space between the content and the border.
Border: A line surrounding the padding and content.
Margin: Space outside the border.

Understanding the box model is crucial for controlling layout and spacing in CSS.

Best Practices

Separation of Concerns: Keep your HTML structure separate from styling by using external CSS files.
Use Descriptive Class Names: Make your class names meaningful to improve code readability.
Avoid Inline Styles: Inline styles can make maintenance difficult and override other styles unintentionally.
Use a Reset or Normalize CSS: This helps ensure consistent styling across different browsers.
Responsive Design: Use media queries to adapt your design to different screen sizes.

Conclusion

CSS is a powerful tool for controlling the presentation of web pages. By understanding its basic syntax, selectors, properties, and best practices, you can create visually appealing and maintainable designs. As you progress in your web development journey, you'll explore more advanced CSS features such as animations, transitions, and layout techniques like Flexbox and Grid.

Introduction to CSS

Updated 2026-04-20

4 min read

Introduction

What is CSS?

Basic Syntax

A CSS rule consists of a selector and a declaration block:

selector {
  property: value;
}

Selector: The HTML element you want to style.
Declaration Block: Contains one or more declarations separated by semicolons. Each declaration includes a CSS property and a value.

Example

Let's apply some basic styles to an HTML paragraph:

<!-- index.html -->
<p class="highlight">This is a highlighted paragraph.</p>

/* styles.css */
.highlight {
  color: blue;
  font-weight: bold;
}

In this example, the p element with the class highlight will have its text colored blue and made bold.

Selectors

Selectors are patterns used to select the HTML elements you want to style. CSS provides several types of selectors:

Element Selector

Selects all elements of a specific type:

p {
  color: green;
}

This will apply the green color to all paragraph (<p>) elements.

Class Selector

Selects elements with a specific class attribute:

.highlight {
  background-color: yellow;
}

This will apply a yellow background to all elements with the class highlight.

ID Selector

Selects an element with a specific ID attribute (note that IDs should be unique per page):

#header {
  font-size: 24px;
}

This will set the font size of the element with the ID header to 24 pixels.

Combinators

Combinators are used to combine selectors in more complex ways:

Descendant Selector: Selects elements that are descendants of another element.
```
div p {
  text-align: center;
}
```
This will center the text of all <p> elements inside a <div>.
Child Selector: Selects elements that are direct children of another element.
```
ul > li {
  list-style-type: square;
}
```
This will apply a square bullet to all <li> elements that are direct children of an <ul>.

CSS Properties

CSS properties define the visual appearance of HTML elements. Some common properties include:

Color: Sets the text color.
```
color: red;
```
Background Color: Sets the background color of an element.
```
background-color: lightgray;
```
Font Size: Sets the size of the font.
```
font-size: 16px;
```
Margin: Adds space outside the border of an element.
```
margin: 20px;
```
Padding: Adds space inside the border of an element.
```
padding: 10px;
```

CSS Box Model

The CSS box model is a fundamental concept in web design. It describes how elements are laid out on a webpage:

Content: The actual content of the element, such as text or images.
Padding: Space between the content and the border.
Border: A line surrounding the padding and content.
Margin: Space outside the border.

Understanding the box model is crucial for controlling layout and spacing in CSS.

Best Practices

Separation of Concerns: Keep your HTML structure separate from styling by using external CSS files.
Use Descriptive Class Names: Make your class names meaningful to improve code readability.
Avoid Inline Styles: Inline styles can make maintenance difficult and override other styles unintentionally.
Use a Reset or Normalize CSS: This helps ensure consistent styling across different browsers.
Responsive Design: Use media queries to adapt your design to different screen sizes.

Introduction to CSS

Introduction

What is CSS?

Basic Syntax

Example

Selectors

Element Selector

Class Selector

ID Selector

Combinators

CSS Properties

CSS Box Model

Best Practices

Conclusion

Further Reading

Introduction to CSS

Introduction

What is CSS?

Basic Syntax

Example

Selectors

Element Selector

Class Selector

ID Selector

Combinators

CSS Properties

CSS Box Model

Best Practices

Conclusion

Further Reading