Day 2 - Types of CSS Styling

Welcome to CSS! In this lesson, you'll learn what CSS is, why it's essential for web development, and the three ways to apply styles to your HTML.

3. Types of CSS Styling

There are three primary ways to apply CSS styles to a webpage: Inline, Internal (Embedded), and External.

Write styles directly inside HTML elements using the style attribute.

<!-- HTML -->
<p  style="color: red;">Hello</p>

Hello

❌ Harder to maintain	You must edit each element individually to make changes.
❌ Not reusable	You must repeat styles for every element.
❌ Messy code	Breaks the principle of separating content from presentation.
✓ Highest specificity	Inline styles override other CSS rules (value: 1000).

Place styles inside a <style> tag within the <head> section of your HTML file.

<head>
    <title>Document</title>
    <style>
        p  { color:  red; }
    </style>
</head>
<body>
    <p>Hello</p>
</body>

✓ Better than inline	More organized and cleaner code structure.
❌ Limited reusability	Styles only work within the same HTML page.
❌ Not ideal for multi-page sites	You must duplicate styles across each HTML file.

Store all styles in a separate .css file and link it to your HTML document. This is the best practice for most projects.

HTML File:

<head>
    <title>Document</title>
    <link  rel="stylesheet"
        href="./styles.css">
</head>
<body>
    <p>Hello</p>
</body>

CSS File (styles.css):

p {  color: red;  }

✓ Most maintainable	Update styles for multiple pages from a single location.
✓ Highly reusable	The same stylesheet can be linked to multiple pages and projects.
✓ Best practice	Keeps HTML clean by completely separating layout from content.
✓ Great for teams	Makes collaboration and version control easier.

Type	Where It's Written	Reusability	Best For
Inline	Inside HTML element (`style=""`)	None	Quick fixes, testing
Internal	In `<style>` tag in `<head>`	Same page only	Single-page projects
External	Separate `.css` file	Across all pages	Multi-page websites ✓