CSS Tutorial: Adding Style To Your Webpage

Estimated study time: 5 minutes

Ok, you followed my HTML tutorial for beginners and know how to create a basic webpage. But the thing looks dull, right? I’ve mentioned Cascading Style Sheets (CSS) a couple of times already, and now it’s time to dive into this subject. It’s time to style our pages with this CSS tutorial for beginners!

Why this CSS Tutorial?

You’re about to learn the basics of Cascading Style Sheets (CSS) using Web Developer Land’s CSS Tutorial. Reasons why you might want to start with this tutorial instead of all the other (terrific) resources out there:

  • We’ll go into some of the basics behind CSS that are often skipped elsewhere, leaving you with large gaps in your knowledge
  • I provide lots of interactive examples.
  • I’ll share a curated set of resources to deepen your knowledge.
  • It’s completely free.

Convinced? OK – – Let’s dive right in!

What is CSS?

CSS describes how HTML elements must be displayed on:

  • screen (in browser),
  • paper (when printing),
  • speech (for speech syntesizers)

The ‘cascading’ in Cascading Style Sheets refers to the fact that styling rules cascade down from several sources. CSS has a hierarchy, and styles of higher precedence overwrite rules of lower precedence.

For example, a specific style might be applied at the document root level, like picking a font to use. This style cascades down to all the elements in the document hierarchy that the style applies to. However, you can override the style with a more specific rule. E.g., you might want to give your headers another font.

If this sounds vague, don’t worry. It will become more clear as you read on.

How to insert CSS into a webpage

There are three ways to include CSS in a webpage:

  1. Inline the styles in an element, with the style attribute
  2. Embedding the styles in the page header, with style tags
  3. Linking to an external file that contains the styles

Adding inline CSS

When to use this

Example”

Embedding

CSS is always placed in the head-section of your webpage, and enclosed by <style> .. </style> tags.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .redandbold {
        color: red;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <p class="redandbold">Is this red? And bold?</p>
    <p>It sure is!</p>
  </body>
</html>

Linking to a CSS file

To be continued.

How to continue this CSS Tutotial

Each page has links at the top and bottom. Follow these links to navigate to the next and previous topics in order. If you’re reading this on a device with decent screen width, there’s a global menu to your right. On small screens, like phones, the menu is located at the bottom. This menu gives an overview of all the topics discussed. It’s also an indicator of how far you are in the tutorial.

Leave a Comment