CSS Syntax | Cascading Style Sheet | Use of CSS with HTML

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.

 



Leave a Reply

Your email address will not be published. Required fields are marked *