3.2  Three Ways to Add CSS

 

Method

How It Works

When to Use

Priority

Inline CSS

Written directly on an HTML element using the style attribute

Quick testing, one-off overrides

Highest

Internal CSS

Written inside a <style> tag in the <head> section

Single-page websites, small demos

Medium

External CSS

Written in a separate .css file, linked to HTML

ALWAYS preferred for real projects

Lower (but best practice)

 

Three Ways to Apply CSS

<!-- 1. INLINE CSS (not recommended for real projects) -->

<p style="color: green; font-size: 18px;">This text is green.</p>

 

<!-- 2. INTERNAL CSS (inside <head> of your HTML file) -->

<style>

  p { color: blue; font-size: 16px; }

  h1 { color: darkred; }

</style>

 

<!-- 3. EXTERNAL CSS (the correct, professional approach) -->

<!-- In HTML <head>: -->

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

 

/* In styles.css file: */

p { color: #333333; font-size: 16px; line-height: 1.6; }

h1 { color: #1A3C5E; font-size: 2rem; }