Infoplanet
    Enquire Now
    Staff LoginStudent Login

    CSS Basics for Beginners

    Atul Kabra3 min readUpdated

    CSS (Cascading Style Sheets) is the language that controls how a web page looks — colours, fonts, spacing, layout, and more. If HTML is the structure of a house (walls and rooms), CSS is the paint, the furniture, and the lighting. You write CSS rules that target HTML elements and tell the browser how to display them.

    How a CSS rule is built

    Every CSS rule has the same shape: a selector that picks which elements to style, and a declaration block of properties and values:

    /* p is the selector — it targets every <p> element.
   Each line inside the braces is a property: value declaration. */
p {
  color: #333333;       /* text colour */
  font-size: 16px;      /* text size */
  line-height: 1.5;     /* spacing between lines */
}

    Where CSS lives

    You can attach CSS in three ways, but one is strongly preferred:

    <!-- BEST: an external stylesheet, linked in the <head>.
     Keeps styling separate from structure and reusable across pages. -->
<link rel="stylesheet" href="styles.css" />

    Inline styles (a style attribute on a tag) and internal <style> blocks exist too, but external stylesheets keep your project organised and your HTML clean.

    Selectors: choosing what to style

    Selectors are how you target elements. The three you will use most:

    /* Type selector: every element of this kind */
h1 { color: navy; }

/* Class selector: any element with class="card". Reusable. */
.card { padding: 16px; }

/* ID selector: the single element with id="header". Unique per page. */
#header { background: #f5f5f5; }

    Classes are your workhorse — you can apply the same class to many elements. IDs should be unique on a page.

    Want to learn this properly?

    Join the waitlist for our courses — beginner-friendly, project-first classes in Jalgaon.

    Browse courses

    The box model

    This is the single most important concept in CSS layout. Every element is a rectangular box made of four layers, from the inside out:

    1. Content — the text or image itself.
    2. Padding — space inside the box, between content and border.
    3. Border — the line around the padding.
    4. Margin — space outside the box, pushing other elements away.
    .card {
  width: 300px;
  padding: 20px;            /* inner breathing room */
  border: 1px solid #ccc;   /* visible edge */
  margin: 16px;             /* gap from neighbours */

  /* This line makes width include padding and border —
     far more predictable. It is a near-universal best practice. */
  box-sizing: border-box;
}

    Setting box-sizing: border-box is one of the first things experienced developers do, because it makes width behave the way most people expect.

    The "cascade" in Cascading Style Sheets

    When multiple rules target the same element, the browser decides which wins based on specificity (how specific the selector is) and order (later rules override earlier equal ones). An ID selector beats a class selector, which beats a type selector. Understanding this stops the classic "why won't my style apply?" frustration.

    Common mistakes

    • Fighting the cascade with !important. Reaching for !important to force a style usually hides a specificity problem. Use it sparingly, if ever.
    • Mixing structure and style. Putting style="..." on every tag makes pages hard to maintain. Use classes and an external stylesheet.
    • Forgetting box-sizing: border-box. Without it, padding and borders add to the declared width and break layouts.
    • Using IDs for styling reusable components. IDs are unique; if you want to style many similar things, use a class.
    • Hard-coding the same colour everywhere. Modern CSS supports custom properties (variables) so you can define a colour once and reuse it.

    FAQ

    Why is it called "cascading"? Because styles flow down and combine: browser defaults, your stylesheet, and more specific rules layer on top of each other in a predictable order.

    Should beginners learn CSS frameworks first? Learn plain CSS first. Frameworks are faster once you understand the box model, selectors, and the cascade — otherwise they feel like magic you can't debug.

    Keep learning

    Want to build for the web? Explore our courses in Jalgaon.

    Want to learn this properly?

    Join the waitlist for our courses — beginner-friendly, project-first classes in Jalgaon.

    Browse courses
    Atul Kabra

    Founder, Infoplanet

    Atul Kabra founded Infoplanet in 2001 and has spent over two decades teaching programming — C, C++, Java, databases and more — to students across Maharashtra.

    Related guides