CSS Topics

Introduction to CSS

What is CSS?

CSS (Cascading Style Sheets) is a language used to describe the presentation of a document written in HTML or XML.

body {
  background-color: lightblue;
}

Why Use CSS?

CSS allows you to separate content from design, making it easier to maintain and update websites.

CSS Box Model

Content

The actual content of the element, such as text, an image, or other media.

Padding

The space between the content and the border of the element.

div {
  padding: 20px;
}

Border

A border that surrounds the padding (if any) and content.

div {
  border: 2px solid black;
}

Margin

The space outside the border, between the border and other elements.

div {
  margin: 10px;
}

CSS Selectors

Element Selector

Selects all elements of a given type.

p {
  color: red;
}

Class Selector

Selects elements with a specific class attribute.

.classname {
  font-size: 20px;
}

ID Selector

Selects a single element with a specific ID attribute.

#unique-id {
  margin: 10px;
}

Attribute Selector

Selects elements with a specific attribute or attribute value.

input[type="text"] {
  border: 1px solid black;
}

Universal Selector

Selects all elements.

* {
  box-sizing: border-box;
}

Group Selector

Applies the same styles to multiple selectors.

h1, h2, h3 {
  font-family: Arial, sans-serif;
}