What is the correct way to implement inheritance in CSS?

Here is the CSS code that defines different header styles:

.head_red{
    background-image: url(../../Images/box_header_red.png) !important;
    background-repeat:no-repeat;
    height: 59px;
}

.head_blue{
    background-image: url(../../Images/box_header_blue.png) !important;
    background-repeat:no-repeat;
    height: 59px;
}

.head_green{
    background-image: url(../../Images/box_header_green.png) !important;
    background-repeat:no-repeat;
        height: 59px;
}

.head_yellow{
    background-image: url(../../Images/box_header_yellow.png) !important;
    background-repeat:no-repeat;
    height: 59px;
}

.head_orange{
    background-image: url(../../Images/box_header_orange.png) !important;
    background-repeat:no-repeat;
    height: 59px;
}

I'm looking for a way to inherit these classes so I only need to specify the background-image property in each.

css

Answer №1

CSS

.header { background-repeat:no-repeat; height: 59px; }
.header_red{ background-image: url(../../Images/box_header_red.png); }
.header_blue{ background-image: url(../../Images/box_header_blue.png); }
.header_green{ background-image: url(../../Images/box_header_green.png); }
.header_yellow{ background-image: url(../../Images/box_header_yellow.png); }
.header_orange{ background-image: url(../../Images/box_header_orange.png); }

EXAMPLE HTML

<div class="header header_red">example</div>
<div class="header header_blue">example</div>
<div class="header header_yellow">example</div>

Answer №2

Consider creating a new set of classes:

<div class="header header_yellow"></div>
<div class="header header_purple"></div>
<div class="header header_orange"></div>

Additionally..

.header {
    height: 59px;
    background-repeat: no-repeat;
}

Afterwards, you can remove the current styling from your code.

Answer №3

Utilize more than one class:

CSS

.header {
    background-repeat: no-repeat;
    height: 59px;
}

.header--red{
    background-image: url(../../Images/box_header_red.png) !important;
}

.header--blue{
    background-image: url(../../Images/box_header_blue.png) !important;
}
/* ... */

HTML

<div class="header header--red"></div>
<div class="header header--blue"></div>

The -- serves as a naming convention.

Answer №4

To enhance the styling of your head elements, consider adding another class. Let's name it head.

Here is how you can update your HTML:

<div class='head head_red'>
            ^^^^
          new bit

You can then apply common properties to the .head class and keep the background images styled separately.

.head {
    background-repeat: no-repeat;
    height: 59px;
}

.head_red{
    background-image: url(../../Images/box_header_red.png);
}
....etc....

I hope this solution is helpful for you.

(Please note that I removed the use of !important as it should be used sparingly. If you find yourself needing it, try to address the root cause first before resorting to using it excessively.)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to convert a button into clickable text that performs the same function as the original button?

Seeking a solution to transform a button into clickable text with the same functionality. Explored resources like Google, StackOverFlow, and Youtube for answers. This is the current code snippet representing the button: <button onclick="mainApp.l ...

javascripthtmlcss

Add a prefix to every hyperlink in an HTML document

I'm looking to transfer an HTML template to a Google site using embedded code. The template includes a table with over 500 links that need to be prepended. Is there a method to achieve this without relying on JavaScript? <table class="wikitabl ...

htmlcss

HTML Preview is not rendering properly

https://i.sstatic.net/dqwR8.png I'm having an issue where the HTML I received is displaying without a header and footer like in the image provided. Can anyone help me understand why this is happening? I will attach the code below: ...

htmlcssdreamweaver

Ensure that elements with a higher z-index prevent lower elements from triggering their onclick events

Is it possible to assign an onclick event to a specific 'layer' without triggering the same action for elements on top of it? I'm looking for a way to achieve this, any suggestions? ...

javascripthtmlcssonclickz-index

Close button located in the upper-right corner is partially cut off

My challenge involves placing a close button on the top right corner of a #main div that contains an image of varying or larger size. I need the close button to slightly protrude outside the div using negative margins. The issue is that when I use overflow ...

htmlcss

Using AngularJS to incorporate personalized font icons

Looking to create a custom font icon library similar to "Font Awesome" for my AngularJS project, as using fonts instead of images is more versatile across devices. Is there a way to achieve this? I have generated a font in .ttf and .svg formats with my ...

cssangularjsfont-facefont-awesomeglyphicons

The button can only be edited using Internet Explorer

My webpage features a button that displays correctly in Chrome, but the text inside the button gets cut off when viewed in IE (see image). Can you provide guidance on what might be causing this issue and how to resolve it? Bootstrap version 4.0.0 is also b ...

cssinternet-explorercross-browserbootstrap-4

React text hover image functionality

Just diving into the world of React and attempting to create a cool image popup effect when you hover over text in my project. I could really use some guidance on how to make it function within React, as the logic seems a bit different from plain HTML. Any ...

javascripthtmlcssreactjs

Utilizing nested Bootstrap 3.1.1 collapse functionality

Hey there! I need some assistance. Currently, I am working with Bootstrap 3.1.1 and implementing nested collapse menus in a sidenav. My goal is to apply a background color (using a specific class) to the open menu and remove it when the menu is closed. Ev ...

jqueryhtmlcsstwitter-bootstraptwitter-bootstrap-3

Increase the right border size by half when the image is being hovered over

Seeking assistance with creating a hover image with a right border of color #000 that covers only 80% of the image's full length. I have attempted adjusting other "half border" codes for this purpose without success. Any suggestions on how to achieve ...

htmlcssborder

Arrangement of p tag and br tag in HTML

This is what I desire. https://i.sstatic.net/jhwrp.png This is what I am receiving. https://i.sstatic.net/quwUN.png This is the code I have written. I am struggling with the spacing. Aligning the p tag with the br tag is proving to be a challenge for me. ...

htmlcss

Creating a dynamic image carousel using jQuery

Today, I completed the jQuery course on Code Academy and am now trying to create an image slider using it. While I have a general idea of how it should work, I feel like I'm missing a key element. My goal is to have the slider continuously running whe ...

javascriptjqueryhtmlcss

What is the best way to apply a top padding to a background image using CSS?

I attempted to adjust the top padding using various pixel values in the style, but the image padding relative to the webpage remained unchanged. For example: padding-top: 5px; Here is part of my code snippet: <div class="row pb-5 mt-4" style ...

htmlcssbootstrap-4

Creating a responsive navbar with a custom width form

Just started working with bootstrap and playing around with some new UI concepts. I'm having an issue with a non-responsive form width within my navbar, even though the navbar itself is responsive. I've tried using different collapse classes, but ...

htmlcsstwitter-bootstrapresponsive-designnavbar

What steps should I take to address the issue of fixing the classname rather than using the

<div ng-class:"{{myclass}}" role="progressbar" aria-valuenow="{{roundedtotalPerformanceCount}}" aria-valuemin="0" aria-valuemax="100" ng-style="{'width' : ( totalPerformanceCount + '%' ) }"> {{roundedtotalPerformanceCou ...

javascriptcssangularjs

My custom font is not compatible with the browser on my asp.net site

I'm having trouble embedding my own font in my .aspx file. Google Chrome and Firefox don't seem to support the font, while IE does. Can someone please provide guidance on how to successfully embed the font in an asp.net page? Below is my code: ...

javascripthtmlcssasp.netfonts

Eliminate the standard border line from a div element

While working on creating shapes in React using CSS, I encountered an irritating issue with a ring design that I'm attempting to create. I can't seem to get rid of the default border around the circle shape I've created. I've tried usin ...

cssreactjsnext.js

JQuery and CSS Techniques for Changing the Size of a Div

I'm currently experimenting with JQuery and CSS to create a user-friendly navigation experience for users as they browse through a grid of variously-sized images. Essentially, my goal is to have the images expand when hovered over (which is functioni ...

jquerycsshtmlexpand

Modify the parent div's style if there are more than two children present (CSS exclusive)

Is there a way to use the same class, like .outer, for both divs but with different styling for the parent element when there are more than two children? Kindly refer to the example provided below: .outer1{ border: solid 6px #f00; } .outer2{ b ...

htmlcss

highcharts-ng expands in flexbox without contracting

I've encountered an issue while trying to incorporate a highchart within a flexbox container. The chart expands along with the container without any problems, but it fails to contract when the container size decreases. My current setup involves angul ...

cssangularjshighchartsflexboxhighcharts-ng