CSS for Beginners: Make Your Webpage Actually Look Good

Great job finishing the HTML article! Now you have a page with structure — headings, paragraphs, lists, links. But it looks like it was written in 1994. Times New Roman. White background. Black text. Boring.

Enter CSS — the language that makes pages beautiful. Color, spacing, fonts, animations, layouts, even making the page change when you hover over things. CSS is where your webpage stops looking like a Word document and starts looking like a design.

In this article, I'll teach you CSS the way I wish someone had taught me: slowly, with pictures, with explanations of why things work the way they do. By the end, you'll be able to read a stylesheet and understand it, and you'll have built your first beautifully styled page.

What is CSS?

CSS stands for Cascading Style Sheets. Three words, each important:

• Cascading — styles cascade down. If you set a color on the body, all the text inside inherits that color — unless they say otherwise. We'll see why this is wonderful.


• Style — how things look. Color, size, position, font, background, animation.


• Sheets — the styles live in their own files (or sections), separate from the HTML.

HTML is the nouns ("here is a heading"). CSS is the adjectives ("the heading is orange, big, and centered"). JavaScript is the verbs ("when you click the heading, do something").

The point of separating CSS from HTML is that one stylesheet can style a thousand pages. Change one file, a thousand pages update. That's why the web works.

The three ways to add CSS to a page

1. Inline — in the tag itself (don't do this)

<p style="color: red;">Hello</p>

Works, but you have to repeat yourself for every paragraph. Avoid.

2. Internal — in a block in the (okay for small things)

  

    p { color: red; }

  

Fine for a one-page experiment. Not great for real sites.

3. External — in a separate .css file (the right way)

The link tag tells the browser "go fetch this CSS file and use it." One file, many pages, full power. This is what you should do for any real project.

Anatomy of a CSS rule

CSS is made of rules. A rule has two parts: a selector (who) and a declaration block (what they get).

p {

  color: orange;

  font-size: 20px;

}

Reading this in English: "Hey browser, find every

tag, and make their text orange and 20 pixels tall." The p is the selector. The stuff inside the curly braces is the declaration block. Each line inside is a declaration: a property, a colon, a value, a semicolon.

Selectors: who are you styling?

Selectors are the part most beginners struggle with, so let's spend a real moment on them.

Type selector — matches every tag of a kind

h1 { color: orange; }   /* every h1 on the page */

Class selector — matches anything with that class

In your HTML you write

Hello

. In your CSS:

.intro { font-size: 1.2rem; }   /* every element with class="intro" */

The dot means "class." You'll use classes constantly. They're how you mark "this is a special one" without making a whole new tag.

ID selector — matches the one element with that ID

In HTML: .... In CSS:

#hero { background: black; }   /* the one element with id="hero" */

The hash means "ID." Use IDs sparingly — there should be only one of any given ID per page.

Descendant selector — "X inside Y"

.card h2 { color: orange; }

"Every h2 inside anything with the class card." Read it left to right. Outside, then inside.

Direct child selector — "X directly inside Y"

.card > h2 { color: orange; }

Same idea, but only for the immediate child, not grandchildren. The > means "directly inside."

Pseudo-class — a state

a:hover { color: pink; }   /* when the mouse is over a link */

The :hover is a pseudo-class. The browser adds it automatically when you hover. There are dozens: :focus, :active, :checked, :first-child, :last-child, :nth-child(3) (the third child), and many more.

The Box Model: the most important concept in CSS

Every single thing on a webpage is a rectangular box. A heading is a box. A paragraph is a box. A button is a box. An image is a box. Get this one model into your head, and 80% of CSS suddenly makes sense.

From inside out, every box has four layers:

1. Content — where the actual text or image lives. Its size is set by width and height.


2. Padding — space between the content and the border. Like the foam inside a picture frame. Set with padding.


3. Border — the line around the padding. Set with border.


4. Margin — space between this box and other boxes around it. Like personal space. Set with margin.

When you set a width, you're setting the width of the content only. Add the padding and border, and the total visual size gets bigger. This trips up everyone. The fix:

box-sizing: border-box;

Add this to the top of your stylesheet, and from now on width means "the total size including padding and border." Trust me on this one.

Layout: getting things side by side

By default, every block element (,

, ) takes up the full width and stacks vertically. To put things side by side, you have options. In 2025, you'll use one of these three:

Flexbox — for one-dimensional layouts (a row or a column)

.row {

  display: flex;

  gap: 20px;          /* space between items */

}

.row > .item {

  flex: 1;            /* each item takes equal space */

}

That's it. You now have a row of three equal-width cards with 20 pixels between them. Flexbox is the right tool for navbars, button groups, anything in a line.

Grid — for two-dimensional layouts (rows AND columns)

.grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 24px;

}

Three equal columns, with 24 pixels of gap. Change 3 to 4 and you have four columns. Grid is the right tool for image galleries, dashboards, full page layouts.

Don't use floats. Don't use tables for layout. Don't use absolute positioning unless you know why.

Responsive: one site, every screen

People will visit your site on a 6-inch phone, a 13-inch laptop, and a 32-inch monitor. Your site needs to look good on all of them. That's called responsive design.

The magic tool is the media query:

.grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

}



@media (max-width: 768px) {

  .grid {

    grid-template-columns: 1fr;   /* on small screens, one column */

  }

}

Read it in English: "By default, three columns. But if the screen is 768 pixels wide or smaller, switch to one column." The browser watches the screen size and applies the right rule automatically.

Common breakpoints: 480px (small phone), 768px (tablet), 1024px (small laptop), 1440px (desktop). You don't need more than those.

Putting it all together: style the page from the HTML article

Remember the HTML file you made? Open the same folder, create style.css next to it, link them:

Now write this in style.css:

/* 1. Make everything use the easier box model */

* { box-sizing: border-box; margin: 0; padding: 0; }



body {

  font-family: system-ui, -apple-system, sans-serif;

  background: #0d1117;

  color: #e9ecf5;

  line-height: 1.7;

  padding: 60px 20px;

}



h1 {

  font-size: 3rem;

  background: linear-gradient(135deg, #ff8a3d, #ff3d8a);

  -webkit-background-clip: text;

  background-clip: text;

  color: transparent;

  margin-bottom: 20px;

}



h2 {

  color: #ff8a3d;

  margin: 40px 0 16px;

  border-bottom: 2px solid #ff8a3d;

  padding-bottom: 8px;

}



p {

  margin-bottom: 16px;

  max-width: 700px;

}



ul {

  margin: 0 0 20px 20px;

}



a {

  color: #3dffff;

  text-decoration: none;

  border-bottom: 2px solid currentColor;

}



a:hover {

  color: #ff3d8a;

}

Refresh the page. Boom. Your plain HTML is now a sleek dark-themed site with a gradient title, an orange-accented heading, and links that turn pink on hover. From zero to a real design in 30 lines of CSS.

Your next step

You now know the three ways to add CSS, the anatomy of a rule, the box model, the basics of flexbox and grid for layout, media queries for responsive design, and you've already written a working stylesheet. That's everything you need to style real pages.

The next article in this series is JavaScript — the language that makes pages do things. When you click a button and a menu opens, when you fill a form and it tells you if your email is valid, when new content appears without the page reloading — that's JavaScript.

Until then, a small project: take the page you styled, and add a hover effect on the heading. When the user hovers, the gradient colors swap. Hint: :hover and transition are your friends.