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 <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>
Top comments (0)