Comprehensive CSS Learning Guide

A complete guide to CSS, from basics to advanced layout and animations.

1. Introduction & Syntax

CSS (Cascading Style Sheets) is the language we use to style an HTML document. It controls the colors, fonts, layout, and overall appearance.

A CSS rule has two main parts: a **selector** and a **declaration block**. The selector points to the HTML element, and the declaration block contains one or more property-value pairs.

/* 'h1' is the selector.
  The { ... } is the declaration block.
  'color: blue;' is a declaration.
*/
h1 {
  color: blue;
  font-family: sans-serif;
}
p {
  color: #333;
  font-size: 16px;
}

2. Selectors

Selectors are how you target specific HTML elements. You can select elements by their tag name, class, ID, attributes, and more.

/* 1. Element Selector (all 
 tags) */
p {
  font-style: italic;
}
/* 2. Class Selector (class='highlight') */
.highlight {
  background-color: yellow;
}
/* 3. ID Selector (id='main-title') */
#main-title {
  text-decoration: underline;
}
/* 4. Pseudo-class (on hover) */
a:hover {
  color: red;
}

3. How To Add CSS

There are three ways to add CSS to your HTML:

  • External CSS (Best): A separate .css file linked in the <head>. (e.g., <link rel="stylesheet" href="style.css">)
  • Internal CSS: Inside a <style> tag in the <head>.
  • Inline CSS: Using the style attribute directly on an HTML element. (e.g., <p style="color: red;">...</p>)

All our examples use the **Internal CSS** method for demonstration.

4. Colors

CSS lets you control colors for text, backgrounds, borders, and more. Colors can be defined by name, HEX codes, RGB, and HSL.

/* 1. By Name */
.c1 { color: tomato; }

/* 2. By HEX code (#RRGGBB) */
.c2 { color: #311B92; }

/* 3. By RGBa (Red, Green, Blue, Alpha) */
.c3 { 
  color: white;
  background-color: rgba(0, 100, 0, 0.5); /* 50% transparent green */
}
/* 4. By HSL (Hue, Saturation, Lightness) */
.c4 { background-color: hsl(200, 80%, 50%); }

5. Backgrounds

You can set background colors, images, and other properties for any element.

.box {
  height: 200px;
  color: white;
  font-size: 24px;
  padding: 20px;

  background-image: url('https://placehold.co/600x300/311B92/FFFFFF?text=BG');
  background-size: cover; /* Cover the whole box */
  background-position: center;
  background-repeat: no-repeat;
}

6. Borders

You can add borders to any element and control their width, style, and color. Use `border-radius` to create rounded corners.

div { padding: 10px; margin: 10px; }

/* Shorthand: width | style | color */
.b1 {
  border: 3px solid #5E35B1;
}
.b2 {
  border-bottom: 2px dotted red;
}
.b3 {
  background: #EDE7F6;
  border: 1px solid #ccc;
  border-radius: 12px; /* Rounded corners */
}

7. The Box Model

Every HTML element is a box. The Box Model consists of: **Margin** (space outside the border), **Border** (the line), **Padding** (space inside the border), and **Content** (the element itself).

Use box-sizing: border-box; to make layout easier. This tells the browser to include `padding` and `border` in the element's total `width` and `height`, not add them on top.

.box {
  /* Margin: space OUTSIDE */
  margin: 20px;
  
  /* Border: the line */
  border: 5px solid #5E35B1;
  
  /* Padding: space INSIDE */
  padding: 30px;
  
  /* Content size */
  width: 300px;
  
  background-color: #EDE7F6;
}

8. Text & Fonts

Control every aspect of your text, including the font, size, weight, color, alignment, and spacing.

h1 {
  font-family: Georgia, serif;
  font-weight: bold;
  text-align: center;
  text-decoration: underline;
}
p {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6; /* 1.6 times font size */
  letter-spacing: 1px;
}

10. Display & Position

display and position are fundamental for layout. display (e.g., `block`, `inline`, `inline-block`, `none`) controls how an element behaves in the page flow. position (e.g., `static`, `relative`, `absolute`, `fixed`) lets you precisely place an element outside of the normal flow.

.container {
  position: relative; /* Parent for absolute */
  height: 150px;
  border: 1px solid #ccc;
}
.box1 {
  display: block; /* Takes full width */
  background: #EDE7F6;
}
.box2 {
  display: inline; /* Stays in the text flow */
  background: #D1C4E9;
}
.box3 {
  position: absolute; /* Placed relative to .container */
  top: 10px;
  right: 10px;
  background: #5E35B1;
  color: white;
}

11. Units & Specificity

Units: Use px (pixels) for fixed sizes and %, em, rem, vw (viewport width), vh (viewport height) for relative, responsive sizes.

Specificity: If two CSS rules target the same element, the *most specific* rule wins. The order is: **ID** (most specific) > **Class/Pseudo-class** > **Element** (least specific). Inline styles beat all.

/* ID is most specific, so it wins */
#intro {
  color: green;
}
/* Class is less specific */
.highlight {
  color: red;
}
/* Element is least specific */
p {
  color: blue;
}

12. Advanced Selectors

Go beyond simple selectors with **pseudo-classes** (like :nth-child() to select specific children) and **pseudo-elements** (like ::before and ::after to add content with CSS).

/* Selects the 2nd 
  •  (child) */
li:nth-child(2) {
  background: #EDE7F6;
}
/* Adds a decorative element BEFORE the .box */
.box::before {
  content: "► "; /* Must have content */
  color: #5E35B1;
}

    • 13. Shadows & Gradients

    Add depth to your site with box-shadow and text-shadow. Use linear-gradient() to create smooth color transitions for backgrounds.

    .text {
  /* h-offset | v-offset | blur | color */
  text-shadow: 2px 2px 4px #aaa;
}
.box {
  padding: 20px;
  border-radius: 8px;
  /* h-offset | v-offset | blur | spread | color */
  box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2);
  
  /* A simple linear gradient */
  background: linear-gradient(to right, #EDE7F6, #D1C4E9);
}

    14. 2D & 3D Transforms

    The transform property lets you move, scale, rotate, and skew elements. Combine it with :hover for simple effects.

    .box {
  margin: 30px; padding: 10px; background: #5E35B1; color: white;
  transition: transform 0.3s; /* Add transition for smoothness */
}
.box:hover {
  background: #311B92;
}
.t1:hover {
  transform: translateX(20px); /* Move right */
}
.t2:hover {
  transform: rotate(15deg); /* Rotate */
}
.t3:hover {
  transform: scale(1.2); /* Grow */
}

    15. Transitions

    Transitions provide a way to control the speed of an animation when a CSS property changes, such as on :hover. You define which property to animate and how long the transition should take.

    .box {
  width: 100px;
  height: 100px;
  background: #AB47BC;
  color: white;
  padding: 10px;
  
  /* property | duration | timing-function */
  transition: background-color 0.4s ease-out, transform 0.3s ease-in;
}
.box:hover {
  background-color: #4A148C;
  border-radius: 50%; /* No transition = instant */
  transform: translateX(50px);
}

    16. Animations

    For more complex animations, use @keyframes. This lets you define an animation by breaking it into steps (from `0%` to `100%`) and then apply it to an element.

    /* 1. Define the animation */
@keyframes slide-and-fade {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  50% {
    transform: translateX(100px);
    opacity: 0.5;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
/* 2. Apply the animation */
.box {
  width: 100px; height: 50px; background: #7E57C2; color: white;
  animation-name: slide-and-fade;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

    17. Variables (Custom Properties)

    CSS variables let you store values (like colors or sizes) in one place and reuse them. This is great for an easy-to-manage design system. Define them in the :root selector and use them with `var()`.

    :root {
  /* Define variables */
  --primary-color: #5E35B1;
  --text-color: #333;
  --base-padding: 10px;
}
h1 {
  /* Use variables */
  color: var(--primary-color);
  border-bottom: 2px solid var(--primary-color);
}
button {
  background: var(--primary-color);
  color: white;
  padding: var(--base-padding);
}

    18. Flexbox

    Flexbox is a 1-dimensional layout model for arranging items in rows or columns. Set display: flex on a parent container, then use justify-content (main axis alignment) and align-items (cross axis alignment) to position the children.

    .container {
  display: flex;
  justify-content: space-around; /* Horiz. align */
  align-items: center; /* Vert. align */
  background: #f0f0f0;
  height: 150px;
  border: 1px solid #ccc;
}
.item {
  width: 50px; height: 50px; background: #5E35B1;
  color: white; text-align: center; line-height: 50px;
}

    19. Grid

    CSS Grid is a 2-dimensional layout system. Set display: grid and then define your columns and rows with grid-template-columns and grid-template-rows.

    .grid-container {
  display: grid;
  /* 3 equal columns (1fr = 1 fraction) */
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  padding: 10px; background: #f0f0f0;
}
.item {
  background: #AB47BC; color: white;
  padding: 20px; text-align: center;
}
.span2 {
  /* Make this item span 2 columns */
  grid-column: span 2;
}

    20. Responsive (Media Queries)

    Media Queries are the key to Responsive Web Design (RWD). They allow you to apply different CSS rules based on the device's characteristics, like its width.

    .box {
  background: lightblue;
  padding: 20px;
  font-size: 20px;
}
/* If the viewport is 600px wide or less,
  this rule will apply.
*/
@media (max-width: 600px) {
  .box {
    background: tomato;
    color: white;
  }
}

    21. CSS Final Project: Responsive Profile Card

    Let's combine everything to build a stylish, responsive profile card. This will use the box model, fonts, variables, Flexbox, and a media query for small screens.

    :root {
  --primary: #5E35B1;
  --primary-light: #EDE7F6;
  --dark-text: #333;
  --light-text: #777;
}
body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f9;
  display: flex; justify-content: center; align-items: center;
  min-height: 90vh;
}
.card {
  display: flex;
  width: 90%;
  max-width: 500px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  padding: 20px;
  align-items: center;
}
.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 4px solid var(--primary-light);
  margin-right: 20px;
}
.name {
  font-size: 24px; font-weight: bold;
  color: var(--primary); margin: 0;
}
.title {
  color: var(--light-text); margin: 5px 0 15px;
}
.bio {
  color: var(--dark-text); line-height: 1.5; margin-bottom: 20px;
}
.btn {
  background: var(--primary); color: white; padding: 10px 15px;
  border: none; border-radius: 5px; cursor: pointer;
  transition: background-color 0.3s;
}
.btn:hover { background: #4527A0; }

@media (max-width: 480px) {
  .card {
    flex-direction: column; /* Stack vertically */
    text-align: center;
  }
  .avatar { margin-right: 0; margin-bottom: 15px; }
}

    22. Live Practice Editor

    Use this space to experiment. Type your CSS in the left box and your HTML in the right box to see the combined result at the bottom.

    CSS Code

    HTML Code

    Combined Output