body
{
font-family: Tahoma;
color: mediumslateblue;
}
h1
{
font-size: 1em;
border: 2px solid greenyellow;
background-color: lavender;
}
p
{
font-size: .7em;
}
And here's the HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" href="paragraph.css" type="text/css">
<title>Colors with CSS</title>
</head>
<body>
<h1>What's CSS?</h1>
<p> CSS is a powerful formatting language for the web that is being used with markup languages like HTML, XHTML and XML and that's because the natural of the language. CSS uses the markup element name for applying formatting styles.</p>
<h1>CSS and Markup Languages</h1>
<p>You can't use css as a stand-alone styling language because you need something to style, like HTML or XHTML page.</p>
</body>
</html>
When you run this page, you will get the following result.
As you can see, we have been using the CSS 3.0 new named colors to color the background of the <h1> element to lavender, the border of <h1> to greenyellow and the color of the text of the <body> element to mediumslateblue.
The term "named colors" leads us to the concept of keywords, which is more related to programming languages. A CSS keyword is a word that has a special meaning to web browser implementers. You might know red is the RGB value (255,0,0), but it's very difficult to remember the values for the 147 colors offered by the CSS 3.0 Specifications. That's why browsers replace the keyword red, for example, with the value (255,0,0) and the same to the other 146 color keywords.
So now that you understand that, you can use keywords as values for properties in CSS. But there's another type of keywords in CSS, the properties. The next selector contains 1 property which is itself a keyword, and its value is a keyword too.
p
{
color: red;
}
The color property is a keyword that has a special meaning in CSS. The properties font-size, font-family and the rest of the CSS properties are considered to be keywords. We could write the above CSS file as following, without using keywords
body
{
font-family: Tahoma;
color: rgb(123,104,238);
}
h1
{
font-size: 1em;
border: 2px solid rgb(173,255,47);
background-color: rgb(230,230,250);
}
p
{
font-size: .7em;
}