Implement sigmoid function using Numpy

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:

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.

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:

!important_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:

Screenshot-2024-01-17-125132

Implement sigmoid function using Numpy

shubhamr238

Improve

Article Tags :

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

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

How to create a hidden border using CSS properties ?

In this article, we will learn how to create a hidden border using CSS properties. In the following examples, both inline styling and style definition is used in the head section to define the hidden border. Approach: We will use two headings in which one will show the border color and the other wil

How to define all the list properties in one declaration using CSS ?

Sometimes a web page has good content for reading but the styling of the texts looks improper, so it becomes boring for the readers, and lastly, they leave the web page. But when they read articles with proper styling and lists they read them fully because of the good visuals stated there which keep

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

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

How to apply css property to a child element using JQuery?

The task is to apply CSS property to a child element using jQuery. To do that, first we select the child element with the help of children() method in jQuery and then apply CSS property to it with the help of css() method in jQuery. Syntax: // Note : children method selects the direct child to paren

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

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

How to change the style of alert box using CSS ?

An alert box is an important feature of JavaScript. It is used to inform the client or the user about the click events. Like if the user subscribes to your page for daily updates then you can wish them back, or thank them by showing an alert box message. Sometimes developers like us do not want to j