HTML Styles Tutorial

Styles in HTML can enhance the appearance of your web pages. This tutorial covers three primary ways to apply styles: inline styles, embedded styles, and external stylesheets.

1. Inline Styles

Inline styles are applied directly to an HTML element using the style attribute. This method is useful for quick styling of individual elements.


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

This example demonstrates how to set the text color to blue and the font size to 20 pixels.

2. Embedded Styles

Embedded styles are defined within a <style> tag in the <head> section of the HTML document. This method is useful for styling multiple elements on a single page.


<head>
    <style>
        p {
            color: green;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <p>This is a paragraph styled with embedded CSS.</p>
</body>

This example shows how to style all <p> elements on the page with green text and a font size of 18 pixels.

3. External Stylesheets

External stylesheets allow you to define styles in a separate CSS file, which can be linked to multiple HTML documents. This method promotes consistency and easier maintenance.


<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p class="styled">This is a paragraph styled with an external stylesheet.</p>
</body>

In this example, the styles for the <p class="styled"> element would be defined in a separate file called styles.css.

4. Conclusion

Choosing the right method for applying styles depends on your needs. Inline styles are great for quick fixes, embedded styles are useful for single pages, and external stylesheets are best for maintaining a consistent look across multiple pages.

Note: We aim to make learning easier by sharing top-quality tutorials, but please remember that tutorials may not be 100% accurate, as occasional mistakes can happen. Once you've mastered the language, we highly recommend consulting the official documentation to stay updated with the latest changes. If you spot any errors, please feel free to report them to help us improve.

top-home