Style Specification Format in CSS

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 style specification format is the structure that is utilized to define the rules for styling the HTML elements.

Syntax:

selector {
    property1: value1;
    property2: value2;
    ...
    property_n: value_n;	
}

The "selector" is utilized to select the HTML element on which we want to apply the style. The "property1" and "property2" …. property_n are the properties that are utilized to give style to the selected element. We can put many styles on a single element utilizing different CSS properties.

There are distinct selectors in CSS, which are given below:

1. Element selector:

The element selector is simply the name of the HTML elements like p, h1, div, etc.

Syntax:

p {
	property: value;
}

The "p" is the element selector in the above syntax. The name "p" is utilized for applying style to <p> 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 output, we can witness the style provided on the HTML elements utilizing the element selector.

2. Id selector:

The id selector selects the element with a specific id. The "id" attribute provides the id name for the element. The ID name should be unique for each element on a single web page. It is selected by adding a hash (#) character in front of the id name.

Syntax:

#id {
	property: value;
}

The "#id" is the id selector in the above-given syntax.

Example:

We will utilize the id selector to give the style to the HTML element. We will give style <h1> and <h2> elements in this demonstration.

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 output where we can witness the style provided on the <h1> and <h2> elements utilizing the id selector.

3. Class selector:

The class selector is utilized to select the element which has a specific class. The "class" attribute is utilized to give the class name to the element. We can give same class name to different HTML elements on a single web page. It is selected by adding an element-name and dot (.) character in front of the class name.

Syntax:

element-name.class {
	property: value;
}

The "element-name.class" is the class selector in the above syntax.

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 output where we can witness that the style has been applied to the HTML elements utilizing the class selector.

4. Generic class selector:

The generic class selector is utilized to provide the same style to different elements. The "class" attribute is utilized to give the generic class name to the element. It is selected by adding a dot (.) character in front of the class name.

Syntax:

.class {
	property: value;
}

The ".class" is the generic class selector in the above 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 utilized to select all the HTML elements. The symbol asterisk (*) is used to select all HTML elements.

Syntax:

.* {
	property1: value;
property2: value;
}

In the above syntax, the "*" is the universal selector. The properties are written inside the curly braces.

Example:

We will apply the style to HTML elements with the help of a universal selector in this demonstration.

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 witness that the style has been applied to the HTML elements utilizing the universal selector.

6. Group selector:

The group selector is utilized to select many HTML elements at a time. It allows the application of the same style to many HTML elements.

Syntax:

element1, element2, element3, ... {
	property: value;
}

The "element1, element2, element3, …" is the group selector in the above syntax.

Example:

We will apply the style to HTML elements with the help of a group selector in this demonstration.

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 witness that the style has been applied to the HTML elements utilizing the group selector.

7. Pseudo-class:

The pseudo-class is a selector used to select a specific element and change its state. The symbol colon (:) is utilized before the pseudo-class.

Syntax:

Selector: pseudo-class. {
	property1: value1;
property2: value2;
...
}

The selector name is written in place of the selector, and the name of the pseudo-class is written in place of the pseudo-class. The symbol colon (:) is used between selector and pseudo-class. The properties are written inside the 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 will apply the style to HTML elements with the help of pseudo-classes in this demonstration. We will be utilizing the element selector and ":hover" pseudo-class to change the link color when the user hovers over the link. We will be utilizing the id selector and ":focus" pseudo-class to change the background color of the text area when it comes to 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.javatpoint.com/" 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 user hovers over the link and the text area comes to focus then we can witness the appearance of both link and text area has been changed utilizing pseudo-classes.

We can provide style to the HTML elements in three methods:

1. Inline:

It is the first method of adding style to HTML elements by utilizing inline CSS. In this method, the "style" attribute is used inside each HTML element on which we want to put style.

Illustration of inline CSS:

Let us understand inline CSS with the help of an illustration.

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 output where we can witness that the style has been applied on <p> elements utilizing inline CSS.

2. Internal:

The second method is to provide style to the HTML elements by utilizing internal CSS for which the <style> tag is utilized inside the head section of the HTML code.

Illustration of internal CSS:

Let us comprehend internal CSS with the help of this illustration.

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 witness the style applied on <h2> and <li> elements utilizing internal CSS.

3. External:

The third way to add style to the HTML elements is using external CSS. The external style sheet is created, and then the external file is linked to the HTML file utilizing the <link> tag.

Illustration of external CSS:

Let us comprehend external CSS with the help of this illustration.

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:

1. Style specifications are the set of rules and declarations in CSS.

2. 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

3. 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.