EasyCode365EasyCode365

What is CSS?

Introduction

CSS stands for Cascading Style Sheets. It is the language used to style web pages.

HTML gives a page its structure. CSS controls how that structure looks: colors, spacing, fonts, backgrounds, borders, and layout.

A web page can exist without CSS, but it will usually look plain and unstyled. CSS turns structured content into a clearer, more readable, and more visually useful page.

The word cascading means that multiple style rules can apply to the same element. When rules conflict, the browser decides which rule wins based on the cascade, specificity, and order.

HTML vs CSS

HTML and CSS are different languages, but they work together.

  • HTML creates the content and structure, such as headings, paragraphs, lists, buttons, and sections.
  • CSS controls the visual design, such as colors, font sizes, spacing, and layout.

Think of building a house:

  • HTML is the foundation, frame, rooms, and walls.
  • CSS is the paint, furniture, lighting, and decoration.

You need the structure first. Then CSS can style that structure.

CSS and semantic HTML

CSS can style any HTML element, but it works best when your HTML is meaningful.

For example, using elements like <main>, <section>, <h1>, <p>, and <button> makes the page easier to understand before any styles are added.

Then CSS can improve the design without changing the meaning of the content.

Basic CSS rule

A CSS rule tells the browser how selected HTML should look.

Every CSS rule has three main parts:

  1. Selector: the HTML element or group of elements you want to style.
  2. Property: the visual feature you want to change.
  3. Value: the setting you choose for that property.

Here is a short example:

Read-only

In this rule:

  • h1 is the selector.
  • color is the property.
  • blue is the value.

CSS Selector, Property, Value

Ways to add CSS

There are three common ways to add CSS to an HTML document.

  • Inline CSS: write styles directly inside an HTML element with the style attribute.
  • Internal CSS: write CSS rules inside a <style> tag in the HTML document.
  • External CSS: write CSS in a separate file, such as style.css, and link it to the HTML page.

External CSS is the best long-term approach for real websites because many pages can share the same stylesheet.

Runnable example

Here is a small HTML document that uses an internal <style> tag.

Click Show Output to see how CSS changes the page.

Can edit
<!doctype html>
<html>
  <head>
    <style>
      h1 {
        color: darkblue;
      }

      p {
        font-size: 18px;
      }

      button {
        background-color: green;
        color: white;
      }
    </style>
  </head>
  <body>
    <main>
      <h1>Welcome to CSS!</h1>
      <p>This is my first styled paragraph.</p>
      <button>Click Me</button>
    </main>
  </body>
</html>

Mini exercise

Edit the runnable example above.

Try to make these changes:

  1. Change the h1 heading color to purple.
  2. Change the p paragraph size to 22px.
  3. Change the button text color to black.
  4. Change the button background color to yellow.

Then click Show Output and check the preview.

Summary

  • CSS stands for Cascading Style Sheets.
  • HTML creates the page structure, while CSS controls the visual design.
  • A CSS rule usually has a selector, property, and value.
  • CSS can be added inline, internally with <style>, or externally with a stylesheet file.
  • External stylesheets are the best practice for larger websites.

Keep learning

Continue learning CSS step by step by practicing with small examples and changing one style at a time.