13 visitors online
Guests: 13
Registered: 0
Website Building → Tutorials → HTML: Colors & Backgrounds (Part 3)
Colors and how you use them are one of the most important parts of websites. It's important to think hard about the color combinations you use as they can reflect the mood, purpose and feel of your site and therefore your business.
It's time to brighten up your page: (Change the colors as you wish)
<html>
<head>
<title>Colors & Backgrounds in action!
</title>
</head>
<body style="background-color: black">
<p style="color: white">This text is white</p>
<p style="color: yellow">This text is red</p>
</body>
</html>
If all your paragraphs will be the same, you can choose in advance:
<html>
<head>
<title>Colors & Backgrounds in action again!
</title>
<style type="text/css">
p { color: red }
</style>
</head>
<body style="background-color: black">
<p>This text is red</p>
<p>This text is also red</p>
</body>
</html>
Or better yet:
<html>
<head>
<title>A little more detail!
</title>
<style type="text/css">
body { background-color: black }
p.red { color: red; font-weight: bold }
p.yellow { color: yellow }
</style>
</head>
<body>
<p class="red">This text is red & bold</p>
<p class="yellow">This text is yellow</p>
<p class="red">This text is also red & bold</p>
<p class="yellow">This text is also yellow</p>
</body>
</html>
You may already know that this is not the best way to define colors as named colors are limited and differently interpreted by browsers. In the next section we will cover hexadecimal color codes!