🎨beginner

CSS Basics — Making Things Look Good

Learn how to style your HTML with colors, fonts, spacing, and layouts using CSS.

What is CSS?

CSS stands for Cascading Style Sheets. If HTML is the skeleton of a webpage, CSS is the skin, clothes, and makeup. It controls how things look — colors, fonts, sizes, spacing, layout, animations, and more. Without CSS, every website would look like a plain text document from the 1990s.

Adding CSS to HTML

html

<!-- Method 1: Inside a <style> tag -->
<style>
  h1 {
    color: purple;
    font-size: 36px;
  }
  p {
    color: gray;
    line-height: 1.6;
  }
</style>

<!-- Method 2: Inline (not recommended for big projects) -->
<h1 style="color: purple; font-size: 36px;">Hello</h1>

<!-- Method 3: External file (best practice) -->
<link rel="stylesheet" href="styles.css">

CSS Selectors

Selectors tell CSS which elements to style: • h1 — selects all <h1> elements (tag selector) • .card — selects elements with class="card" (class selector) • #header — selects the element with id="header" (ID selector) • * — selects everything (universal selector) Classes are the most common. You can use the same class on many elements.

Essential CSS Properties

css

/* Colors & Text */
color: #333;                /* text color */
background-color: #f5f5f5;  /* background */
font-size: 16px;            /* text size */
font-weight: bold;          /* bold text */
text-align: center;         /* center text */

/* Spacing */
padding: 20px;              /* space inside */
margin: 10px;               /* space outside */

/* Size */
width: 300px;
height: 200px;

/* Borders */
border: 2px solid #ddd;
border-radius: 12px;        /* rounded corners */

/* Shadows */
box-shadow: 0 2px 8px rgba(0,0,0,0.1);

Pro Tip

The fastest way to make any website look better: add border-radius (rounded corners), box-shadow (subtle depth), and consistent padding. These three properties alone transform amateur-looking pages into professional ones.

Try It Yourself

Take any plain HTML page and style it with CSS. Add: a background color, change the font, add padding to all sections, round the corners on any boxes, and add a subtle shadow to at least one element.

CSS Flexbox — Layouts Made Easy

Ready to build?

Put what you learned into practice — pick a project and start coding.

Start Building Free