My CSS formatting is unintentionally impacting other elements that I did not intend for it to affect

In my HTML code, I have a div with the class "card" which contains a footer:

<div className='card'>
    <img src={thumb2} />
    <footer>
        <p>Beautiful and cozy house for you and your family</p>
        <span>$1200.00/month</span>
    </footer>
</div>

The footer inside the div with the class card is styled as follows:

.card footer {
    background-color: #D6E4E3;
    display: flex;
    flex-direction: column;
    align-items: center;   
    margin: 0;
    padding: 0;
}

However, when I use another footer tag elsewhere in my page, its style affects the footer inside the card as well. How can I prevent this from happening? Is there a way to apply different styles to multiple footer tags without them conflicting?

footer {
    height: 5%;
    display: flex;
    justify-content: center;
    background-image: linear-gradient(#5665e7, #7083E5);
}
htmlcssstylesfrontendfooter

Answer №1

Utilizing classes has effectively prevented the styling of the bottom-page footer from affecting the card-footer.

.card--footer {
  background-color: #D6E4E3;
  display: flex;
  flex-direction: column;
  align-items: center;   
  margin: 0;
  padding: 0;
}

.page--footer {
  height: 5%;
  display: flex;
  justify-content: center;
  background-image: linear-gradient(#5665e7, #7083E5);
}
<div className='card'>
  <img src={thumb2} />
  <footer class="card--foter">
    <p>Beautifull and cozy house for you and familly</p>
    <span>$: 1200,00/month</span>
  </footer>
</div>

<footer class="page--footer"></footer>

This method also provides easy reusable styling for future use.

Answer №2

footer {
    background-color: #D6E4E3;
    display: flex;
    flex-direction: column;
    align-items: center;   
    margin: 0;


    footer {
    background-color: #D6E4E3;
    display: flex;
    flex-direction: column;
    align-items: center;   
    margin: 0;
    padding: 0;
}

padding: 0;

}

Answer №3

   .card footer {
    background-color: #D6E4E3;
    display: flex;
    flex-direction: column;
    align-items: center;   
    margin: 0;
    padding: 0;
}

 <div class='card'>
                            <img src={thumb2} />
                            <footer>
                                <p>Stunning and comfortable home for you and your family</p>
                                <span>$: 1200,00/month</span>
                            </footer>
                        </div>
  </body>
</html>

Swap out className with class in the code snippet above

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

Stack the <td> elements vertically rather than reducing the width of each <td> cell

I am currently using a standard HTML table to showcase data pulled from an API. <table style="width:100%"> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td&g ...

htmlcss

Adjusting the alignment of table cell contents without the use of JavaScript or external CSS files is necessary

I need help creating a table that resembles the design shown in the image below. I want each td cell in the outer table to have a number at the top right with a border, and text at the bottom left without a border: https://i.sstatic.net/1YTkR.png Current ...

htmlcss

What is the best way to clear the selected option in a dropdown menu when choosing a new field element?

html <div class="row-fluid together"> <div class="span3"> <p> <label for="typeofmailerradio1" class="radio"><input type="radio" id="typeofmailerradio1" name="typeofmailerradio" value="Postcards" />Postcards& ...

javascriptjqueryhtmlcssdrop-down-menu

Utilizing Rvest for extracting data from tables in HTML pages

I'm facing a similar issue to one that has been discussed on Stack Overflow. My goal is to retrieve tables for all years and months from a specific webpage. I have managed to extract the tables displayed when the website is opened using the code provi ...

htmlrweb-scrapingrvest

The event 'deviceorientation' does not seem to be firing in iOS browsers when it is referenced within an iFrame

I am currently working on a website that features a "360 panorama viewer" embedded within an iframe. The source page utilizes JavaScript and window.DeviceOrientationEvent to determine if the user is browsing on a mobile device with orientation functionalit ...

javascripthtmliosiframe

JavaScript - Uncaught TypeError: type[totypeIndex] is not defined

After following a tutorial and successfully completing the project, I encountered a JavaScript error saying "Uncaught TypeError: totype[totypeIndex] is undefined". When I tried to log the type of totype[totypeIndex], it initially showed as String, but late ...

javascripthtmlcssundefined

What is the method for keeping the first column of the table fixed in place?

Incorporating jquery EasyUI, I have created a table where I want the first column to remain static while the rest of the columns scroll when the screen size is reduced. Code snippet available here. Is there a way to freeze just the Title1 column? I attem ...

javascriptjquerycssjquery-easyui

Using Jquery & HTML5 for Seamless Transition between Portrait and Landscape Modes

I am working on making my HTML page more user-friendly for tablets. One issue I'm facing is that when the tablet's orientation changes, the menu doesn't hide correctly if the width is less than the height. Here is the code snippet I have so ...

javascriptjqueryhtml

Can a ng-repeat value be assigned to a text input field?

<tr ng-repeat="person in users" ng-class="{'chosen': person.AdmissionID == currentSelection}" ng-click="selectRow(person.AdmissionID)"> <td>{{person.AdmissionID}}</td> <td>{{person.AdmissionNumber}}</td> ...

javascripthtmlangularjs

Having difficulty retrieving the value of a form using javascript

I've been struggling to retrieve the value of a form using JavaScript, but for some reason it keeps coming up as undefined, almost as if the input doesn't exist. Here's the HTML snippet: %@ Language="VBScript" CodePage=65001 %> ... Th ...

javascripthtmlforms

To insert a new row into a table with an onClick function, along with removing this attribute from all other rows except for the newly added one

I recently created a piece of code that enables the addition of a new row and removes an (onClick) attribute when clicking on an existing row within a table. <table style="vertical-align:middle;margin:20px;" id="table_insert"> <tr id="tra" > ...

javascriptjqueryhtmldom

Strange problem with CSS - Unable to load a specific style based on the browser

Within my main.jsp page, I have the following code: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <script src="/targets/js/jquery.uploadify.min.js" type="text/javascript"></script> ...

cssstylesheet

Using the -webkit-box-reflect property along with the CSS position:absolute styling

Running on the Chrome Canary build, I have come across this HTML code snippet: <div id="debug" class="debug" >TEST</div> Additionally, here is the CSS code snippet: -webkit-box-reflect: below 0px -webkit-gradient(linear, ...

webkitcss

What steps can be taken to update the ID's of <tr> and <td> elements within a table after deleting a row?

I am working on a dynamic table with 5 rows, each row containing 3 columns - partNO, quantity, and a delete button. Each row is assigned a unique ID for identification purposes. If a user deletes the second row, I want the IDs of the remaining rows to be ...

jqueryhtml

Howler.js is giving an error message: "When creating a new Howl object, make sure to include an array of source files."

Trying to test Howler.js for playing audio files. When I click the button in this HTML file, there's an error in the console indicating that "An array of source files must be passed with any new Howl." Here is the code: <!DOCTYPE html> <htm ...

javascripthtmlaudiohowler.js

The vertical drop-down menu is displaying and functioning incorrectly

My vertical submenu is positioned correctly, but the links are overlapping on top of each other. The submenu doesn't hide when hovering over the main menu, but it does hide when hovering outside the menu. I'm unsure of what changes or additions t ...

csssubmenuonhover

I'm struggling with my project called "Number TSP" and I can't seem to figure out why it's not working properly

Upon reaching the end of my code, I am encountering an issue where instead of seeing the expected output of "Done!", it displays undefined. This is the code in question: const container = document.querySelector(".container") const table = document.querySe ...

javascripthtmlcss

PHP and MySQL collaborate to create a dynamic, customizable list for

I am new to working with mySQL and currently developing my first website. I have successfully set up the necessary database, but now I am unsure how to implement it. My goal is to allow registered members to provide input for a list structured like this: ...

phphtmlmysqllistphpmyadmin

Having trouble setting the background of a div in CSS

How can I apply the background-color: #f8f8f8 class to the step class without interfering with the display of the horizontal lines after 1, 2? What could be causing this issue? .main-progress { text-align: center; position: relative; margin- ...

htmlcss

Interactive jQuery Dropdown Menu with Multiple Divs

I have been working on this and I'm almost there, but the jQuery part is driving me crazy (I'm not very proficient in it yet, but I am learning). Here's the link to the fiddle: http://jsfiddle.net/5CRA5/4/ Since I can't demonstrate th ...

jquerycss