1. What is CSS?

CSS controls how HTML looks. Without CSS, every page looks the same.

Three ways to write CSS:

Inline — directly on the element.

<h1 style="color: red;">Hello</h1>

• Quick but messy
• Hard to maintain
• Avoid this

Internal — inside a <style> tag in <head>.

<head>  <style>    h1 {      color: red;    }  </style></head>

• Good for small experiments
• Everything in one file

External — a separate .css file linked to your HTML.

<head>  <link rel="stylesheet" href="style.css"></head>

h1 {  color: red;}

• Best practice
• One CSS file styles the whole site
• Always use this

CSS rule structure

selector {  property: value;}

• selector = what you want to style
• property = what you want to change
• value = what you want to change it to

2. Selectors

Selectors tell CSS which element to style.

Element selector — targets all elements of that type.

p {  color: blue;}

• Styles every <p> on the page

Class selector — targets elements with a specific class. Uses .

<p class="intro">Welcome</p>

.intro {  color: blue;}

• Reusable. Multiple elements can share a class.

ID selector — targets one specific element. Uses #

<h1 id="title">Hello</h1>

#title {  color: blue;}

• Unique. Only one element per ID.

3. Colors + Backgrounds

Text color

p {  color: red;}

Background color

div {  background-color: #0F172A;}

Color formats

color: red;                  /* Named color */color: #C2410C;              /* Hex */color: rgb(194, 65, 12);     /* RGB */color: rgba(0, 0, 0, 0.5);  /* RGB with opacity */

• Hex is the most common in real projects
• rgba lets you control transparency. 0 = invisible, 1 = solid.

Background image

div {  background-image: url("images/bg.jpg");  background-size: cover;  background-position: center;  background-repeat: no-repeat;}

• cover = fill the whole area
• center = keep the image centered
• no-repeat = show the image once

4. Typography

Font family

body {  font-family: "Poppins", sans-serif;}

• Always add a fallback (sans-serif)

Font size

h1 {  font-size: 48px;}

Font weight

p {  font-weight: bold;}

• Common values: normal, bold, 100–900
• 400 = normal, 700 = bold

Text alignment

h1 {  text-align: center;}

• Values: left, center, right

Line height

p {  line-height: 1.6;}

• Controls space between lines
• 1.6 is a good default for readability

Text decoration

a {  text-decoration: none;}

• none removes the underline from links
• underline adds one

Text transform

h1 {  text-transform: uppercase;}

• uppercase, lowercase, capitalize

5. Box Model

Every element is a box. The box model defines the space around it.

┌──────────────────────────────┐│          margin               ││  ┌────────────────────────┐  ││  │       border            │  ││  │  ┌──────────────────┐  │  ││  │  │    padding        │  │  ││  │  │  ┌────────────┐  │  │  ││  │  │  │  content    │  │  │  ││  │  │  └────────────┘  │  │  ││  │  └──────────────────┘  │  ││  └────────────────────────┘  │└──────────────────────────────┘

Padding — space inside the border, around the content.

div {  padding: 20px;}

Margin — space outside the border, between elements.

div {  margin: 20px;}

Border — the line around the element.

div {  border: 2px solid #0F172A;}

• Format: width style color
• Styles: solid, dashed, dotted, none

Border radius — rounds the corners.

div {  border-radius: 8px;}

Shorthand

padding: 10px;              /* all sides */padding: 10px 20px;         /* top/bottom  left/right */padding: 10px 20px 30px 40px; /* top right bottom left */

Same shorthand works for margin.

Box sizing

* {  box-sizing: border-box;}

• border-box = padding and border are included in the width
• Always add this at the top of your CSS

6. Flexbox

Flexbox is used to arrange elements in a row or column.

.container {  display: flex;}

• display: flex turns Flexbox on
• The parent becomes the flex container
• The elements inside become flex item

Flex direction

Controls the direction of the items.

flex-direction: row;     /* horizontal */flex-direction: column;  /* vertical */

Justify content

Controls alignment on the main axis.

justify-content: flex-start;justify-content: center;justify-content: flex-end;justify-content: space-between;

• With row, this usually controls horizontal alignment

Align items

Controls alignment on the cross axis.

align-items: flex-start;align-items: center;align-items: flex-end;

• With row, this usually controls vertical alignment

To center content:

.container {  display: flex;  justify-content: center;  align-items: center;}

Gap

Adds space between flex items.

.container {  display: flex;  gap: 20px;}

• Use gap for clean spacing between items

Equal width items

.item {  flex: 1;}

• Makes items share the available space equally

Visualization

Most important Flexbox properties:

display: flex;flex-direction: row;justify-content: center;align-items: center;gap: 20px;flex: 1;

Mini Project