Styles in HTML

Styles in HTML define the appearance of HTML elements.

They can be added directly to HTML elements using the style attribute, or they can be defined in <style> tags in the head of the document or in external CSS files.


Inline Styles

Inline styles are added directly within an HTML tag using the style attribute.

<!DOCTYPE html>
<html>
<head>
    <title>Inline Styles</title>
</head>
<body>
    <h1 style="color: blue; font-size: 24px;">Hello, World!</h1>
</body>
</html>


Internal CSS

Internal CSS is defined within a <style> tag inside the head section of an HTML document.

<!DOCTYPE html>
<html>
<head>
    <style>
        h1 {
            color: green;
            font-size: 28px;
        }
    </style>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>


External CSS

External CSS is defined in a separate file and linked to the HTML document using the <link> tag.

h1 {
    color: red;
    font-size: 32px;
}

index.html

<!DOCTYPE html>
<html>
<head>
    <title>External CSS</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>


Using CSS efficiently helps in maintaining and organizing styles across multiple pages.