If you have read through my previous blog on Beginning with HTML, you already have a basic understanding of how to create a simple web page. HTML gives the page its structure, but it still needs design, spacing, color, and alignment.

This is where CSS comes in. CSS helps transform a plain document into an interface that is easier to read, use, and recognize.

What Is CSS?

CSS stands for Cascading Style Sheet. HTML defines the structure and content of a web page, while CSS controls how that HTML looks.

CSS can change text size, font, color, margins, padding, background colors, border styles, and layout. It can also position elements on the page.

One of the most useful parts of CSS is that it lets you make global style changes. For example, if you define how every h1 should look, every matching heading can follow the same visual style across the site.

CSS also helps reduce differences between browser defaults, making a page feel more consistent across browsers and devices.

How Does It Work?

The "cascading" part of CSS is important. Browsers read style definitions from top to bottom. A style written later can override a style written earlier when both target the same element with comparable specificity.

There are three common ways to add CSS to a web page: internal CSS, external CSS, and inline CSS.

Internal CSS

Internal CSS is written inside a <style> tag in the <head> section of an HTML document. It can be useful for a single page, but it becomes repetitive when used across many pages. 

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
    <style>
      body {
        background-color: blue;
      }

      h1 {
        color: red;
        padding: 60px;
      }
    </style>
  </head>
  <body>
    <h1>This is a heading.</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

External CSS

With external CSS, a page links to a separate .css file. This is more efficient for larger websites because you can update styles in one place and apply them across multiple pages.

  1. Create a new CSS file and add style rules.
  2. Link that CSS file from the <head> section of your HTML.
body {
  background-color: blue;
}

h1 {
  color: red;
  padding: 60px;
}
<link rel="stylesheet" type="text/css" href="style.css" />

Remember to update style.css to the actual file name you are using.

Inline CSS

Inline CSS styles a specific HTML element by using the style attribute. It can be useful for one-off examples, but it is not recommended for maintainable websites because styles become scattered across the markup. 

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <h1 style="color: white; padding: 30px;">This is a heading.</h1>
    <p style="color: white;">This is a paragraph.</p>
  </body>
</html>

How CSS Gets Applied

CSS is applied to HTML elements by declaring styles for a selector. A style declaration looks like this: 

selector {
  property: value;
}

The selector is the content you want to target. It can be an HTML element such as p, or a class name such as .container.

A property is a predefined CSS term such as font-family, font-size, or color.

The value is the style you assign to that property. For example: 

p {
  font-family: Arial;
  font-size: 16px;
  color: gray;
}

This rule tells the browser to display every paragraph in Arial, at 16 pixels, and in gray.

I hope this provided a clear introduction to CSS and how it helps shape the visual layer of a web page.

Peace!