| Introduction to HTML |
|---|
| Introduction to HTML |
|---|
| HTML Attributes |
|---|
| HTML5 Semantic Elements |
|---|
| HTML Graphics |
|---|
1. Inline Styles
Inline styles are applied directly within an HTML element using the ‘style‘ attribute.
<!DOCTYPE html>
<html>
<head>
<title>Inline Styles Example</title>
</head>
<body>
<p style="background-color: yellow;">This paragraph has a yellow background.</p>
<p style="background-color: lightblue;">This paragraph has a light blue background.</p>
<p style="background-color: #FFD700;">This paragraph has a gold background using a hex color code.</p>
</body>
</html>
2. Internal Styles
Internal styles are defined within a ‘<style>‘ element in the ‘<head>‘ section of the HTML document.
<!DOCTYPE html>
<html>
<head>
<title>Internal Styles Example</title>
<style>
.yellow-background {
background-color: yellow;
}
.lightblue-background {
background-color: lightblue;
}
.gold-background {
background-color: #FFD700;
}
</style>
</head>
<body>
<p class="yellow-background">This paragraph has a yellow background.</p>
<p class="lightblue-background">This paragraph has a light blue background.</p>
<p class="gold-background">This paragraph has a gold background using a hex color code.</p>
</body>
</html>
3. External Stylesheet
External stylesheets are linked to the HTML document using the ‘<link>‘ element. This method is preferred for larger websites to maintain a consistent style across multiple pages.
style.css:
.yellow-background {
background-color: yellow;
}
.lightblue-background {
background-color: lightblue;
}
.gold-background {
background-color: #FFD700;
}
index.html:
<!DOCTYPE html>
<html>
<head>
<title>External Stylesheet Example</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p class="yellow-background">This paragraph has a yellow background.</p>
<p class="lightblue-background">This paragraph has a light blue background.</p>
<p class="gold-background">This paragraph has a gold background using a hex color code.</p>
</body>
</html>
4. Using Named Colors
You can use named colors directly within the ‘style‘ attribute or in CSS.
<!DOCTYPE html>
<html>
<head>
<title>Named Colors Example</title>
</head>
<body>
<p style="background-color: tomato;">This paragraph has a tomato-colored background.</p>
<p style="background-color: orange;">This paragraph has an orange background.</p>
<p style="background-color: gold;">This paragraph has a gold background.</p>
</body>
</html>
5. Using RGB and RGBA
RGB (Red, Green, Blue) and RGBA (Red, Green, Blue, Alpha) allow more precise color definitions and transparency control.
<!DOCTYPE html>
<html>
<head>
<title>RGB and RGBA Example</title>
</head>
<body>
<p style="background-color: rgb(255, 0, 0);">This paragraph has a red background using RGB.</p>
<p style="background-color: rgba(0, 0, 255, 0.5);">This paragraph has a semi-transparent blue background using RGBA.</p>
</body>
</html>
These methods demonstrate different ways to apply background color to HTML elements using CSS. Each approach has its advantages and use cases, depending on the complexity and size of your project.
