how to use inline, internal, and external CSS in HTML

#css #beginners #html #programming

1.Inline CSS:
Inline CSS is applied directly to HTML elements using the styleattribute.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sudhanshu Developer</title>
</head>
<body>
    <h1 style="color: blue; text-transform: uppercase;">Sudhanshu Developer</h1>
    <p style="font-size: 16px; color: gray;">This is an example of inline CSS.</p>
</body>
</html>

2.Internal CSS:
Internal CSS is defined within a <style> tag inside the <head> section of the HTML file 📂.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sudhanshu Developer</title>
    <style>
        h1 {
            color: green;
            text-transform: uppercase;
        }
        p {
            font-size: 18px;
            color: darkgray;
        }
    </style>
</head>
<body>
    <h1>Sudhanshu Developer</h1>
    <p>This is an example of internal CSS.</p>
</body>
</html>

3.External CSS:
First Create the style.css file write the required CSS code in this file and link the <link rel="stylesheet" href="styles.css"> file in the index.html document By Using the <link> tag.

/* styles.css */
h1 {
    color: red;
    text-transform: uppercase;
}
p {
    font-size: 20px;
    color: darkblue;
}

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sudhanshu Developer</title>

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

</head>
<body>
    <h1>Sudhanshu Developer</h1>
    <p>This is an example of external CSS.</p>
</body>
</html>

DEV Community

how to use inline, internal, and external CSS in HTML

Top comments (0)