CSS Syntax

The CSS provides the style to the HTML element, which the browser interprets. After being interpreted by the browser, the CSS style property will be applied to all the elements of the HTML. We can provide style property to the HTML element in three parts. These three parts are as follows.

1. Selector

It is an HTML tag. All the style properties of the CSS will be applied to the selector. The selector tag like <h1> or <table> etc.

2. Property

It is a type of attribute that is present in HTML tags. All the attributes of the HTML will be converted to the CSS properties. The CSS properties like color, border, etc.

3. Value

In HTML, these are assigned to the properties. For example, the color property can have a value of either red or #F1F1F1, etc.

Syntax:

We must provide the CSS property to the HTML element in a proper way. We must follow the syntax below to implement the CSS property.

Example:

Let's implement the CSS property by seeing an example.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  /* styles.css */

body {
 font-family: Arial, sans-serif;
 margin: 0;
 padding: 0;
 background-color: #f2f2f2;
}

#header {
 background-color: #333;
 color: white;
 text-align: center;
 padding: 20px;
}

h1 {
 font-size: 36px;
 margin-bottom: 20px;
}

p {
 font-size: 18px;
 margin-bottom: 10px;
}

.button {
 background-color: #ff0000;
 color: white;
 padding: 10px 20px;
 border: none;
 text-align: center;
 text-decoration: none;
 display: inline-block;
 font-size: 16px;
 border-radius: 5px;
 cursor: pointer;
}

.button:hover {
 background-color: #990000;
}

 </style>
</head>
<body>
 <div id="header">
  <h1>Hello, CSS Example!</h1>
  <p>Welcome to javaTpoint. Here is a styled button:</p>
  <button class="button">Click Me!</button>
 </div>
</body>
</html>

Output:

Explanation:

In the above example, we have provided some CSS styles. Let's explain what we do in the above example.

In the above example, there is a body tag. In the body tag, we set the entire page's font family, margin, padding, and background color.
Also, there is a #header selector. Inside the #header selector, we have set the header section's background color, text color, text alignment, and padding.
Inside the h1 selector, we have set the font size and margin for the main heading.
Inside the p selector, we have set font size and margin for paragraphs.
We have set the button with a red background, white text color, padding, border, and other properties inside the button selector.
Inside the .button:hover selector, we have set the background color to change when the button hovers, giving it a darker shade of red.

The Type Selectors

This type of selector is seen in the above example. Let's take one more example, which provides the red color for all the heading tags.

Example:

/* Targets all <h1> to <h6> elements and makes the text red */
h1, h2, h3, h4, h5, h6 {
  color: red;
}

The Universal Selectors

With the help of a universal selector, we can provide the style property for the whole web page. Let's understand this by taking an example.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  /* Universal Selector to apply styles to all elements */
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

body {
 font-family: Arial, sans-serif;
 line-height: 1.6;
 background-color: #f0f0f0;
}

header {
 background-color: #333;
 color: #fff;
 padding: 10px;
}

header h1 {
 margin: 0;
}

nav ul {
 list-style: none;
 padding: 0;
 margin: 0;
}

nav li {
 display: inline-block;
 margin-right: 20px;
}

nav a {
 color: #fff;
 text-decoration: none;
}

main {
 padding: 20px;
}

section {
 margin-bottom: 30px;
}

footer {
 background-color: #333;
 color: #fff;
 padding: 10px;
 text-align: center;
}

footer p {
 margin: 0;
}

 </style>
</head>
<body>
 <header>
  <h1>Welcome to javatpoint</h1>
  <nav>
   <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
   </ul>
  </nav>
 </header>
 <main>
  <section>
   <h2>Section 1</h2>
   <p>This is the content of Section 1.</p>
  </section>
  <section>
   <h2>Section 2</h2>
   <p>This is the content of Section 2.</p>
  </section>
 </main>
 <footer>
  <p>� All rights reserved.</p>
 </footer>
</body>
</html>

Output:

Explanation:

In the above code, we have implemented the universal selector. It is represented as "*". With the help of a universal selector, we set the margin, padding, and box-sizing.

The Descendant Selectors

When there is a need to provide the style property to an element present inside another tag, we must take the help of a descendant selector.

Syntax:

parentElement childElement {
  /* Styles applied to child elements */
}

Example:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  /* Style the main menu items */
.menu > li {
 display: inline-block;
 margin-right: 20px;
}

.menu > li > a {
 text-decoration: none;
 color: #333;
 font-size: 18px;
}

.menu > li > a:hover {
 color: #f3727b; /* Beautiful pinkish color on hover */
}

/* Style the sub-menu items */
.sub-menu {
 display: none;
 position: absolute;
 background-color: #f7f7f7; /* Light gray background */
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.menu > li:hover .sub-menu {
 display: block;
}

.sub-menu li {
 padding: 10px;
}

.sub-menu li a {
 color: #666;
 text-decoration: none;
 display: block;
}

.sub-menu li a:hover {
 color: #f3727b; /* Beautiful pinkish color on hover */
}

 </style>
</head>
<body>
 <nav>
  <ul class="menu">
   <li><a href="#">Home</a></li>
   <li><a href="#">About</a>
    <ul class="sub-menu">
     <li><a href="#">Mission</a></li>
     <li><a href="#">Vision</a></li>
     <li><a href="#">Values</a></li>
    </ul>
   </li>
   <li><a href="#">Services</a></li>
   <li><a href="#">Contact</a></li>
  </ul>
 </nav>
 
</body>
</html>

Output:

Explanation:

In the above code, we have created a horizontal nav bar that contains some nested menus. When we hover on any menu, then it will change the color.

The Class Selectors

In this selector, we must provide the style properties based on the class name. All elements with the same class name will be formatted per the CSS style properties.

Syntax

.className {
  /* Styles applied to elements with the class "className" */
}

Example:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  .card {
 border: 1px solid #ccc;
 border-radius: 10px;
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 max-width: 300px;
 margin: 20px;
 overflow: hidden;
}

.card img {
 width: 100%;
 border-top-left-radius: 10px;
 border-top-right-radius: 10px;
}

.card-content {
 padding: 20px;
}

.card-title {
 font-size: 24px;
 color: #333;
 margin: 0;
}

.card-text {
 color: #666;
}

.card-link {
 display: inline-block;
 background-color: #f3727b;
 color: #fff;
 padding: 10px 20px;
 border-radius: 5px;
 text-decoration: none;
 margin-top: 10px;
}

.card-link:hover {
 background-color: #ff8f9c; /* Slightly lighter shade on hover */
}

 </style>
</head>
<body>
 <div class="card">
  <img src="https://upload.wikimedia.org/wikipedia/en/thumb/4/41/Flag_of_India.svg/1024px-Flag_of_India.svg.png" alt="Indian flag">
  <div class="card-content">
   <h3 class="card-title">Flag_of_India</h3>
   <p class="card-text">Indian flag</p>
   <a href="#" class="card-link">Read More</a>
  </div>
 </div>
 
</body>
</html>

Output:

Explanation:

In the above code, we have created a beautiful card that contains information regarding the Indian flag. The class .card styles the overall card container while. The card img applies styles to the image inside the card. .card-content targets the container for the card's content, and .card-title, .card-text, and .card-link style the individual elements inside the card content.

The ID Selectors

With the help of the ID selector, we can provide the CSS style based on the ID attribute. All elements with the same ID name will be formatted per the CSS style properties.

Syntax:

#your-id-value {
  /* CSS properties and values go here */
}

Example:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  /* Style for the button container */
#button-container {
 text-align: center;
 margin-top: 50px;
}

/* Style for the beautiful button */
#my-beautiful-button {
 background-color: #ff69b4;
 color: #fff;
 padding: 10px 20px;
 font-size: 18px;
 border: none;
 border-radius: 5px;
 cursor: pointer;
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Hover effect */
#my-beautiful-button:hover {
 background-color: #e35a9f;
}

/* Click effect */
#my-beautiful-button:active {
 background-color: #c23d85;
}

 </style>
</head>
<body>
 <div id="button-container">
  <button id="my-beautiful-button">Click me!</button>
 </div>
</body>
</html>

Output:

Explanation:

We created a pink button with a click-and-hover effect in the above code. This button is situated inside a center tag. When we hover over the button, the background color of the div tag slightly changes to a darker pink color.

The Child Selectors

Previously, we have seen the descendant selectors. Another type of selector is available in the CSS, i.e., child selector. It has different functionality in comparison to descendant selectors. The child selector uses the">" symbol to target elements that are immediate descendants of another element.

Syntax:

parent-element > child-element {
  /* CSS properties and values go here */
}

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* Style for the main menu */
.main-menu {
 background-color: #333;
 padding: 10px;
}

.main-menu ul {
 list-style: none;
 margin: 0;
 padding: 0;
}

.main-menu li {
 display: inline-block;
 margin-right: 20px;
}

.main-menu a {
 color: #fff;
 text-decoration: none;
 padding: 5px 10px;
 transition: background-color 0.3s ease;
}

/* Style for the direct child sub-menu items */
.main-menu .sub-menu > ul {
 background-color: #ff69b4;
 padding: 10px;
 display: none;
 position: absolute;
}

.main-menu .sub-menu:hover > ul {
 display: block;
}

.main-menu .sub-menu > ul li {
 margin-bottom: 5px;
}

.main-menu .sub-menu > ul li a {
 color: #fff;
 text-decoration: none;
 padding: 5px;
}

.main-menu .sub-menu > ul li a:hover {
 background-color: #e35a9f;
}

  </style>
</head>
<body>
  <nav class="main-menu">
    <ul>
     <li><a href="#">Home</a></li>
     <li><a href="#">About</a></li>
     <li class="sub-menu">
      <a href="#">Services</a>
      <ul>
       <li><a href="#">Web Design</a></li>
       <li><a href="#">Graphic Design</a></li>
       <li><a href="#">SEO</a></li>
      </ul>
     </li>
     <li><a href="#">Contact</a></li>
    </ul>
   </nav>
</body>
</html>

Output:

Explanation:

In the above code, we created the navigation menu containing the service sub-menu. With the help of the child selector, sub-menu items are styled differently from the main menu items. When the user hovers over the "Services" menu item, the sub-menu with "Web Design," "Graphic Design," and "SEO" options will be displayed on a beautiful pink background.

The Attribute Selectors

With the help of this attribute, we can apply the style property to the attribute.

Syntax:

[attribute^= "value"] {
  /* Styles for elements with the specified attribute starting with the value */
}

We must follow some rules during the implementation of the attribute selector. These are as follows.

p[lang]: It can select all the paragraphs with the help of the lang attribute.
p[lang= "fr"]: It can select all the paragraphs with the help of the lang attribute, and the lang attribute should have a value of exactly "fr."
p[lang~= "fr"]: It can select all the paragraphs with the help of the lang attribute, and the lang attribute should have the word "fr."
p[lang|= "en"]: It can select all the paragraphs with the help of the lang attribute, and the lang attribute should have "en" or begin with "en-"

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* Style for the gallery container */
.gallery {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 10px;
}

/* Style for all images in the gallery */
img {
 max-width: 100%;
 height: auto;
 border-radius: 5px;
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Style for images with specific "data-category" attribute */
img[data-category="nature"] {
 border: 2px solid #4caf50;
}

img[data-category="cityscape"] {
 border: 2px solid #2196f3;
}

img[data-category="beach"] {
 border: 2px solid #ff9800;
}

img[data-category="mountains"] {
 border: 2px solid #9c27b0;
}

  </style>
</head>
<body>
  <div class="gallery">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Shaqi_jrvej.jpg/1200px-Shaqi_jrvej.jpg" alt="Nature" data-category="nature">
    <img src="https://images.unsplash.com/photo-1514565131-fce0801e5785?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8Y2l0eXNjYXBlfGVufDB8fDB8fHww&w=1000&q=80" alt="Cityscape" data-category="cityscape">
    <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHCBUSFRgSEhUYGRgZGBgYGRkZGBkYGBgaGRwaHhgYHBocIS4lHB4rIxocJjgmKy8xNTU1HCQ7QDs0Py40NTEBDAwMEA8QHxISHzQrJSs0NDQ2NDQ0NDY0NDQ0NDQ0NDQ0NDQ9NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NP/AABEIARMAtwMBIgACEQEDEQH/xAAbAAABBQEBAAAAAAAAAAAAAAACAAEDBAUGB//EAEIQAAEDAgMECAQDBwIFBQAAAAEAAhEDIRIxQQRRYXEFBhMigZGh8DKxwdFCUuEUFRZicoLxM5IjNKKy0kNTVHOT/8QAGQEAAwEBAQAAAAAAAAAAAAAAAAECAwQF/8QAKhEAAgIBAwQCAQMFAAAAAAAAAAECEhEDE1EEIUFhMaEyFCLxI3GBkbH/2gAMAwEAAhEDEQA/AOPDUoUmFPC9E8wjwp8KOE+FAiOE8KTClhQBHCWFSYUsKoAMKWFSYUsKAI8KbCpcKWFAEWFLCpMKWFAEWFNhU2FNhQBFCaFLCUKQIoTQpcKbCgCKEoUmFNhQMCEkcJ0gJsKfCpQxFgTAhwpw1ShicMQGCKE+FS4E+BAYIcKfCpsCfCqDBBhSwqfCnwoDBXwpYVPhSwoHggwpsKsYU2BAsFeE2FWMCEsQGCDCmwqcsSLECK+FItUxamLVIEOFNhUxahLUARQkpMKdAy2GJwxThiIMU5KwQBiIMU4ppxTTyOpXDE+BWAxFgTyPBWwp8Cshifs0ZDBVwJ8Cs9mn7NPI6lXAmwK32abs0ZHUq4U2BWsCWBGRVKmBMWK0WJixGRVKpYhLFbNNCWIyTUqFiEsVssQliWRYKpYhLFaLExYkGCtgSUxYkjIYNAMRCmrApoxTWeToqVhTRBisimiFNFiqFYMRCmrQpohTRYdCoKafs1cFJOKSLD2yn2afsldFFP2KLjoUeyTdmr/YpjRTsPbKHZpuzV80UJpIsJwKJpoDTWgaSA00WJqUCxMaaummhNNFhOBRLEJYrppoDTRYlwKRppjTVw00JYjJNCkWJK0aaSMhU0200Ypq02kpW0lz3OyhUbSUjaStNpKVtJK5SgUhRRiiropohSSuVQpiiiFFXhSRCki5SgURRT9ir4pJdklcdSh2KY0VodkkaaLhQzjRQmitI0kJpJ3BwMw0UBorTNJA6ki5LgZjqSjdSWm6ko3UlVyXAzDTQuprSdSUbqSdyXAzTTQOYtF1JRupJ2IcDPcxJXHUkk7BQ2W00baastYpG01wWOupWbTUjaasNYpGsRYeCsKaNtNWhTRhiLBgqikjFFWhTRhiLDKgop+xVwMRdmiwFLsU3Yq92aY00WAomiozRWiWICxFgM91JRmmtFzFG5iLBgznU0Dqa0XU1E6mncWDPdTQOprQdTUbqSdhYM91NRuprRdSUbqSdxVM51JJXXUkk7iqajWKRrETQjAXDc6KgtYjDEQRBVcVRBiIMSCMJ2FgQajATBEE7EsQCfCnCMBFiWwITFqkhMQiwskRCYhSFCUWLTISxCWKUoSiw0QFiAsVgoSErDwVnMQOYrJCAtRcdSqWIHMVotQFqVx0KjmJKwWpIuFSUPRB6oioiFVcO4dT0y8Hog9UBVRCsnukPTL4eiD1nisiFZG8S9JmiHI2uWc2upmVknr4M5abNBt1YYxVqBlXm5Lq6b+q+5yzeAezUNRitKKsujX01GOURGTyU3FRuchrVIVR9ZectdHXCDZaL0JeqhroDXT3jVaTLhchLlUNZCayN0pabLZchLlW7ZCaqNwpabLRehLlWNVCaiNwpaZYLklVNRJK49s5N3WZ4P8Ayzo3mowekJ39aThJbQcSNC9sDnAK5vZxMAMrFs/hrsHOzmWVqvQeBP7NWdxdXDrcQ0Beo+k0uPs4l1U35+jbpdaT+PZ3/wBjg/zsIRDrWzWlUHMsAPIkrmm7S0XdsXe346oHjDr+ijrbaZJGztbOge+R5v8Aok+j0uAXVT5+jsNn6yCoYZRe47gWE+QMqz+9367LXEa4QB5krje1e+D2Lf8A9pP/AHWUtHY3ukO2aT/9oZ6ulQ+j0uC11Emdd++z/wCxVGl8ABO4S5WqXSj/AP49byafk5cWzYDihrGg2gNqh5B/tAV7Y+jKwdIYXtJuGve1zSd4BB9Cs5dFp8Gi1W/k7jZumXCJpPb/AFQ30JlXWdYW/ld6EfNcbU2d7DgdQ2kjcKr3CeBLOHophUIECk+dzn1Z9GBZrQcO8HgFDSn+SOv/AIhb+R3kPuoavT4IMNNpm7NOOKFydWlWcBGAcHVHtngMUQm/ZdozwsE5DtXeYvdKS1ZdpN4LXT6C+DcqdMl0ksgQT8dObaRitPFZlXrBTb8QcDuBY4+TXFZo6N2iTGAlwiDUdPlw+iCr0RtUQdmpvyAcHvDrf3tRHpYP5RTrD4Ln8SsxR2dSJzAB9ASnq9ZGM+KnVHNgA8y6I8VmV9hqs/1KNNhNpdtDwco/MbQq7eiHlpeX0cI07d7o/mPetf6LVdJpJ9zOWq/Bst6ysdGGnUdOgwT4DHdCetFMWLKgjOez/wDNYv7twCarXGB+CpY7oh4hA/YdiI/5l7Txcc/WVquk0uDJ680bT+tlJphzKg5tAnlJSHWhhu2lVIzloY4eYesSh0Xs5kDaQ6wIE+ckApqfV9jzh7YRmINj/c4QqXSaRP6nU9GwettMZ0qvkz/yTnrUzLsqu+IZPiMdlk1OgyABTf8A3AscLbiCCf8AG9ZtbobaAC7GBGjjB+tlS6PS4+yX1Wqv4OkPWtpyoVD/ALPukuYbR2mA0FjvwwHXtJvF5sUk/wBHpcfYv1mqalDoYS2XiTIEviecju+Sv0+h3sEiqxu4kNIO6DaVibP0ztNOBTLRyYGR5BSHpHaHDvOfA/IAAJ/oufVbvJhFo6aj0cXS41abjEGWgAjmWx5SpmdG7M6cfY5T3XtcTyAC5J21bQ78dSJmPhnnADkVJ+0Du4ngTkHO1zyO5S4vk0Ulwdeeq+yYcby1gnQg55XiMroG9C7ICOzrSZiO7YxlLQOS5TDUNmwNCS4lw4TBI80mbJVnExjiciRPjBEFTV8jTXB1Z6IOMGk97mRdtRoLBlaXzKN/Rz6BLqfZadzsTun4sQaVzjOj6rRLg9nC48nST6qzs2y1xk6qBxEtPMgn1UNPk0T9G47pvaAwxs5cRkQ5jG234HuPhKz3dZ9sFnUaYP8AM0kjldSMG1iPieIPdcAWkHSMdwpH9KVxDamzsdFruew+bwf+5Q+/gtGK7rDtDnElrCdP+GwxyJAt5qN/Su0ubhLWnj2dMHzhdLstYPEO2J44g4wP7ty0R0cyLsPg1xUuSXgtf3OJ2HZqtQOeQABqWt+1vBZ9XpKu1xDHvsYEOIAjhkvR+xa0FjaZOeeEfO6rP6L2doL3sa06iGDLiSAlB/ubZpJpxSR5w+pVqGXuJO8/JVH0nkr0PpDadkZMMc+YnAxhbfUmY1WZS2vZu8Ts79R3YJHMWW6fnByzSxhs5TZNkqF3cJB3gkfJXanRe0C7nOvfM/UroafTGztjuVQQAYDBY5/m+alHTezkd7EHHRzSI4ks+Suz4Mqrk5JlStTloqvEZwD8x9FM3pmtk9weBo9rTHIkYvVdOzbaD5gMM/zPBgcMJjkon7VsjRLru/lY5/O8fRVb0TX2Y1HpsAQ5jxnMHE0zwsG+CMdJsd8FQstEOYLD+oSSeHEq1tPTeyFpDWCRliafo36qH9/7M0g9m02uAxw8nYx8kZ9MX+UVGl8nDtTTN72HOXgeiZWf4h2bIbOzme79HH1SVZ9C7cm+NgDD3sDTEw54y8SPNWKdOnlipjm8X36rzMbQ3N0OneJN5vnxR09tAthZBnNrddxiyycZclqcT1AU6AF30xbMPZ4kTohO07MLmuyJEjtGRIXmbNrZewuDoLHeICX7dOcHmApcJclqcT009I7I3/1meBDuY7spm9J7KbCq0f3YM+MBeY/tBi0cvshNVxUVfJV0ers2vZm37RmWWNhPheVLS6Y2aYbVYNYmLDwvkvKqfaaOPKbeRU7aldpDhIMZgMEjjAv4pvSz5Hu+j06p0uwfBL85+Fkc2uIPorWz9IF47rd34SSOHdnzXmOw7TtGMAPeAT8IcWtvM2YDBNrgLXp7btbSA4nKe9Dozi78rjUrKUcPBov3LJ2z+l6TXQ+oBFowvF+Mi8boUlPaqFQGHNdHGNeIHFcq7pGvh71em2IlrGMLyDr3S4RfM2uszaOn3tsx79O+4y60GYiLnfuChRb+CsJLuzt5p/hqubexFTE052AJTV20nA9phe4Z44Mc2kwM1wg6eeRBqP1JORvpyUTOsNVlmvkaBwnDxE5FWoTG3FeTtauyAtIh1QH8OKm1ozyw4fnooRsAFwwkjIudcX/M105c9FxG09KVn3dWdiBtBIEbxHPcq3732if9WpPFxPzWihMylOB3g6Mc6C9ocYiWlgMSYBJbJHNO3ol7rllPWMNhHEA3K4UdYNo1qxlk1s/Lmpn9Zq5sazgIGQAJ33ABH6cU66nozctP2do7oiXT2LRaC682/KQN+iA9Al1y0B1vhNvGc1zDOtlYH/UmcyWgA8e7EWhVq3WOu4x2jok5PcCJ8bj7qq6grQOj2joH8TqYLo4XPEuNxyhVHdDAmIExMd251Ah1xbOFy9fpE51AHkm5eMWecfl5gKD96Opvc+nDMWbWd0AZkcpvCtKXJDcDqKvVxsB7w1k73MAP/VdJc8OnngYQcIJJJaACTneM7z5pJ4lyLOmXX9B02zfz+sGyjPQ9ETLwIz74HlKt0ur4kh1R7r3gtb4wb7lK3q2wm/am15c0jhcR6LHdivJpsyfgov6O2Zg7zx4OLp8tUTBsveA0GeCd28rQd1XojV/KT84Sp9XaAscRIP5iAOEwAlvw5ZS0ZcIy2N2eRDS6xNhFomYJF4WlT2rZmfDTINjBOHwu4q6zq7RABwb83udytOu9XG9DUAZNJl/5G8cpv7Cylrx9msdCXoxh1kYzKm2L2Li8DwsAPv5u/p99T4aIeIizHmL6Q6MuGZXQ0+j6LSD2TBuMN3biFcpQ2GtbHKLAcvospa6Xwn/s0Wi/L+jjhtVdzu5szgdCQ48vjMJ2dH7a8l5xSINy467wN8WXaNdfW/E88vH7qejTJdrYxJbiB3zkYuPVZvqpZwkitpJd2cts3VCu/VtwTunQwTzUW0dUqzHQzETBN2zEZxBXo+xtIaJcCYgENvAuJzH+VX2umM8Tib2khoOcz8OXlC03JpWyZKSbxj/p5ZX6FqticR3HAconf6ZqCn0JVdcEx/Q434gSfFegbZVdiLSQDAM4eG6d/Leqr9sju/EQYu5rQLHO8gZ6Jx6mZb0Ys4P9zVy7usLp1AMesFEOh6osQLHJwBjyOS7Z+137gabASC5wiDmWyLFVmbW+QAD/ALI1/mdbyOa0XUT4M3oR5OWd1brE3YL3sRlGt7KWn1YMd+19ziY5ALqnbU9xPcgX+IlpGoynjf5qI1KpHdDWmJzL/Q4Rv80b83wLYgc+3qwDEPkXyxHz3Z/oi/hQC5MjfE/PRdDSfUg/8TLOwjK5kCETH2Hfmdwmd/PwKHrT5Hsw4OeHV5jbHPdhlMer7LiIjmPmI/wuhcXRexiYi30vxUZdqMs5keQH14o3p8hsw4Ofb0Az8QytYg3+yS3jVkxE+APoU6W9MNmHBG2qCCRJ0MTaIEnve4UlOqDF36ZuJkneJNzHzQ0aEC9jM68Lm98oRMoOIIN40Bz1z/ws3U1WQ+0Du9hvYiSJFxIukysGyMJtAAkAAnQcpRNpkCwAAgb9+Z0RmhYwNSYnS/G2/wAVLqUsgdtwiQTYg5HeJ3+qNr3RAwTcSdRPA6e9ycbKCTEDdIG6B8zuRsBHMRm6RymLX0UPHgtZAY9zRMNBLjctMmDeAD7Kdr6k2IIyktg3nIE+75WRNYRLiM4BvM/pJRtPetlfdeOGZus5MtIOkxxvj4ZN9D9StfYGiSb53N5mYEDSAc1l0bmIvE2Fo38pWj0bBEyMxF7yHXjCbZ5xAMHRZx/InV/E6Go4Buc2EZ5+GXzXP7ftBaMMSZBsTAiCAIjiOHkuhcAWG9oucjH0Od1z/SdGIaTBkyNIcTBgTu0sI0C6epsksHH01bYZkvqDFJEkE4QQDaDAnkdT47wLAXAniYsS08I8B5JOeBZulp8NRnH3UT5Ggyz45anmuaLZ6DiiSpa4MiBIIJ4b1FIt3RNiMhyPLilULSP8cyD6W+SZjY+EG2om06ADPLMLVZwQ0hNGKQRPIwOMEXKaoMOcgRE4gQP9wPqnM6AfXxOhsk4g2kaWN51vPzVpktAsaNDrH4DNsoBjdxUdVoFnGBHdORBOmImZySds7JggDkcIO8mD7uoX9HtdbE4RlJJG+0555rRY5M3ngN7SGgzyh2ImQb+u9R4XjjN7XnwBj1VZ2xVbGnVaRNg8FoMaHAfe9U9oO0AEFuRvhc2M9xuRuutFFP4aMnJr5TL7nRneLXnf/KSks13SFVpkscN5cDA3C0pKtpk7qOg2apNgHGL3Dh4X93WgxknInmHD5hajG0jk5p5OB9JU7dnady4W5HVeKMtuzHSRO5J9IsaSbwDlmtfsOfnHyS7MjJKz8iuvBg0qjHnC17Q65wg96Brhz+al/ZyLR9+claxpngOIifUFP2XuyHLga1OTIfs2kegMqE7ORyyF4sto0OCB1FZubLU0ZDKRaeXIHxWlsO0gOEzuJuRAOXMyiNMaoWsGscfd1luuLzgcmpRwzpqD8bMTYMiBefNY3StnSbmQIggCMgCDmTPHPNamyVGspS0i05nCCeMrArPLnTIneJGpNtdV29RrRUI8tZ7fBwdPD97fhGVtLsTsRtuGp0MmL8BooH05sSd++JHuwstYbK2ZAun/AGBp0XPGR6FomM9gPeF4Gu60G+vvcmYyAN0zxsb5GM/eS2D0cNDmZKZ3R+gJ3i9xbJbJktpmV2ZEm4ym+trmeSixMBDyQCBcEgScyDcLWPR5v3iZjMYssigqbEXNwmIIgg3z95K00QyhSIdJaQW6wMQ3AXj35oXtjjvmcoyiSJurNHoplMDs24d9zfiRcfJFU2S5O/ifL2NU8rPYnvjuU8E5Fze6ASM4m4AUbWGLHK5mwvpPBXHUIESY0/Tl91XrUd+XE+p3lNCZV7Izikwfy35XvZJG5ruBny8JKSvuT2OdZUvchWaW2EZE+B96qiCnDo4K3HI4yaNel0s8Xa90f1O+6tU+nKoycYkZnLw3LBY7Ia7h6KQOPwxB4wOfiocEWpnRUusdQGc9MrqwzrM+0gcTC5hszppbX3CkAcdffv5rNwRaafyvo6lvWUzOGeANhE3y9wpv4hb+JpHj9IXJtF+JuRv5/qpmOibADz8OazlAtRg/B1H76pnR3p9042+mblp8cOq5um47jzEZ71I2pe82195rKWmaKEDq6G30WgtIeJiQMIxCIg3+SrDa6Y1dro23jKwcbspy9eSje+dPXkppnC4FtQWX3OlZ0nSyDj4j/Klb0vR/MLcD9vFcY98/POFXc/Pj7yW0dMzlCJ3o6Xo6PCQ6XpH8Q8bfNeeveeXv/KB7z9BYiOK1UGZtRPQz0rRP42eaF23Uj+Nm74h5Zrzpz3XknzPAoS9+hP393WigQ2j0jtGHJ4yzkRfjMoXNESHj55ZjivNy92+Rx+6A1HxGK3Mqlp+yHI9HfT4gqtVYRp6rz9tR4yc4TuJQiu/R7t3xFNaXslyO3qMGZvzE+qS4V20P/O7/AHFJVteyL+ixh4n/AByRNaJ4aaqKU4PJNotNFljI3ow2ddVXxmyfGd6lxZopItNHH9VIxkyQSI/p1OXqqjHkX3e9FKHxl48eItZZuLNIyRO0EnO/u9slIG2jEc8xcgawq7qms/ZEHmJPKPn4KXFlqSLWIC4IjSRfPn7upASLGDaBaIG+R9ZVNtc+Ma2hG2oRbXnmD7KhxZaki5nM6C1755Ze7qEk/oePIj3Cja+5nhy92UfaX0N/fNJRG5kr3g/ELzznjcqJz5tfKcgLhR1wd+eW8+ymcy8TmAc/OVaijOUmO9+8fK/qgL7xhykRZBVaJAEmQNIg7uKjIIzMSd60SM3JhOqcI980Bff7m/OwSLfe5A4cvBWkiG2Jx93PzSJt8Vk3MeqYQmRkcO4+g+yCBmBblGWifiB429Sl2g0Npzi0p4JbAI3pJ+0k6JlQuwptZEwqHF5JwUNCTJ5RhwmVX7TgiD96lxKUixiIv5Ipm6rtfCftAL8UqlqRaa+xHC/gkyoADnPNQGpPlHL7oW1NynBVy3j4hSCoQY4Koalo80mO3nkEqlKZZbVzQuq7slE4Yd2XghL92+yFFA5smL+PBCHgZ+igcCBPudQk6p5Hxy4qqk3JsQ8R7zQOedSoi+Jgjmow8qlElyJsaYTvhQl4lD2l7nu6nKLp1IuSiSbCUzq14aJ46fqFA6vIhvw79ShBAyVKPJDlwSEk5nK8aeATl/y9VCHJiVVRWJCEyjxJIwTkNPokkgBb0Y+iSSTGhN0SSSQMM6ck+SSSksN2Y8EVTP3uTJJDBdl4phokkhAxn5n+opN0/q+qSSfgXkR18UH6pJJoTI3KKpnGhvHHekkqRnITskySSpEsYJ0kkACkkkmB/9k=" alt="Beach" data-category="beach">
    <img src="https://cdn.cdnparenting.com/articles/2018/08/602444213-H-1024x700.webp" alt="Mountains" data-category="mountains">
   </div>
</body>
</html>

Output:

Explanation:

In the above code, we have created an image gallery. Then, using attribute selectors, we add different colored borders to images based on their "data-category" attributes. Images with "data-category=" nature" will have a green border, "data-category=" cityscape" will have a blue border, "data-category=" beach" will have an orange border, and "data-category=" mountains" will have a purple border.

Multiple Style Rules

With the help of this, we have to define the multiple styles for a single element. We must define all the corresponding rules and values inside the single unit. Here, we have to separate all the properties, which are separated by the semicolon (;).

Example:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  /* Global style rule for all text elements */
body {
 font-family: Arial, sans-serif;
 line-height: 1.6;
 color: #333;
}

/* Specific style rule for elements with class "heading" */
.heading {
 font-size: 36px;
 font-weight: bold;
 color: #007bff;
}

/* Specific style rule for elements with class "content" */
.content {
 font-size: 18px;
 margin-bottom: 20px;
}

/* Specific style rule for elements with class "btn" */
.btn {
 background-color: #007bff;
 color: #fff;
 padding: 10px 20px;
 border: none;
 border-radius: 5px;
 cursor: pointer;
}

/* Hover effect for buttons */
.btn:hover {
 background-color: #0056b3;
}

 </style>
</head>
<body>
 <body>
 <h1 class="heading">Hello, World!</h1>
 <p class="content">Welcome to javaTpoint</p>
 <button class="btn">Click Me</button>
</body>
</body>
</html>

Output: