🎨 CSS Basics

CSS (Cascading Style Sheets) controls how HTML elements look on the page. It handles colors, fonts, spacing, layout, and much more.

Adding CSS to HTML

1. External CSS (Recommended)

HTML

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

style.css

h1 {
  color: blue;
}

2. Internal CSS

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

3. Inline CSS (Avoid)

<h1 style="color: blue;">Title</h1>

CSS Syntax

selector {
  property: value;
  another-property: value;
}

Selector: Which elements to style
Property: What aspect to change (color, size, etc.)
Value: The specific styling

CSS Selectors

Element Selector

/* Targets all <p> elements */
p {
  color: green;
}

Class Selector

HTML

<p class="highlight">Important text</p>

CSS

/* Targets elements with class="highlight" */
.highlight {
  background-color: yellow;
}

ID Selector

HTML

<div id="header">Header content</div>

CSS

/* Targets element with id="header" */
#header {
  font-size: 24px;
}

💡 Class vs ID

Classes can be reused on multiple elements. IDs must be unique per page. Use classes for styling, IDs for JavaScript or unique anchors.

Combining Selectors

/* Multiple selectors (comma-separated) */
h1, h2, h3 {
  color: navy;
}

/* Descendant selector (space) */
div p {
  margin: 10px;
}

/* Direct child (>) */
div > p {
  font-weight: bold;
}

/* Element with class */
p.highlight {
  color: red;
}

Colors

/* Color names */
.box {
  color: red;
  background-color: lightblue;
}

/* Hexadecimal */
.box {
  color: #ff0000;        /* Red */
  background-color: #00ff00; /* Green */
}

/* RGB */
.box {
  color: rgb(255, 0, 0); /* Red */
}

/* RGBA (with transparency) */
.box {
  background-color: rgba(0, 0, 0, 0.5); /* 50% transparent black */
}

Text Styling

p {
  /* Font */
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;      /* or 400, 700, etc. */
  font-style: italic;

  /* Text */
  color: #333;
  text-align: center;      /* left, right, center, justify */
  text-decoration: underline; /* none, underline, line-through */
  text-transform: uppercase; /* uppercase, lowercase, capitalize */
  line-height: 1.5;         /* Space between lines */
  letter-spacing: 2px;
}

Backgrounds

.box {
  /* Solid color */
  background-color: #f0f0f0;

  /* Image */
  background-image: url('image.jpg');
  background-size: cover;        /* cover, contain, or px/% */
  background-position: center;
  background-repeat: no-repeat; /* repeat, no-repeat */

  /* Gradient */
  background: linear-gradient(to right, blue, red);
}

Borders

.box {
  /* Shorthand */
  border: 2px solid black;

  /* Individual sides */
  border-top: 1px dashed red;
  border-right: 2px solid blue;
  border-bottom: 3px dotted green;
  border-left: 4px double purple;

  /* Rounded corners */
  border-radius: 10px;
  border-radius: 50%; /* Makes circle */
}

Width and Height

.box {
  /* Fixed size */
  width: 300px;
  height: 200px;

  /* Percentage (relative to parent) */
  width: 50%;

  /* Constraints */
  max-width: 1200px;
  min-width: 300px;
  max-height: 500px;
  min-height: 100px;
}

Spacing

Margin (Outside)

/* All sides */
.box {
  margin: 20px;
}

/* Individual sides */
.box {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 10px;
  margin-left: 20px;
}

/* Shorthand: top right bottom left (clockwise) */
.box {
  margin: 10px 20px 10px 20px;
}

/* Center horizontally */
.box {
  margin: 0 auto;
}

Padding (Inside)

.box {
  padding: 20px;           /* All sides */
  padding: 10px 20px;      /* top/bottom left/right */
  padding: 10px 20px 30px; /* top left/right bottom */
  padding: 10px 20px 30px 40px; /* top right bottom left */
}

Display Property

/* Block: Takes full width, starts new line */
.box {
  display: block;
}

/* Inline: Flows with text, can't set width/height */
.box {
  display: inline;
}

/* Inline-block: Flows with text, but can set width/height */
.box {
  display: inline-block;
}

/* None: Completely hidden */
.box {
  display: none;
}

Pseudo-classes

/* Hover state */
a:hover {
  color: red;
}

/* Active (being clicked) */
button:active {
  transform: scale(0.95);
}

/* Focus (selected input) */
input:focus {
  border-color: blue;
}

/* First/last child */
li:first-child {
  font-weight: bold;
}

li:last-child {
  color: red;
}

/* Nth child */
tr:nth-child(even) {
  background-color: #f0f0f0;
}

CSS Units

Unit	Description	Example
`px`	Pixels (fixed size)	`font-size: 16px;`
`%`	Percentage of parent	`width: 50%;`
`em`	Relative to parent font	`padding: 1.5em;`
`rem`	Relative to root font	`margin: 2rem;`
`vh/vw`	Viewport height/width	`height: 100vh;`

CSS Specificity

When multiple rules target the same element, specificity determines which wins:

Specificity (Low to High)

Element selectors (p)
Class selectors (.class)
ID selectors (#id)
Inline styles (style="")
!important (avoid!)

Summary

📚 What you learned

CSS syntax: selector, property, value
Types of selectors (element, class, ID)
Text styling and colors
Borders and backgrounds
Box model basics (margin, padding)
Display property
Pseudo-classes for interactivity