Basic CSS Syntax – Step by Step Guide

2/27/2025

introduction to css basic syntax and structure

Go Back

Basic CSS Syntax – Step by Step Guide

CSS (Cascading Style Sheets) is the language used to style web pages, making them visually appealing and user-friendly. Understanding CSS syntax is essential for anyone looking to design and customize websites effectively. In this step-by-step guide, we will break down the fundamental components of CSS syntax and how they work.

introduction to css basic syntax and structure

Understanding Basic CSS Syntax

CSS consists of rules that define the appearance of HTML elements. A CSS rule has three main parts:

  • Selector: Specifies the HTML element to be styled.
  • Property: Defines the aspect of the element to be styled (e.g., color, font size).
  • Value: Specifies the setting for the property.

Basic CSS Rule Structure

selector {
    property: value;
}

Example:

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

In this example:

  • p is the selector (targets all <p> elements)
  • color and font-size are properties
  • blue and 16px are values

Step-by-Step Guide to Writing CSS

Step 1: Select an HTML Element

Before applying CSS, identify the element you want to style. Example:

<p>This is a sample paragraph.</p>

Step 2: Define a CSS Rule

Write a CSS rule that targets the <p> element:

p {
    color: green;
    font-weight: bold;
}

This changes all paragraph text to green and makes it bold.

Step 3: Apply CSS to Your Webpage

CSS can be applied in three ways:

  • Inline CSS (inside the HTML tag)
  • Internal CSS (inside a <style> tag in the <head> section)
  • External CSS (linking an external .css file)

Example of External CSS:

<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

Step 4: Use Multiple CSS Rules

You can apply multiple CSS rules to different elements:

h1 {
    color: red;
    text-align: center;
}
button {
    background-color: blue;
    color: white;
    padding: 10px;
}

Step 5: Understanding CSS Comments

Use comments to document your CSS code and make it easier to understand:

/* This sets the background color for the body */
body {
    background-color: lightgray;
}

Conclusion

Understanding basic CSS syntax is essential for creating visually appealing websites. By following these simple steps, you can start styling HTML elements efficiently. As you practice more, you’ll gain better control over your website’s design.

Stay tuned for more CSS tutorials!

Table of content