CSS Syntax
The selector is the HTML element that is going to be styled. For example < p > is the selector and the content of it will be styled.
The declaration consists of one or more definitions for the style or the property name and value of the HTML document, f there are more than one declaration, they will be separated by a semicolon. The property name and value are separated by colon. In the syntax each declaration is ended by a semicolon. The declaration is surrounded by curly brackets.
Consider the following example:
EXAMPLE
< ! DOCTYPE html >
< html >
< head >
< style >
h1
{
color: red;
font: Times New Roman;
font-size: 22px;
text-align: center;
}
< / style >
< / head >
< body >
< h1 > Heading 1 < / h1 >
< / body >
< / html >
This will produce the following result:
CSS Selectors
The CSS selector is used to identify or select the HTML element that will be based on the elements’ name, attribute, class or id etc. For example e can use h1 for heading 1.
The Element Selector
The element selector is used to select the element that will be based on its name. For example, if you want to make the content of all paragraphs of blue color with a font size of 14 and text centered aligned, you will do as follows:
< ! DOCTYPE html >
< html >
< head >
< style >
h1
{
color: red;
font: Times New Roman;
font-size: 22px;
text-align: center;
}
p
{
color: blue;
font-size: 14px;
text-align: centre;
}
< / style >
< / head >
< body >
< h1 > Heading 1 < / h1 >
< p > Paragrapgh 1: All the content of all paragraphs will be of blue color with 14 font size and will be centered aligned < / p >
< p > paragraph 2 < / p >
< / body >
< / html >
The above example will produce the following result:
The id Selector
The id selector takes the id attribute of the element to select that element. There should be unique id for the unique element. The id should be followed by a hash (#) symbol when referring it as selector. Consider the following example:
EXAMPLE
< ! DOCTYPE html >
< html >
< head >
< style >
h1
{
color: red ;
font: Times New Roman ;
font-size: 22px ;
text-align: center ;
}
#p
{
color: blue ;
font-size: 14px ;
}
< / style >
< / head >
< body >
< h1 > Heading 1 < / h1 >
< p id = ” p” > Paragraph 1: Only this paragraph will be effected by the style < / p >
< p > paragraph 2 < / p >
< / body >
< / html >
This will produce the following result:
The Class Selector
The class selector is used to select the element using the class attribute. The class selector uses a period (.) before the class name. To understand this consider the following example:
EXAMPLE
< ! DOCTYPE html >
< html >
< head >
< style >
.heading
{
color: red;
font: Times New Roman;
font-size: 22px;
text-align: center;
}
.para
{
color: blue;
font-size: 14px;
}
< / style >
< / head >
< body >
< h1 class = “heading” > Heading 1 < / h1 >
< p class = “para” > Paragraph 1: < / p >
< / body >
< / html >
This will generate the following result:
If you want the heading to be the same as the paragraph, do as follows:
EXAMPLE
< ! DOCTYPE html >
< html >
< head >
< style >
.para
{
color: blue;
font: Times New Roman;
text-align: center;
}
< / style >
< / head >
< body >
< h1 class = “para” > Heading 1 < / h1 >
< p class = “para” > Paragraph 1: < / p >
< / body >
< / html >
This will generate the following result:
If you want to make changes to only paragraph, do as follows:
EXAMPLE
< ! DOCTYPE html >
< html >
< head >
< style >
p.para
{
color: blue;
font: Times New Roman;
text-align: center;
}
< / style >
< / head >
< body >
< h1 class =”para” > Heading 1 < / h1 >
< p class = “para” > Paragraph 1: < / p >
< / body >
< / html >
This will generate the following result:
If you want to refer more than one class, do as follows:
EXAMPLE
< ! DOCTYPE html >
< html >
< head >
< style >
p.para
{
color: blue;
font: Times New Roman;
text-align: center;
}
p.large {
font-size: 50px;
}
< / style >
< / head >
< body >
< h1 class = “para” > Heading 1 < / h1 >
< p class = “para” > Paragraph 1: < / p >
< p class = “para large” > paragraph 2 having a large font-size < / p >
< / body >
< / html >
This will generate the following result:
Grouping Selector
Let us suppose that you want the elements let say all headings to have the same style, then you will group together the selectors and they must be separated by a comma. Consider the following example:
EXAMPLE
< ! DOCTYPE html >
< html >
< head >
< style >
h1, h2, h3
{
color: blue;
font: Times New Roman;
text-align: center;
}
< / style >
< / head >
< body >
< h1 > Heading 1 < / h1 >
< h2 > Heading 2 < / h2 >
< h3 > Heading 3 < / h3 >
< / body >
< / html >
This will produce the following result:
CSS Comments
Comments are used to add more information about the code in the code. The comments do not affect the execution of the code and are ignored by the browser. Comments may be helpful when you want to edit your code.
The CSS comment is started by /* and is ended by */. Anything that is written between these two is ignored by the browser. Consider the following example:
EXAMPLE
< ! DOCTYPE html >
< html >
< head >
< style >
h1, h2, h3
{
color: blue;
font: Times New Roman;
text-align: center;
}
/* This style is used to format the headings of the document */
< / style >
< / head >
< body >
< h1> Heading 1 < / h1 >
< h2 > Heading 2 < / h2 >
< h3 > Heading 3 < / h3 >
< / body >
< / html >
The comment will not have any effect on the browser and the code will generate the following result:
The above example used the single line comment. Multiple line comments can be written as follows:
/* this is
multiple line
comment */
