CSS Beginner

CSS Basics and Syntax

Imran Nadwi
Imran Nadwi
305 views 25 min read
Share: Twitter Facebook LinkedIn
Table of Contents

What is CSS?

CSS stands for Cascading Style Sheets. It's the language we use to describe how HTML elements should look on a webpage. While HTML provides the content and structure, CSS handles the visual presentation—colors, layouts, fonts, spacing, animations, and more.

Think of CSS like the interior design of a website. HTML is the blueprint (walls, rooms, doors), and CSS is how you paint, decorate, and arrange the furniture.

Why CSS Matters

  • Separation of Concerns: Keep content separate from styling, making your code cleaner and easier to maintain
  • Reusability: Apply the same styles to many elements without repeating code
  • Maintainability: Update styles in one place and it affects the entire website consistently
  • Responsiveness: Create designs that automatically adapt to different screen sizes
  • Performance: External CSS files are cached by browsers, reducing file sizes and improving loading speed

CSS Syntax and Structure

Every CSS rule follows this simple and consistent pattern:

selector {
    property: value;
    property: value;
}

Let's break down each part:

  • Selector: Targets which HTML element(s) you want to style
  • Property: Specifies what aspect you want to change (like color, size, position)
  • Value: Defines how you want to change it (the specific color, size measurement, etc.)
  • Curly Braces {}: Enclose all the properties and values for that selector
  • Semicolon; Ends each property-value pair

Real World Example

p {
    color: blue;
    font-size: 16px;
    line-height: 1.6;
}

This CSS rule says: "Make all paragraph (<p>) elements blue, set their text size to 16 pixels, and give them a line-height of 1.6 for better readability."

Three Ways to Add CSS to Your HTML

1. Inline CSS (Quick Testing Only)

Add styles directly to individual HTML elements using the style attribute:

<p style="color: blue; font-size: 16px;">This is blue text</p>

When to use: Quick testing and debugging

Pros: Styles apply immediately, no separate file needed

Cons: Very hard to maintain, you can't reuse styles across elements, mixes content with presentation, defeating the purpose of CSS

2. Internal CSS (For Single Pages)

Place CSS in the <head> section of your HTML file using a <style> tag:

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            color: blue;
            font-size: 16px;
        }
        
        h1 {
            color: darkblue;
            text-align: center;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <h1>Welcome</h1>
    <p>This is a paragraph</p>
</body>
</html>

When to use: Single-page websites or quick prototypes

Pros: All styles in one place, good for single-page websites

Cons: Styles don't transfer between pages, HTML and CSS are still mixed together, harder to maintain as projects grow

3. External CSS (Professional Best Practice)

Create a completely separate CSS file and link it in the <head>. This is the most professional and scalable approach:

<!-- In your HTML head -->
<link rel="stylesheet" href="styles.css">

<!-- In styles.css file -->
p {
    color: blue;
    font-size: 16px;
    line-height: 1.6;
}

h1 {
    color: darkblue;
    text-align: center;
    margin-bottom: 20px;
}

When to use: All professional websites and real projects

Pros: Reusable across all pages, clean HTML, easy to maintain, better performance (browser caches CSS), scalable as your project grows

Cons: Requires an extra file (which is actually a major advantage for team projects)

Common CSS Properties You'll Use Every Day

Text and Font Styling

color: #333333;              /* Text color - hex value */
font-family: Arial, sans-serif; /* Which font to use */
font-size: 16px;             /* Size of text */
font-weight: bold;           /* How thick text appears */
text-align: center;          /* Align text left, center, right, or justify */
line-height: 1.6;            /* Space between lines - improves readability */
text-decoration: underline;  /* Add underline, overline, line-through */

Colors and Backgrounds

background-color: lightblue; /* Background color of element */
background-image: url(...);  /* Set a background image */
opacity: 0.8;                /* Transparency (0 = invisible, 1 = fully opaque) */

Spacing Properties

margin: 20px;                /* Space outside the element border */
padding: 15px;               /* Space inside the element border */
width: 300px;                /* Width of element */
height: 200px;               /* Height of element */

Borders

border: 2px solid black;     /* Width, style (solid, dashed, dotted), and color */
border-radius: 8px;          /* Round the corners */

Quick Summary

You now understand:

  • What CSS is and why it's important for web development
  • The basic CSS syntax with selectors, properties, and values
  • Three ways to add CSS to your HTML pages and when to use each
  • Common CSS properties for styling text, colors, spacing, and more

In the next lessons, we'll learn about CSS selectors, the box model, layouts, and much more. CSS is a vast topic, but these fundamentals are the foundation for everything you'll do.

Next CSS Selectors and Specificity