Topic Overview and Introduction

Welcome to CSS (Cascading Style Sheets), a pivotal tool for configuring the aesthetics of a website. In this lesson, we will delve into the basics of CSS and learn how to apply styles to HTML elements. By the end of this exploration, you will be capable of crafting essential styles and applying them to HTML elements using various methods. Let's dive in!

Unveiling the Magic of CSS

CSS lends style to an HTML structure. A CSS rule consists of a selector and a declaration block. In this instance, our aim is to turn an HTML heading blue:

h1 {
    color: blue;
}

In this snippet, "h1" is the selector, while "color: blue;" is the declaration block.

The Changing Faces of CSS: Inline, Internal and External Stylesheets

CSS can be implemented in three distinct ways — Inline, Internal, and External.

Inline Styling

Inline CSS allows us to style directly onto HTML elements using the style attribute. It's akin to hand-painting each word on a page:

<p style="color:red;">I'm a red paragraph!</p>
<p>I'm not red because I haven't been explicitly styled</p>

While perfect for quick fixes, combining many inline styles can clutter our HTML.

Internal Styling

Internal CSS gathers all styles in a <style> tag within the HTML's <head>, creating a uniform look for the entire page:

<head>
   <style>
      p { color: purple; }
   </style>
</head>
<body>
   <p>I am a purple paragraph.</p>
   <p>Me too!</p>
</body>

This method ensures all paragraphs adopt the same style, bringing consistency across the page.

External Styling

For larger projects spanning many HTML pages, external CSS stores styles in a separate .css file, which is linked to each HTML page. This acts like a uniform for an entire fleet of spaceships:

HTML page:

<head>
   <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
   <p>Greetings, cosmos!</p>
</body>

CSS page:

p {
   color: blue;
}

All HTML pages linked to the CSS file will display paragraph text in blue.

Sign up
Join the 1M+ learners on CodeSignal
Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal