Styling Web Pages with CSS: A Beginner's Guide to Cascading Style Sheets

Learn the fundamentals of CSS and how to style your web pages. This tutorial covers the three main ways to add CSS (inline, internal, external stylesheets), providing a foundational understanding of this essential web development technology.

Styling Web Pages with CSS

What is CSS?

Cascading Style Sheets (CSS) is a language used to style and layout web pages. It controls aspects like text color and size, spacing between elements, background images, and how the page looks on different devices. The "cascading" part means that styles applied to parent elements often apply to their children unless overridden.

Ways to Use CSS

You can add CSS to your HTML in three main ways:

  1. Inline Styles: Directly within an HTML element using the style attribute. This is generally less preferred for larger projects.
  2. Internal Stylesheet: Within the <style> tag inside the <head> section of an HTML document.
  3. External Stylesheet: In a separate .css file, linked to your HTML using the <link> tag in the <head>.

Inline Style Example:

HTML

<h1 style="color:blue;">This is a blue heading</h1>

Internal Stylesheet Example:

HTML

<head>
  <style>
    h1 { color: blue; }
    p { color: red; }
  </style>
</head>

External Stylesheet Example:

HTML

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

The external stylesheet (styles.css) would contain the CSS rules.

Common CSS Properties

Here are a few commonly used CSS properties:

  • color: Sets the text color.
  • font-family: Sets the font.
  • font-size: Sets the font size.
  • border: Adds a border around an element.
  • padding: Adds space between the content and the border.
  • margin: Adds space outside the border.

Example using some properties:

CSS

h1 {
  color: blue;
  font-size: 2em;
}
p {
  color: green;
  border: 1px solid black;
  padding: 10px;
  margin: 20px;
}

Linking to External Stylesheets

External stylesheets can be linked using a full URL or a relative path. Relative paths are relative to the HTML file's location.