To override the CSS properties of a class using another class, we can use the !important directive. In CSS, !important means “this is important”, and the property:value pair that has this directive is always applied even if the other element has higher specificity.
Syntax:
element1 {
property-x: value_y !important; /* This will be applied. */
}
element2 {
property-x: value_z; /* This will not be applied. */
}
Example:
<!DOCTYPE html>
<html>
<head>
<title>!important</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href=
<link href=
rel="stylesheet">
<link href=
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>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:
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
23 May, 2023
Like Article
Save Article