Introduction

CSS (Cascading Style Sheets) controls the visual presentation of HTML. It defines layout, colors, typography, spacing, and responsive behavior across devices.

Why CSS Matters

• Makes pages visually appealing and consistent.
• Improves user experience with spacing, readability, and hierarchy.
• Enables responsive design for mobile, tablet, and desktop screens.

How CSS Works

CSS applies rules to elements using selectors. When multiple rules apply, the cascade, specificity, and source order decide the final style.

Ways to Use CSS

<!-- Inline -->
<p style="color: red;">Inline</p>

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

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

CSS Syntax

CSS rules are made of a selector and a declaration block. Each declaration sets a property to a value and ends with a semicolon.

selector {
  property: value;
}

Example:

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

Multiple Selectors and Declarations

h1, h2 {
  font-family: "Georgia", serif;
  margin-bottom: 12px;
}
      

Comments

/* This is a CSS comment */
.box {
  padding: 16px; /* inline comment */
}
      

Units and Values

Common units: px, em, rem, %, vh, vw.

.container {
  width: 90%;
  max-width: 800px;
  padding: 2rem;
  height: 60vh;
}
      

Shorthand Properties

.card {
  margin: 10px 20px;   /* top/bottom, left/right */
  padding: 12px 16px;
  border: 1px solid #ccc;
}
      

Custom Properties (CSS Variables)

:root {
  --primary: #1e88e5;
  --spacing: 12px;
}

button {
  background: var(--primary);
  padding: var(--spacing);
}
      

Selectors

Selectors target HTML elements so you can apply styles. The more specific the selector, the higher its priority in the cascade.

Basic Selectors

• Type selector: p
• Class selector: .classname
• ID selector: #idname
• Universal selector: *

Attribute Selectors

input[type="text"] { border: 1px solid #ccc; }
a[target="_blank"] { color: #1e88e5; }
      

Combinators

div p { color: #333; }          /* descendant */
ul > li { list-style: square; } /* child */
h2 + p { margin-top: 0; }       /* adjacent sibling */
h2 ~ p { color: #666; }         /* general sibling */
      

Pseudo-Classes

button:hover { background: #222; }
li:first-child { font-weight: bold; }
input:focus { outline: 2px solid #1e88e5; }
      

Pseudo-Elements

p::first-letter { font-size: 200%; }
.card::before { content: "★ "; }
      

Specificity Tip

ID selectors override class selectors, which override type selectors.

Colors, Fonts & Text

CSS gives full control over color, typography, and text layout. Consistent font choices and readable sizing improve UX.

Color Formats

p { color: #ff0000; }              /* hex */
span { color: rgb(255, 0, 0); }     /* rgb */
em { color: rgba(255, 0, 0, 0.6); } /* rgba with opacity */
h1 { color: hsl(0, 100%, 50%); }    /* hsl */
      

Supports keywords, hex, rgb/rgba, hsl/hsla, and modern color functions.

Font Family and Fallbacks

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

Font Size and Line Height

p {
  font-size: 18px;
  line-height: 1.6;
}
      

Text Styling

h2 {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
}
      

Web Fonts

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap");
      

Box Model

Every element is a rectangular box. The box model defines how size and spacing are calculated in the browser.

• Content
• Padding
• Border
• Margin

div {
  width: 200px;
  padding: 10px;
  border: 2px solid black;
  margin: 20px;
}

Total Size Calculation

By default, width/height apply to content only (not padding/border).

/* Total width = 200 + 10*2 + 2*2 = 224px */
div { width: 200px; padding: 10px; border: 2px solid black; }
      

box-sizing

Use border-box so padding and border are included in width/height.

* {
  box-sizing: border-box;
}
      

Margin Collapse

Vertical margins between block elements can collapse into one.

h2 { margin-bottom: 20px; }
p  { margin-top: 15px; } /* effective gap is 20px, not 35px */
      

Layout Techniques

Layout in CSS is handled with multiple systems like display, positioning, flexbox, and grid. Choosing the right one makes responsive design easier.

Display

div { display: block; }
span { display: inline; }
div { display: flex; }

Positioning

• Static, Relative, Absolute, Fixed, Sticky

div { position: relative; top: 10px; left: 5px; }

Flexbox (1D Layout)

Best for aligning items in a row or column.

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
      

Grid (2D Layout)

Ideal for rows and columns together.

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

Responsive Layout

Combine layout techniques with media queries.

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

Flexbox

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

Grid

container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 10px;
}

Backgrounds

Backgrounds let you control color, images, gradients, and their positioning. Combine multiple layers for rich visual effects.

body {
  background-color: #f0f0f0;
  background-image: url('image.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;

}
      

Gradients

.hero {
  background: linear-gradient(135deg, #4facfe, #00f2fe);
}
      

Multiple Backgrounds

.card {
  background-image: url("pattern.png"), linear-gradient(#fff, #f5f5f5);
  background-repeat: no-repeat, no-repeat;
  background-position: top right, center;
}
      

Background Attachment

.parallax {
  background-image: url("banner.jpg");
  background-attachment: fixed;
  background-size: cover;
}
      

Borders & Border Radius

Borders define element outlines, while border-radius rounds corners to create cards, pills, and circles.

div {
  border: 2px solid #000;
  border-radius: 12px;
}

Individual Sides

.box {
  border-top: 3px solid #1e88e5;
  border-right: 3px dashed #ff9800;
  border-bottom: 3px dotted #4caf50;
  border-left: 3px double #9c27b0;
}
      

Rounded Shapes

.pill {
  border-radius: 999px;
}

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
      

Border Image

.fancy {
  border: 6px solid transparent;
  border-image: linear-gradient(45deg, #ff6b6b, #6c5ce7) 1;
}
      

Transitions & Animations

Transitions smoothly change property values, while animations run keyframes over time for more complex effects.

div {
  transition: all 0.3s ease;
}
div:hover {
  background-color: #ff0;
}
@keyframes slide {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}
div { animation: slide 2s infinite alternate; }

Transition Properties

.btn {
  transition: background-color 0.3s ease, transform 0.3s ease;
}
.btn:hover {
  background-color: #222;
  transform: translateY(-2px);
}
      

Keyframe Animations

@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}
.card {
  animation: pulse 1.5s infinite;
}
      

Animation Controls

.loader {
  animation: spin 1s linear infinite;
  animation-delay: 0.2s;
  animation-fill-mode: forwards;
}
      

Performance Tip

Prefer animating transform and opacity for smoother performance.

Media Queries / Responsive Design

Media queries let you adapt layouts to different screen sizes and devices. Combine them with flexible units for fully responsive design.

@media (max-width: 768px) {
  body { font-size: 14px; }
  .container { flex-direction: column; }
}

Common Breakpoints

/* Mobile */
@media (max-width: 480px) { ... }

/* Tablet */
@media (max-width: 768px) { ... }

/* Desktop */
@media (min-width: 1024px) { ... }
      

Responsive Grid Example

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 768px) {
  .grid { grid-template-columns: 1fr; }
}
      

Using Flexible Units

body { font-size: 1rem; }
.card { width: min(90%, 600px); }
      

Pseudo-classes & Pseudo-elements

Pseudo-classes target elements in a specific state, while pseudo-elements style parts of an element. Both allow richer styling without extra markup.

a:hover { color: red; }
p::first-letter { font-size: 200%; }

Common Pseudo-classes

button:hover { background: #222; }
input:focus { outline: 2px solid #1e88e5; }
li:nth-child(2) { color: #e53935; }
      

Common Pseudo-elements

p::first-line { font-weight: bold; }
.badge::after { content: "NEW"; margin-left: 6px; }
      

Form States

input:required { border-color: #ff9800; }
input:valid { border-color: #4caf50; }
input:invalid { border-color: #e53935; }