CSS Syntax
Elementselector{
PropertyName:PropertyValue;
PropertyName:PropertyValue;
PropertyName:PropertyValue;
…
}
CSS helps to set properties in HTML tags.
- Element selector is used to specify an HTML element or group of HTML elements on which properties are applied.
- There are three ways to specify an element selector
- Tag Name
- ID Value
- Class Value
Tag Name:
Here we set properties in HTML elements by Tag Name. Tag name selector set properties for all tags which are same. Here we write CSS code at a time and that CSS code applicable in same HTML elements.
Example:-
<html>
<head>
p{
PropertyName:PropertyValue;
PropertyName:PropertyValue;
}
</head>
<body>
<p>
…………………
………………….
………………….</p>
</body>
</html>
ID Value:
Here we set a unique id for a unique HTML element. And set CSS properties for a separate tag. If we have more than one HTML elements which are same and we want to set CSS property for a particular element then we use ID Value selector. ID value is prefixed with hash (#) symbol when mentioned in selector.
Example:
<html>
<head>
#p{
PropertyName:PropertyValue;
PropertyName:PropertyValue;
}
</head>
<body>
<p>
…….……………
………………….
………………….</p>
<p id=”p1”>
…………………
………………….
………………….</p>
</body>
</html>
Class Value:
Class value can be common to multiple heterogeneous HTMLS elements, which causes selection of more than one HTMLL elements.
Example:
<html>
<head>
#p{
PropertyName:PropertyValue;
PropertyName:PropertyValue;
}
</head>
<body>
<p class=”c1”>
…..……………
………………….
………………….</p>
<a class=”c2”>
…….……………
………………….
………………….</a>
<h1 class=”c3”>……………</h1>
</body>
</html>
PropertyName:PropertyValue
- PropertyName is the name of the CSS property name followed by colon (:) and then Property value.
- We can write one or more property declaration in the block.
