write the HTML code for various HTML styles.
Answers
Write the HTML code for various HTML styles.
Explanation:
Add following Styles to HTML Elements
1. Include Inline styles using style attribute in HTML page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Using Inline Styles in HTML</title>
</head>
<body>
<h1 style="color:red;font-size:30px;">This is main heading</h1>
<p style="color:green;font-size:18px;">This is a paragraph.</p>
<div style="color:green; font-size:18px;">Hello world.</div>
</body>
</html>
2. Include Embedded style using style attribute in head section of HTML page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Using Embedded Style Sheet in HTML</title>
<style type="text/css">
body { background-color: YellowGreen; }
h1 { color: blue; }
p { color: red; }
</style>
</head>
<body>
<h1>This is main heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
3. Include External style sheet using link attribute that points to an external CSS file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Linking External Style Sheet in HTML</title>
<link rel="stylesheet" href="/examples/css/style.css">
</head>
<body>
<h1>Linking External Style Sheet</h1>
<p>The styles of this HTML document are defined in linked style sheet.</p>
</body>
</html>
<html>
<head><head>
<body style="background-color:powderblue;">
<p style="text-align:center;">Centered paragraph.</p>
<p style="font-size:160%;">This is a paragraph.</p>
<p style="font-family:courier;">This is a paragraph.</p>
<p style="color:red;">This is a paragraph.</p>
<p style="background-color:tomato;">This is a paragraph.</p>
</body>
</html>