In this tutorial we will show you the solution of CSS multiple classes same style, as we know css used to style html elements, here we used internal style method to show demo.
We defined two buttons with two different class attributes here we used both of them with block of same styles.
We can use same styles for multiple elements classes also when it needs and it is used to reduce repeated code for every element classes.
Step By Step Guide On CSS Multiple Classes Same Style :-
We can implement styles using three types (i.e inline,external or internal) Internal means we have to define our style within <style> tag in head block and inline means we have use style within element definition, external means we defined our css at separate file with .css extension we have to import by <link> tag within head block.
Here we used internal style method and in our program we defined two <button> tags with name ‘Click’ and attribute classes ‘btn1 and btn2’. By using them we put’s some same styles on it.
Then we defined separately when we need to give different values for particular style property so we used this to given them separate background colors.
<!DOCTYPE html>
<html>
<head>
<title>Multiple Styles</title>
<style>
.btn1,.btn2{
padding: 5px 1rem;
border-radius: 20px;
color: #000;
border: 2px solid yellow;
border-left: 0;
border-top: 0;
cursor: pointer;
box-shadow: 2px 2px 8px #555;
}
.btn1{
background-color: rgb(180, 255, 42);
}
.btn2{
background-color: rgb(255, 42, 141);
}
</style>
</head>
<body>
<button class="btn1" >Click</button><br><br>
<button class="btn2" >Click</button>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is containing information about webpage and if you need any external file those links are declared here. <title> tag is used for set the webpage title.
- When we needs to define some same styles for more different element classes we needs to define all different classes before that ‘.(dot) symbol’ with comma between them after that within curly brackets we can give any number of styles.
- Here we declared classes ‘.btn1,.btn2’ together then we defined styles. Within that we sets button padding to ‘5px of top and bottom and 1rem of left and right sides’, ‘border-radius’ sets to ‘20px’, ‘color’ sets to ‘#000’.
- Then border sets with ‘2px-thickness, solid-border style, border-color:yellow’, when we needs border only on right and botton we needs to set ‘0’ value to other sides so we sets ‘border-left to ‘0’ and border-right to ‘0’’.
- After that we set’s style property ‘cursor’ to ‘pointer’ so when we mouse over them its cursor pointer symbol will change and point it. When we using box-shadow it creates shadow around the button and also used to highlights on page.
- Finally we used one style with different value so we defined them as separately then we given ‘background-color’ with respective values.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- Here two <button> tag we defined with class attributes ‘btn1,btn2’ and its styled by as we seen at point 4. <br> tag used to break line on page so we can get some space between them.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion we are able to know how to use multiple classes with same styles.
When we load our program on browser we can see those styles clearly.
It is really useful for you in future because when we develop websites there had several pages so we need to give same block of styles for each page elements.
We can use any block of styles on multiple classes it will surely work. By using this method we can reduce our code length and memory..,etc.
I hope this tutorial on CSS multiple classes same style helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
