Section 1 - Instruction

Last time you learned what CSS is and how it styles HTML. But how exactly do you connect CSS to your HTML pages?

There are three main ways to apply CSS styles to your HTML. Each method has its own advantages and best use cases.

Engagement Message

Can you name the three methods of adding CSS to HTML?

Section 2 - Instruction

The first and most common method is external stylesheets. This means creating a separate CSS file (like styles.css) and linking it to your HTML.

You connect them using: <link rel="stylesheet" href="styles.css"> in your HTML's <head> section.

Engagement Message

What's the main benefit of using a single external stylesheet for an entire website?

Section 3 - Instruction

The second method is internal styles. You write CSS directly inside your HTML file using <style> tags in the <head> section.

This keeps everything in one file, but the CSS only applies to that specific HTML page.

Engagement Message

When might you want to keep CSS and HTML in the same file for a single-page project?

Section 4 - Instruction

The third method is inline styles. You add CSS directly to individual HTML elements using the style attribute.

Example: <p style="color: red;">This text is red</p> applies styling to just that one paragraph.

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