XHTML and CSS - RGB Color and Line Spacing
RGB Color and Line Spacing
In this tutorial I'm going to be building a basic website and using some nice CSS property's.
<html> <head> <title> This is the title. </title> <style type="text/css"> </style> </head> <body> <h1>This is the header</h1> <p> This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. </p> </body> </html>
So the first thing we want to work with is the header, so let's go ahead and make a rule to change the color on that, the element we're working with is h1.
<html> <head> <title> This is the title. </title> <style type="text/css"> h1 { } </style> </head> <body> <h1>This is the header</h1> <p> This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. </p> </body> </html>
The property we want to change is color and we'll make that blue.
<html> <head> <title> This is the title. </title> <style type="text/css"> h1 { color: blue; } </style> </head> <body> <h1>This is the header</h1> <p> This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. </p> </body> </html>
You might be thinking that colors like that are pretty limited, what you can use instead of red, green, blue etc is a RGB value. You can find RGB values pretty easily on other websites, just search Google for RGB color chart or you can use this one here. Go to that page and pick the hex code for the color you want to use, it'll look something like this #556B2F, and use that color making sure you keep the hash at the start instead of the color.
<html> <head> <title> This is the title. </title> <style type="text/css"> h1 { color: #556B2F; } </style> </head> <body> <h1>This is the header</h1> <p> This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. </p> </body> </html>
Now you should see that the text has changed to the color you picked or dark green if you used mine. Next we'll change the space between the lines in our paragraph, anytime you want to space out the lines you need to use a property called line height, first tell CSS that your going to be using your paragraph and use the line-height property.
<html> <head> <title> This is the title. </title> <style type="text/css"> h1 { color: #556B2F; } p { line-height: 100%; } </style> </head> <body> <h1>This is the header</h1> <p> This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. </p> </body> </html>
By default the line height is at 100%, you can set it equal to any percentage, change it to any number you want, I'm going to be changing mine to 140%.
<html> <head> <title> This is the title. </title> <style type="text/css"> h1 { color: #556B2F; } p { line-height: 150%; } </style> </head> <body> <h1>This is the header</h1> <p> This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. This is some random text in a paragraph. </p> </body> </html>
As you can see the height of your lines is now bigger so it makes your text easier to read.

Page generated in 0.0031 seconds.