1. What is CSS?

CSS (Cascading Style Sheets) is used to control the presentation of HTML documents. HTML defines what the content is; CSS controls how that content looks and is arranged.

Ways to Add CSS

<!-- Inline -->
<p style="color:blue">Hello</p>

<!-- Internal -->
<style>
p { color: blue; }
</style>

<!-- External -->
<link rel="stylesheet" href="style.css">

2. CSS Syntax

selector {
  property: value;
}

p {
  color: blue;
  font-size: 18px;
}

Here p is the selector, color and font-size are properties, and their assigned values define the style.

3. Selectors

4. Colors, Backgrounds and Text

body {
  background-color: #f5f7fb;
  color: #172033;
}

h1 {
  color: rgb(30, 64, 175);
  text-align: center;
}

.card {
  background: white;
  background-image: url("pattern.png");
}

Common Text Properties

• font-family — chooses the font.
• font-size — controls text size.
• font-weight — controls thickness.
• line-height — controls vertical spacing.
• text-align — aligns text.
• text-decoration — underline/other decoration.
• letter-spacing — controls spacing between letters.

5. The CSS Box Model

Every normal element can be understood using four areas: content → padding → border → margin.

.card {
  width: 300px;
  padding: 20px;
  border: 2px solid #333;
  margin: 30px;
}

box-sizing: border-box makes width/height calculations easier because padding and border are included in the declared size.

6. Display and Positioning

.box { position: relative; }
.badge {
  position: absolute;
  top: 10px;
  right: 10px;
}

Positioning values include static, relative, absolute, fixed and sticky.

7. Flexbox

Flexbox is a one-dimensional layout system. It is especially useful for rows, columns, navigation bars, cards and alignment.

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

8. CSS Grid

Grid is a two-dimensional layout system. It is useful when you need to control both rows and columns.

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

9. Responsive Design

Responsive design makes a website adapt to different screen sizes.

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {
  .cards {
    grid-template-columns: 1fr;
  }
}

Quick Revision

• Read each concept and understand what problem it solves.
• Type every example yourself and change the values to see what happens.
• Use browser developer tools to inspect and debug your work.
• Build a small project before moving to the next topic.
• Write your own short summary after completing the chapter.

Practice Project

Build a small real-world project using the concepts from this chapter. Add validation, responsive design and clear error handling where appropriate.