CSS Syntax
The CSS syntax consists of three parts namely, selector, property and value. The syntax is as follows:selector {property : value }
Let's discuss this syntax. The selector is a tag to which you would like to give to a particular style. Property is the attribute that has to be associated with the style. The value that each property has to take is specified in value.Look at the curly braces and the colon. The selector is followed by a curly brace which encloses property and value. The property and the value are separated by a colon. Let's see a simple example:
The output of the above HTML document will be:<HTML> <HEAD> <style type="text/css"> b {color:blue} </style> </HEAD> <BODY> <b>This is a bold text having blue color.</b> </BODY> </HTML>
This is a bold text having blue color.This was a very simple example to demonstrate the use of CSS. In this example, the HTML tag, b is the selector. The text between the tag b will have the color blue apart from being bold. CSS is hardly ever used in such a simple manner. There are many different variations of using this CSS syntax. We will see those variations now.
Suppose, you want to specify more than one property in a selector. This can be done by separating them by a semicolon. Following example will illustrate this:
The output of the above code will be:<HTML> <HEAD> <style type="text/css"> b {color:blue; font-family:arial} </style> </HEAD> <BODY> <b>This is a bold text having blue color & font arial.</b> </BODY> </HTML>
This is a bold text having blue color & font arial.Here, we have specified two properties to the element, b. We have changed the color to blue and the font to arial. Now suppose, the font was sans serif instead of arial. In this case, when the value contains more than one word, it should be enclosed within double quotes. See the example given below:
The output will be:<HTML> <HEAD> <style type="text/css"> b {color:blue; font-family:"sans serif"} </style> </HEAD> <BODY> <b>This is a bold text having blue color & font sans serif.</b> </BODY> </HTML>
This is a bold text having blue color & font sans serif.Another way to define a CSS is as follows:
b
{
color:blue;
font-family:"sans serif"
}