In HTML, colors are used to style details (text, borders, backgrounds, buttons, etc.) and control the layout appearance through CSS. The modern way is to use CSS with your HTML.
1. Adding colors to HTML elements
Inline CSS:
</p>
<div style="background-color: yellow;">
This box has a yellow background.
</div>
2. Using color names
<h1 style="color: red;">Red Heading</h1>
<p style="color: green;">Green paragraph</p>
Common color names:
redbluegreenblackwhiteyelloworangepurple
3. Using HEX colors
HEX colors start with #:
<div style="background-color: #3498db;">
Blue background
</div>
Examples:
#000000= black#ffffff= white#ff0000= red#00ff00= green#0000ff= blue
4. Using RGB colors
Red text
</p>
<div style="background-color: rgb(0, 150, 255);">
Blue box
</div>
5. Styling layout with colors and CSS
Example page:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #f2f2f2;
font-family: Arial;
}
.header {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}
.content {
background-color: white;
color: #444;
padding: 20px;
margin: 20px;
border: 2px solid #3498db;
}
.button {
background-color: green;
color: white;
padding: 10px;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="header">
My Website
</div>
<div class="content">
<h2>Details Section</h2>
<p>This is a colored layout example.</p><button class="button">Click Me</button></div>
</body>
</html>
6. CSS properties commonly used for layout
| Property | Purpose |
|---|---|
background-color | Sets background color |
color | Sets text color |
border-color | Sets border color |
padding | Space inside an element |
margin | Space outside an element |
width | Element width |
height | Element height |
display | Controls layout type |
flex | Creates flexible layouts |
For more advanced layouts, learn CSS Flexbox and CSS Grid. They are the main tools for arranging HTML elements on a page.
0 Comments