We will discuss the style specification format in CSS. Let us understand the meaning of style specification first.
Style Specification
The set of rules and declarations in CSS that are specified using <style> tag or "style" attribute is called style specification.
Style makes the HTML elements look beautiful on a webpage and attracts more users. We can provide style to the elements utilizing CSS.
Style Specification Format
The format for specifying styles is the framework used to establish the guidelines for styling the HTML elements.
Syntax:
selector {
property1: value1;
property2: value2;
...
property_n: value_n;
}
The "selector" is used to choose the HTML element where we intend to apply the style. The "property1" and "property2" …. property_n represent the properties used to add style to the chosen element. Multiple styles can be applied to a single element by using various CSS properties.
There are specific selectors in CSS, listed as follows:
1. Element selector:
The element selector refers to the specific HTML elements such as p, h1, div, and others.
Syntax:
p {
property: value;
}
The "p" serves as the element selector within the provided syntax. It is employed to apply styling to the specified HTML element.
Example:
We will utilize an element selector to give the style to HTML elements. We will give style to <h2>, <div> and <p> elements in this demonstration.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Styling HTML elements utilizing element selector</title>
<style>
h2 {
color: darkcyan;
}
div{
border: 2px solid rebeccapurple;
}
p {
font-size: 20px;
background-color: salmon;
color: blue;
}
</style>
</head>
<body>
<h1>Styling HTML elements utilizing element selector</h1>
<h2>This is a heading element.</h2>
<div>This is a div element.</div>
<p>This is a paragraph element.</p>
</body>
</html>
Output:
Here in the result, we can observe the formatting applied to the HTML elements using the element selector .
2. Id selector:
The id selector chooses the element with a particular id assigned to it. The attribute "id" specifies the unique identifier for the element. Each element within a webpage must have a distinct ID name. To select it, a hash (#) symbol is prefixed before the ID name.
Syntax:
#id {
property: value;
}
The "#id" represents the id selector within the provided syntax.
Example:
We will use the id selector to apply styles to the HTML element. We will demonstrate styling the <h1> and <h2> elements in this example.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Styling HTML elements utilizing id selector</title>
<style>
#heading1 {
color: rgb(167, 33, 169); }
#heading2 {
background-color: rgb(14, 14, 97);
color: indianred;
font-family: 'Courier New', Courier, monospace;
}
</style>
</head>
<body>
<h1 id="heading1">Styling HTML elements utilizing id selector</h1>
<h2 id="heading2">List of countries</h2>
<ul>
<li> India </li>
<li> Sri Lanka </li>
<li> United States </li>
<li> Canada </li>
<li> Mexico </li>
<li> Germany </li>
<li> South Korea </li>
<li> Japan </li>
<li> Ireland </li>
<li> Iceland </li>
</ul>
</body>
</html>
Output:
Here is the result showcasing the design applied to the <h1> and <h2> elements using the id selector.
3. Class selector:
The class selector is employed to choose the element that possesses a particular class. The "class" attribute is employed to assign the class name to the element. Multiple HTML elements on one webpage can be assigned the same class name. The class is selected by prefixing the class name with a dot (.) following the element name.
Syntax:
element-name.class {
property: value;
}
The "element-name.class" represents the class selector in the syntax mentioned above.
Example:
We will apply the style to HTML elements with the help of a class selector in this demonstration. We will apply the style to <h1> element, <h2> element, and <h3> element utilizing the same class name.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Styling HTML elements utilizing class selector</title>
<style>
body {
background-color: rgb(220, 220, 247);
font-family: Arial, Helvetica, sans-serif;
}
h1.heading {
color: rgb(106, 10, 55);
}
h2.heading {
color: rgb(98, 17, 160);
}
h3.heading {
color: rgb(205, 42, 110);
}
</style>
</head>
<body>
<h1 class="heading">Styling HTML elements utilizing class selector</h1>
<h2 class="heading">List of grocery items</h2>
<h3 class="heading">Fruits:</h3>
<ol>
<li>Apples</li>
<li>Mangoes</li>
</ol>
<h3 class="heading">Dairy:</h3>
<ol>
<li>Milk</li>
<li>Butter</li>
</ol>
<h3 class="heading">Beverages:</h3>
<ol>
<li>Water</li>
<li>Juice</li>
</ol>
<h3 class="heading">Vegetables:</h3>
<ol>
<li>Carrots</li>
<li>Cucumbers</li>
</ol>
<h3 class="heading">Breads:</h3>
<ol>
<li>Buns</li>
<li>Sandwich</li>
</ol>
</body>
</html>
Output:
Here is the result demonstrating the application of styles to the HTML elements using the class selector .
4. Generic class selector:
The general class selector is employed to apply consistent styling across various elements. The "class" attribute is assigned to assign the generic class name to the element. Identification is done by prefixing the class name with a dot (.) character.
Syntax:
.class {
property: value;
}
The ".class" represents the universal class selector in the provided syntax.
Example:
We will apply the style to HTML elements with the help of a generic class selector in this demonstration. We will apply the same style to <h1>, <h2> and <h3> elements.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Styling HTML elements utilizing generic class selector</title>
<style>
body {
background-color: rgb(214, 168, 149);
font-family: Arial, Helvetica, sans-serif;
}
.heading {
color: rgb(76, 12, 39);
}
</style>
</head>
<body>
<h1 class="heading">Styling HTML elements utilizing class selector</h1>
<h2 class="heading">List of grocery items</h2>
<h3 class="heading">Fruits:</h3>
<ol>
<li>Apples</li>
<li>Mangoes</li>
</ol>
<h3 class="heading">Dairy:</h3>
<ol>
<li>Milk</li>
<li>Butter</li>
</ol>
<h3 class="heading">Beverages:</h3>
<ol>
<li>Water</li>
<li>Juice</li>
</ol>
<h3 class="heading">Vegetables:</h3>
<ol>
<li>Carrots</li>
<li>Cucumbers</li>
</ol>
<h3 class="heading">Breads:</h3>
<ol>
<li>Buns</li>
<li>Sandwich</li>
</ol>
</body>
</html>
Output:
We can witness that the same style has been applied to <h1>, <h2>, and <h3> elements utilizing a generic class selector .
5. Universal selector:
The universal selector is employed to target all HTML elements. The asterisk symbol (*) is utilized for selecting all HTML elements.
Syntax:
.* {
property1: value;
property2: value;
}
In the provided syntax, the "*" serves as the universal selector where all elements are affected. The CSS properties are enclosed within the curly brackets.
Example:
We'll be implementing the styling for HTML components using a universal selector in this illustration.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Styling HTML elements utilizing universal selector</title>
<style>
* {
background-color: rgb(216, 241, 201);
font-family: Arial, Helvetica, sans-serif;
color: rgb(154, 34, 194);
}
</style>
</head>
<body>
<h1>Styling HTML elements utilizing universal selector</h1>
<h2>List of states in India</h2>
<ol>
<li>Andhra Pradesh</li>
<li>Arunachal Pradesh</li>
<li>Assam</li>
<li>Bihar</li>
<li>Chhattisgarh</li>
<li>Goa</li>
<li>Gujarat</li>
<li>Haryana</li>
<li>Himachal Pradesh</li>
<li>Jharkhand</li>
<li>Karnataka</li>
<li>Kerala</li>
<li>Madhya Pradesh</li>
<li>Maharashtra</li>
<li>Manipur</li>
<li>Meghalaya</li>
<li>Mizoram</li>
<li>Nagaland</li>
<li>Odisha</li>
<li>Punjab</li>
<li>Rajasthan</li>
<li>Sikkim</li>
<li>Tamil Nadu</li>
<li>Telangana</li>
<li>Tripura</li>
<li>Uttarakhand</li>
<li>Uttar Pradesh</li>
<li>West Bengal</li>
</ol>
</body>
</html>
Output:
We can observe that the styling has been implemented on the HTML elements using the universal selector .
6. Group selector:
The group selector is used to target multiple HTML elements simultaneously, enabling the consistent styling of numerous HTML elements at once.
Syntax:
element1, element2, element3, ... {
property: value;
}
The "element1, element2, element3, …" functions as the group selector within the provided syntax.
Example:
We will utilize a group selector to apply styles to HTML elements in this example.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Styling HTML elements utilizing group selector</title>
<style>
body {
background-color: rgb(243, 236, 181);
}
table, tr, th, td {
font-family: Arial, Helvetica, sans-serif;
border: 1px solid purple;
color: purple;
font-size: 24px;
}
</style>
</head>
<body>
<h1>Styling HTML elements utilizing group selector</h1>
<h2>Students Details</h2>
<table>
<tr>
<th>ID</th>
<th>Name</th>
<th>Address</th>
<th>Course</th>
</tr>
<tr>
<td>1001</td>
<td>Avinash</td>
<td>Mumbai</td>
<td>B. Tech</td>
</tr>
<tr>
<td>1002</td>
<td>Beena</td>
<td>Mumbai</td>
<td>B. Tech</td>
</tr>
<tr>
<td>1003</td>
<td>Kashmira</td>
<td>Lucknow</td>
<td>B. Ed</td>
</tr>
<tr>
<td>1004</td>
<td>Hina</td>
<td>Lucknow</td>
<td>B. Ed</td>
</tr>
</table>
</body>
</html>
Output:
We can observe that the CSS style has been implemented on the HTML elements using the class selector.
7. Pseudo-class:
The pseudo-class functions as a selector that targets a particular element and alters its state. The colon symbol (:) is employed preceding the pseudo-class.
Syntax:
Selector: pseudo-class. {
property1: value1;
property2: value2;
...
}
The name of the selector is substituted in place of the selector, while the pseudo-class's name is inserted in place of the pseudo-class. A colon (:) is employed to separate the selector and pseudo-class. The properties are enclosed within curly braces.
The selector can be element, id, class, etc. There are various pseudo-classes, which are described below:
- :hover: It is used to change the appearance of the element when the user hovers over the element.
- :active: It is used to change the appearance of an element when the element is active.
- :link: It is used to give style to the unvisited link.
- :visited: It is used to give style to the visited link.
- :focus: It is used to give style to the element when it comes to focus.
- :first-child: It is used to give style to the first child of an element.
- :second-child: It is used to give style to the second child of an element.
Example:
We are going to demonstrate how to apply styles to HTML elements using pseudo-classes. In this example, we will use the element selector and ":hover" pseudo-class to modify the link color upon hovering over it. Additionally, we will use the ID selector and ":focus" pseudo-class to adjust the background color of the text area when it is in focus.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Styling HTML elements using pseudo classes</title>
<style>
body {
background-color: antiquewhite;
font-family: Verdana, Tahoma, sans-serif;
}
a:hover {
color: blueviolet;
}
#message:focus {
background-color: paleturquoise;
}
</style>
</head>
<body>
<h1>Styling HTML elements using pseudo-classes</h1>
<h3>If you want to learn online tutorials, then you must visit the following website:</h3>
<a href="https://www.C# Tutorial/" target="_blank">Click here to visit the website...</a> <br> <br>
<label for="message">If you want to share feedback, then write it down in the box provided below:</label> <br> <br>
<textarea name="message" id="message" cols="80" rows="5"></textarea>
</body>
</html>
Output:
We can witness the output below:
When the link is hovered over by the user and the text area gains focus, we observe that the styling of both the link and the text area is altered through the application of pseudo-classes.
We have three different ways to apply styles to HTML elements:
1. Inline:
It is the initial approach for applying style to HTML elements through the utilization of inline CSS. This technique involves inserting the "style" attribute within each HTML element where styling is desired.
Illustration of inline CSS:
Let's explore inline CSS using a visual representation.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Styling HTML elements by utilizing inline CSS</title>
</head>
<body>
<h1>Styling HTML elements utilizing inline CSS</h1>
<p style="color: brown; font-size: large;">We have changed the color and font size of the text of this paragraph utilizing the color CSS property.</p>
<p style="background-color: rgb(206, 133, 43);">We have changed the background color of this paragraph using the color CSS property.</p>
</body>
</html>
Output:
Here is the result demonstrating the application of the design on <p> components using inline CSS.
2. Internal:
The alternative approach involves adding visual design to HTML components using internal CSS, where the <style> tag is placed within the head section of the HTML markup.
Illustration of internal CSS:
Let's grasp the concept of internal CSS through this visual representation.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Styling HTML elements utilizing internal CSS</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
background-color: aquamarine;
}
h2 {
color: rgb(185, 14, 43);
font-size: 28px;
}
li {
color: blueviolet;
font-size: 24px;
}
</style>
</head>
<body>
<h1>Styling HTML elements using internal CSS</h1>
<h2>List of Kitchen Items</h2>
<ul>
<li> Container </li>
<li> Bowl </li>
<li> Spoon </li>
<li> Pan </li>
<li> Grater </li>
<li> Fork </li>
</ul>
</body>
</html>
Output:
We can observe the formatting applied to <h2> and <li> elements using internal CSS.
3. External:
The third method for applying style to HTML elements involves using external CSS. An external style sheet is generated, and then linked to the HTML file using the <link> tag.
Illustration of external CSS:
Let's understand external CSS using this visual representation.
External CSS Code:
body {
font-family: Georgia, 'Times New Roman', serif;
background-color: lemonchiffon;
}
h2 {
color: brown;
}
table, tr, th, td {
border: 1px solid brown;
}
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Styling HTML elements utilizing external CSS</title>
<link rel="stylesheet" href="style-external.css">
</head>
<body>
<h1>Styling HTML elements using external CSS</h1>
<h2>Employee Details</h2>
<table>
<tr>
<th>ID</th>
<th>Name</th>
<th>Department</th>
</tr>
<tr>
<td>101</td>
<td>Harsh</td>
<td>Finance</td>
</tr>
<tr>
<td>102</td>
<td>Bharti</td>
<td>Software Engineering</td>
</tr>
<tr>
<td>103</td>
<td>Ankita</td>
<td>Finance</td>
</tr>
</table>
</body>
</html>
Output:
We can witness the style applied on <h2>, <table>, <tr>, <th>, and <td> elements utilizing external CSS .
Conclusion
We have understood the style specification format in CSS in this article. We have understood many demonstrations to comprehend the style specification format properly. The following are the points to remember:
- Style specifications are the set of rules and declarations in CSS.
- Various selectors are utilized to apply style to HTML elements, which are given below:
- Element selector: This function selects an element by its name , such as h1, p, etc.
- Id selector: It is utilized to select the element by the id name. Example: #id-name
- Class selector: It selects the element by the class name. Example: element-name.class-name
- Generic class selector: It is utilized to select the element by the generic class name. Example: .generic-class-name
- Universal selector: It selects all the HTML elements. Example: *
- Pseudo-classes: It selects the HTML element and changes the state of the element. Example: element-name:pseudo-class-name
- There are three ways to apply style to the elements:
- Inline CSS: It is utilized to add style to HTML elements utilizing the "style" attribute .
- Internal CSS: It is utilized to add style to HTML elements utilizing the <style> tag under the head section.
- External CSS: It is utilized to add style to HTML elements utilizing an external style sheet and linking it to the HTML document using the <link> tag under the head section.