How to Include CSS

There are three ways of inserting a style sheet into an HTML document: external CSS, internal CSS, and inline CSS. Differentiating these techniques is core to managing page performance.

Status: Coming Soon

We are crafting this tutorial

Our team is working on interactive diagrams, code challenges, and exercises for How to Include CSS. Check back soon for the full guide!

What You'll Learn

1Inline styles: Writing declarations inside style="" tag attributes
2Internal CSS: Declaring stylesheets inside <style> tags within HTML <head>
3External CSS: Linking external .css files using <link rel="stylesheet">
4Priority rules: Understanding how browsers override styles when multiple methods clash
5Web performance: Why external stylesheets represent standard best practices

sandbox.css

<!-- Method 1: External CSS Link (Recommended) -->
<link rel="stylesheet" href="main-styles.css" />

<!-- Method 2: Internal Style Tags -->
<style>
  .warning-label { color: #f59e0b; }
</style>

<!-- Method 3: Inline CSS Attribute -->
<p style="color: #a855f7; font-weight: 600;">
  Inline overrides apply directly to this single paragraph.
</p>

Interactive playground coming soon

Next LessonColors & Backgrounds