How to override the CSS properties of a class using another CSS class ?
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="https://fonts.googleapis.com/css?family=Indie+Flower&display=swap" 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:
Please Login to comment...