🎨 Introduction to CSS – Styling the Web

Vaishnavi Sanjay DesaiVaishnavi Sanjay Desai
3 min read

When you open a beautiful, colorful, and well-aligned website, it's all thanks to CSS – Cascading Style Sheets. While HTML provides the structure of a webpage, CSS controls how that structure looks. In this post, we’ll explore the key concepts of CSS in a way that’s easy to understand for beginners.

  1. What is CSS?

    CSS (Cascading Style Sheets) is a language used to style HTML elements. It allows you to control the colors, layouts, fonts, sizes, and much more on your webpage.

    Example:

     <p style="color: blue;">This text is blue.</p>

    You can change styles without modifying the HTML structure, keeping content and design separate.

  2. Ways to Add CSS

    There are three main ways to use CSS in your HTML document:

    • ✅ Inline CSS – Inside the HTML tag (not recommended for large projects)
    <h1 style="color: red;">Hello</h1>
  • ✅ Internal CSS – Inside a <style> tag in the <head> section
    <style>
      p {
        color: green;
      }
    </style>
  • ✅ External CSS – Linked from an external file (recommended)
    <link rel="stylesheet" href="styles.css">

  1. CSS Selectors

    Selectors are used to target HTML elements you want to style.

    • Element Selector: p { } targets all <p> tags

    • Class Selector: .box { } targets elements with class "box"

    • ID Selector: #header { } targets an element with ID "header"

    .box {
      background-color: yellow;
    }

  1. CSS Properties

    CSS uses property-value pairs to style elements.

    Common properties:

    • color: Text color

    • background-color: Background color

    • font-size: Size of text

    • margin: Space outside the element

    • padding: Space inside the element

    • border: Outline around the element

     h1{
      color: purple;
      font-size: 32px;
    }

  1. Box Model

    Everything in CSS is a box! The box model consists of:

    1. Content – Text or image

    2. Padding – Space around content

    3. Border – Line around the padding

    4. Margin – Space outside the border

Understanding this helps in designing neat layouts.

  1. Positioning Elements

    CSS lets you control where elements appear using:

    • static (default)

    • relative

    • absolute

    • fixed

    • sticky

Each has different behavior in how it interacts with the document flow.

  1. Responsive Design

    To make your site look good on all devices, CSS includes tools like:

    • Media Queries
    @media (max-width: 600px) {
      body {
        background-color: lightblue;
      }
    }
  • Flexbox and Grid for layouts that adapt to screen size.

CSS is what brings life to HTML pages. It makes your website not only functional but also visually appealing and user-friendly. As you dive deeper, you'll discover powerful features like animations, transitions, and layout systems that make modern web design possible.

So go ahead, experiment with styles, and create something beautiful! 🎨💻

10
Subscribe to my newsletter

Read articles from Vaishnavi Sanjay Desai directly inside your inbox. Subscribe to the newsletter, and don't miss out.

CSS Animationstyled-components

Written by

Vaishnavi Sanjay Desai
Vaishnavi Sanjay Desai