How to override the CSS properties of a class using another CSS class ?
To override CSS properties with another class, use the `!important` directive in CSS, emphasizing a style’s importance, 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.
Table of Content
- Using !important property
- Using specific selector
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.
<!DOCTYPE html>
<html>
<head>
<title>Using !important property</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>
h1 {
text-align: center;
color: green;
}
.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>w3wiki</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.
<!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>w3wiki</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:
Contact Us