Skip to main content
CSS for Beginners
CHAPTER 01 Beginner

CSS Basics for Beginners

Updated: May 10, 2026
15 min read

Introduction

What is CSS?

CSS stands for Cascading Style Sheets. If HTML is the skeleton of a webpage, CSS is the skin, clothing, and makeup. It dictates how the HTML elements are displayed on screen.

How CSS Works

CSS works by selecting an HTML element (like an <h1> or a <div>) and declaring specific visual rules for it (like color: blue;).

Types of CSS

  1. 1. Inline CSS: <p style="color: red;">
  1. 2. Internal CSS: Inside a <style> tag in the HTML <head>.
  1. 3. External CSS: Written in a separate .css file and linked: <link rel="stylesheet" href="styles.css">.

CSS Syntax

css
123456 
/* Selector */
h1 {
    /* Declaration Block */
    color: blue;       /* Property: Value; */
    font-size: 24px;   /* Property: Value; */
}

Selectors

  • Element Selector: p { color: gray; }
  • Class Selector: .btn-primary { background-color: blue; }
  • ID Selector: #main-header { font-size: 30px; }
  • Universal Selector: * { margin: 0; }

Colors & Backgrounds

  • *Names*: red, blue
  • *Hex Codes*: #FF0000
  • *RGB*: rgb(255, 0, 0)

Borders & The Box Model

Every HTML element is a box:
  1. 1. Content: Actual text/image.
  1. 2. Padding: Transparent space *inside* the border.
  1. 3. Border: Outline around padding.
  1. 4. Margin: Transparent space *outside* the border.
css
12345 
.box {
    padding: 20px;
    border: 2px solid black;
    margin: 30px;
}

Typography

css
123456 
p {
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}

Display & Positioning

  • display: block: Takes full width.
  • display: inline: Takes necessary width.
  • position: static: Default.
  • position: absolute: Pulled out of flow.
  • position: fixed: Sticks to viewport.

Flexbox

css
12345 
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

CSS Grid

css
12345 
.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
}

Responsive Design

css
12345 
@media (min-width: 768px) {
    .box {
        width: 50%;
    }
}

Transitions & Hover Effects

css
123456 
.btn {
    transition: background-color 0.3s ease;
}
.btn:hover {
    background-color: darkblue;
}

Best Practices

  1. 1. Group related rules.
  1. 2. Use Classes, Not IDs.
  1. 3. Use logical naming conventions.
  1. 4. Reset CSS: * { margin: 0; padding: 0; box-sizing: border-box; }

Common Beginner Mistakes

  1. 1. Forgetting semicolons ;.
  1. 2. Confusing Margin and Padding.
  1. 3. Using Inline Styles.
  1. 4. Overusing !important.
  1. 5. Spelling errors.
  1. 6. Forgetting units (width: 100 instead of 100px).
  1. 7. Not building Mobile-First.
  1. 8. Targeting generic tags too much.
  1. 9. Misunderstanding Box Model.
  1. 10. Using absolute positioning for everything.

Finish this Chapter

Save your progress on your learning path and prepare for coding interview challenges.

Next Chapter CSS Selectors and Specificity

Discussion

Join the discussion

Log in or create a free account to participate.

Sort: ·

Explore More

📖 Related Tutorials 6

❓ Related Quizzes 6

🎥 Related Videos 1