Skip to main content

📝 Latest Blog Post

Your First Webpage, Styled: A Beginner's Guide to CSS

Your First Webpage, Styled: A Beginner's Guide to CSS

Your First Webpage, Styled: A Beginner's Guide to CSS

Learn how to use Cascading Style Sheets to make your website look amazing.

Welcome to the world of web styling! While HTML provides the **structure** for your webpage, **CSS (Cascading Style Sheets)** provides the **style**. Think of HTML as the skeleton and CSS as the clothes, hair, and makeup that make it look good. Without CSS, every website would be a plain, unformatted page of text and links. Let's learn the fundamentals of CSS to bring your first webpage to life.

The Basic CSS Rule

A CSS rule is made up of a **selector** and a **declaration block**. The selector targets the HTML element you want to style, and the declaration block contains the styles you want to apply.


h1 {
  color: blue;
  font-size: 36px;
}

In this example, the `h1` is the **selector**. The code inside the curly braces `{}` is the **declaration block**, which contains two **declarations** separated by semicolons. Each declaration has a **property** (`color`) and a **value** (`blue`).

Adding CSS to Your HTML

There are three main ways to add CSS to your HTML document. For beginners, the **external stylesheet** is the best practice as it keeps your code organized and clean.

  1. External Stylesheet (Recommended): Create a separate file named `style.css` and link it to your HTML in the `` section. This is the most common method for large projects. 
    
<head>
  <link rel="stylesheet" href="style.css">
</head>
  2. Internal Stylesheet: Place your CSS rules inside a `