CSS is an acronym of Cascading Style Sheets. It’s a rule-based language and opted to pertain styling to HTML elements. The Properties of element such as color, background color, width, border thickness, font size, etc. can be modified by opting or writing CSS rules in HTML elements such as <p>, <img> and many more.
CSS rules
The rules of CSS are divided into two parts- Selector and Declaration
Selector and Declaration-
In CSS, selectors are the patterns which are opted to opt for the element(s) which we want to style. This part of CSS comprises of properties and the values correspondingly.
Selector-
Selectors are opted to locate or opt for the contents we want to style. That are integrated in the CSS rules set. Selectors in CSS necessitate id, class, type, attribute etc. to employ the style. Compound selectors moreover are distinct at a time, while in this case every selector is separated from other selectors by opting comma separator. Example of opting multiple selectors in a single block is mentioned below-
Example-
h1,h2,h3
{
color:blue;
font-size:12px;
}
Property and Value
The property is the style attribute we require to change and value is the value of particular attribute. For example, we would like to change the size of our text 28px and the color is blue then it declares as-
Example-
font-size:28px; color:blue.
Here font-size is the property and 28px is their value and color is also a property and the blue is there value.
Declaration-
Declaration part of the CSS comprises the property and value. For example, if we crave for the size of our text 10px then it declares as font-size:1px. In this font-size is the property and 10px is their value, and all this statement is called declaration.
Declaration Block
In the Declaration Block (given in the diagram above) several lines are integrated which also includes the curly braces. This block is worn for declaring the properties of the selector. The declaration part is also alienated into two parts which are detached by a ‘:’ symbol called as colon. The example is given below:
font-size:12px;
As shown in the above code property (font-size) and value (12px) are separated by a colon symbol.
Curly Braces
In the declaration section if one property is opted then there is no need to end it or opting semicolon at the end of the line. If declaration part consists numerous properties and their values, then it must be ended with a separator, called semicolon.
Class and ID in CSS-
HTML elements are applied in CSS with selectors Class and ID. When applying CSS on HTML elements at that time ID and class selectors are mainly opted. CSS would be functional in an HTML element by opting any of these two-selector id and class. The benefit of id and class is that there is no need to write code again and again. That is the feature of CSS called, reusability.
ID Selector
With the opts of ID selector we can indicate a style for a single, unique element. So that the id attribute of the CSS on HTML element is opted and is distinct with a hash sign. The syntax of opting ID is given below:
#para1
{
text-align:left;
color:blue;
}
The example of opting ID is given below-
<HTML>
<body>
<style>
#left{
text-align:left;
}
<h1 id=”left”>This is heading</h1>
<p id=”left”>This is paragraph</p1>
</style>
</body>
</HTML>
Result of the above code is given below-
Note: Do not start an ID name with a number. It is not supported in Mozilla Firefox browser.
Class Selector-
To state style for a set of elements the class selector is opted. An id selector, class selector permits us to set a particular style for many HTML elements with the same class. HTML attributes, are opted by class selector which are distinct with a ‘.’ (dot) sign.
In the below example we declare a class with name "left" (.left) which is opted many HTML attribute for display that particular element in left. The example of opting class selector is given below:
<HTML>
<body>
<style>
.left{
text-align:left;
}
</style>
<h1 class="left">This is heading</h1>
<p class="left">This is paragraph</p>
</body>
</HTML>
The output of the above code is:
We can also state only specific HTML elements should be affected by a class. In below example, all <p> elements will be displayed in centre. For example-
p.left{
text-align:center;
}
It is advised not to start a class name with a number. Because it would only support by Microsoft Internet Explorer browser.