how to use inline, internal, and external CSS in HTML
Sudhanshu Gaikwad
Posted on June 29, 2024
1.Inline CSS:
Inline CSS is applied directly to HTML elements using the style attribute.
<!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 tag inside the <head> section of the HTML document.<br>
</p>
<div class="highlight"><pre class="highlight plaintext"><code><!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>
</code></pre></div>
<p></p>
<p><strong>3.External CSS:</strong><br>
External CSS is written in a separate .css file and linked to the HTML document using the <link> tag.<br>
First, create a <code>style.css</code> file in your project</p>
<p><strong>styles.css:</strong><br>
</p>
<div class="highlight"><pre class="highlight plaintext"><code>/* styles.css */
h1 {
color: red;
text-transform: uppercase;
}
p {
font-size: 20px;
color: darkblue;
}
</code></pre></div>
<p></p>
<p>After That, You create an Index.html File in your project and <br>
link the <code>style.css</code> <code><link rel="stylesheet" href="styles.css"></code><br>
file in the <code>index.html</code> File.</p>
<p><strong>index.html:</strong><br>
</p>
<div class="highlight"><pre class="highlight plaintext"><code><!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>
</code></pre></div>
<p></p>
<p>In this way, we can use <strong>CSS</strong> in <strong>HTML</strong>.</p>
Posted on June 29, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
