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