HTML Styles - Detailed Overview

Introduction to HTML Styles

HTML styles control the appearance of elements on a web page. There are three main ways to apply styles in HTML:

Inline Styles

Inline styles are applied directly to an HTML element using the style attribute. This method is useful for quick styling but is not recommended for larger projects due to maintainability issues.

Example: Inline Style

<p style="color: blue; font-size: 18px;">This is a paragraph with inline styles.</p>

This is a paragraph with inline styles.

Internal Styles

Internal styles are defined within the <style> tag inside the <head> section of the HTML document. This method is useful for styling a single HTML document without affecting other pages.

Example: Internal Style

<style>
    p {
        color: green;
        font-size: 20px;
    }
</style>
<p>This is a paragraph with internal styles.</p>

This is a paragraph with internal styles.

External Styles

External styles are stored in separate CSS files and linked to the HTML document using the <link> tag. This method is the most efficient for applying styles across multiple pages of a website.

Example: External Style

Create a CSS file (e.g., styles.css) with the following content:

p {
    color: red;
    font-size: 22px;
}

Link the CSS file in your HTML document:

<link rel="stylesheet" href="styles.css">
<p>This is a paragraph with external styles.</p>

This is a paragraph with external styles.