styles

What are HTML Styles?

HTML styles are used to define the appearance of HTML elements. They can control properties like color, font, size, spacing, and layout. Styling can be applied using three main methods: inline styles, internal styles, and external styles.

Inline Styles

Inline styles are applied directly to an HTML element using the style attribute. This method is useful for quick styling but can make your HTML code less readable.

Example of an inline style:

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

Internal Styles

Internal styles are defined within a <style> tag inside the <head> section of the HTML document. This method is beneficial for applying styles to multiple elements on a single page.

Example of internal styles:

<head>
    <style>
        p {
            color: green;
            font-size: 18px;
        }
    </style>
</head>

This will style all <p> elements on the page to be green and 18 pixels in size.

External Styles

External styles are defined in a separate CSS file. This method is ideal for maintaining a consistent look across multiple pages of a website. To link an external CSS file, use the <link> tag in the <head> section:

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

Contents of styles.css might look like this:

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

All <p> elements will be styled to be red and 20 pixels in size across all pages that include this stylesheet.

Best Practices for Using Styles