How to Override the CSS Properties of a Class using another CSS Class?
Last Updated :
25 Sep, 2024
To override CSS properties with another class, use the `!important` directive in CSS, emphasizing a style's importance, and overriding others. Applying a new class to an element replaces or modifies styles from its original class, allowing targeted adjustments to appearance, layout, or behavior.
Below are the approaches to override CSS properties of class:
Using !important property
The !important property in CSS ensures a style declaration takes precedence over others, regardless of specificity. It's used to enforce a specific style, overriding any conflicting styles defined elsewhere, thus ensuring consistency and control.
Syntax:
element1 {
property-x: value_y !important; /* This will be applied. */
}
element2 {
property-x: value_z; /* This will not be applied. */
}Example: Implementation to show to override the CSS properties by using !important property.
html
<!DOCTYPE html>
<html>
<head>
<title>Using !important property</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link
href="https://fonts.googleapis.com/css?family=Indie+Flower&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Mansalva&display=swap"
rel="stylesheet">
<style>
h1 {
text-align: center;
color: green;
}
.container {
width: 95%;
margin: 10px;
padding: 10px;
}
.my_fav_font {
font-family: 'Indie Flower', cursive !important;
/* This will be applied. */
}
.my_para {
font-family: 'Mansalva', cursive;
/* This will not be applied. */
text-align: justify;
background-color: powderblue;
font-size: 130%;
}
</style>
</head>
<body>
<div class="container">
<h1>GeeksforGeeks</h1>
<hr />
<p class="my_fav_font my_para">
Cascading Style Sheets,
fondly referred to as CSS, is a simply designed language
intended to simplify the process of making web pages
presentable. CSS allows you to apply styles to web pages.
More importantly, CSS enables you to do this independent
of the HTML that makes up each web page.
</p>
</div>
</body>
</html>
Output:
Using specific selector
Using a specific selector in CSS overrides styles by targeting elements more precisely. By specifying a more specific selector, such as an ID or nested class, styles can be applied selectively, ensuring that the desired properties take precedence over others.
Syntax:
/* Original style */
.container {
background-color: lightblue;
}
/* Override with specific selector */
#special-container .container {
background-color: lightgreen;
}
Example : Implementation to show to override the CSS properties by using specific selector and then overriding.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Without Using !important</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href=
"https://fonts.googleapis.com/css?family=Indie+Flower&display=swap"
rel="stylesheet">
<link href=
"https://fonts.googleapis.com/css?family=Mansalva&display=swap"
rel="stylesheet">
<style>
.body-style {
text-align: center;
font-family: 'Indie Flower', cursive;
/* Apply font to body directly */
}
.my_para {
font-family: 'Mansalva', cursive;
text-align: justify;
background-color: powderblue;
font-size: 130%;
/* Overriding property */
color: red;
}
</style>
</head>
<body class="body-style">
<div class="container">
<h1>GeeksforGeeks</h1>
<hr />
<p class="my_para">
Cascading Style Sheets,
fondly referred to as CSS, is a simply designed language
intended to simplify the process of making web pages
presentable. CSS allows you to apply styles to web pages.
More importantly, CSS enables you to do this independent
of the HTML that makes up each web page.
</p>
</div>
</body>
</html>
Output:
Similar Reads
How to create a CSS rule or class at runtime using jQuery ? It's a common practice to write a CSS file for our HTML. Those are called static CSS. When we want to create our Cascading Style Sheet rule at runtime, we need jQuery. The jQuery enables us to apply styles to our HTML dynamically. The CSS rules once written can be stored in a variable and used multi
2 min read
Tailwind CSS 3 Classes doesn't Override Previous Classes Tailwind CSS is basically a Utility-first CSS framework for building rapid custom UI. It is a highly customizable, low-level CSS framework that gives you all of the building blocks that you need. Also, it is a cool way to write inline styling and achieve an awesome interface without writing a single
2 min read
How to add CSS properties to an element dynamically using jQuery ? In this article, we will see how to add some CSS properties dynamically using jQuery. To add CSS properties dynamically, we use css() method. The css() method is used to change the style property of the selected element. The css() method can be used in different ways. This method can also be used to
1 min read
How to add and remove CSS classes to an element using jQuery ? In this article, we will see how to add or remove the CSS classes to an element using jQuery. To add the CSS classes to an element we use addClass() method, and to remove the CSS classes we use removeClass() method. Syntax: The syntax for adding CSS classes to an element: $('selector').addClass(clas
2 min read
Can a CSS class inherit one or more other classes ? In this article, we will see how a class can inherit properties of other classes using CSS, along with understanding their basic implementations through the illustration. A descendent class can inherit any CSS property from the parent class by using Inheritance. Inheritance is the process by which g
4 min read
How to specify the order of classes in CSS ? When there are rules conflicting to each other been applied to a given element, it gets pretty complicated to determine which rule will actually get applied. The order in which the attributes are overwritten is determined by where they appear in the CSS, not by the order the classes are defined in t
2 min read
How to add a new class to an element that already has a class using jQuery ? In this article, we will learn to add a new class to an element that already has a class using jQuery. There are different methods of achieving this task using the built-in methods available in jQuery. The approaches we can use to add a class to an element using jQuery are listed below:Table of Cont
3 min read
How to Change the Color of Link on Hover using CSS ? Changing the color of a link on hover can provide visual feedback to users, indicating that the link is interactive. It improves the user experience by helping users understand that the link is clickable. These are the following approaches: Table of Content Using CSS pseudo-classUsing CSS VariablesU
2 min read
How to remove CSS property using JavaScript? To remove CSS property using JavaScript, we have different methods. In this article, we will learn how to remove CSS property using JavaScript. Below are the Methods used to remove CSS property using JavaScript: Table of Content Using CSS removePropertyUsing the setProperty methodMethod 1: Using CSS
2 min read
How to add a specific color to an element using CSS ? In this article, we will discuss elements and how to add a specific color to an element using CSS properties. Basically, the HTML element is the collection of start and end tags with the content inserted in between them. Elements can be nested. <tagname> Content </tagname> Note: Please r
2 min read