Adding bootstrap.css causing unidentified CSS classes to appear

On one of my pages, I have imported CSS using the following code:

<style type="text/css">
    @import url('css/common.css');      
</style>

While working with a PDF generation function, I used alert debugging to examine the styles being applied:

alert('style: ' +document.getElementsByTagName('style')[0].innerHTML);

The alert displayed the following classes:

style: 
    .xn0 { color:#010101;font-family:Lucida Grande, Arial, sans-serif;font-size:14px;}
    .xn1 { color:#010101;font-family:Lucida Grande, Arial, sans-serif;font-size:14px;}
    .xn2 { color:#999999;font-family:Lucida Grande, Arial, sans-serif;font-size:14px;}
    .xnb { color:#010101;font-family:Lucida Grande, Arial, sans-serif;font-size:14px;font-weight:bold;}
    .if2 { color:#010101;font-family:Lucida Grande, Arial, sans-serif;font-size:14px;border:0px;border-bottom:1px dotted #CFCFCF;width:100%;}

I am unsure where these classes are coming from and how they are being added to my page. Any help would be greatly appreciated.

css

Answer №1

There was a garbage collection issue stemming from the CSS, but it doesn't impact my page at all, so I'm just choosing to ignore it...

Answer №2

To override those properties, use the !important rule, as shown below:

Original:

.xn0 { color:#010101; }

Override:

.xn0 { color:white !important; }

Please ensure that your custom CSS is imported after the following:

<style type="text/css">
   @import url('css/common.css');
   @import url('css/your_custom_code.css');      
</style>

Hopefully this solution works for you!

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

Tips for updating the color of the active menu item on a website in real-time

As someone who is new to web development, I am interested in creating menus similar to the ones found on stackoverflow.com (such as Questions, Tags, and Users shown above). My main question is how can I change the color of a selected menu item? For example ...

htmlcssbackground-colormenu-itemsmenuitem-selection

Column flex, container width exceeded by column

Struggling to make the flex: column work properly so child elements do not exceed the parent container. The image on the left needs to take up 100% of the container's height: .container { width: 500px; height: 300px; border: solid blue 1px; ...

htmlcssflexbox

Experiencing issues with the redirect button on the navigation bar of my website

Video: https://youtu.be/aOtayR8LOuc It is essential that when I click a button on my navigation bar, it will navigate to the correct page. However, since the same nav bar is present on each page, it sometimes tries to redirect to the current page multiple ...

javascripthtmlcssweb

Learn how to extract an entire table from a website using Kimono Labs, rather than just the first ten rows

Currently, I am utilizing Kimono labs to generate an API for scraping data from the table on this specific website. However, the website only displays the initial 10 rows of the table by default, limiting my API output to just 10 rows. Is there a method to ...

javascriptcssweb-scrapingkimono

Unable to render a child div completely opaque using the opacity attribute

I am currently working on a popup feature that, when displayed, will blur the background of the page to a grey color. The .cover element is responsible for this overlay effect. Unfortunately, I am facing issues overriding its default opacity:0.6; property ...

htmlcss

What are some strategies for ensuring that Plotly JS can adapt its height and width to fit the entire div dynamically, without relying on fixed pixel dimensions?

Is there a way to ensure that Plotly automatically adjusts to the size of the container #myDiv without any noticeable delay when the top button is clicked? This code snippet demonstrates a high delay: var z = [], steps = [], i; for (i = 0; i < 500; i+ ...

javascripthtmlcssplotlyplotly.js

Is there a way to incorporate ellipsis for text that overflows in the AntDesign Table component?

Issue: While working with AntDesign's Table component, I have successfully set the width of each cell. However, I am facing a challenge with text overflow as I would like the overflowing text to be truncated and displayed with an ellipsis. My ultimate ...

javascripthtmlcssreactjsantd

Having difficulty removing whitespace from JavaScript code

Struggling to align a div using Javascript on my professor's website to match the spacing of the rest of the site. Despite attempts at adjusting margins and following suggestions from other Stackoverflow.com threads (e.g. CSS: Center block but left al ...

javascriptjqueryhtmlcss

Highlight the phrase "figure x" within the paragraph to emphasize its importance

I want to emphasize figure 1, figure2, ...all the way up to figure 111. I am limited to making changes in HTML and CSS only, without using JavaScript or jQuery. Is there a different method than just inserting <strong> in the HTML? In CSS, we have : ...

htmlcssfigurecss-counter

Struggling to center an image within a CSS border

I'm attempting to include a subtle border around an icon. The issue I am facing is that the image is positioned at the top of the bordered area, whereas I want it centered. Here's how it currently appears: This is my current border CSS style: ...

css

Issue: Troubile in fetching CSS file from CDN and using local copy as fallback, What is the solution?

I previously inquired about this issue, however, I did not receive a satisfactory solution. Therefore, here I am asking again for your assistance. I am attempting to retrieve my CSS from an external CDN service, such as http://cdn.example.com/. This scrip ...

phpcssfunctionexternal

The right column in a relatively positioned layout descends as an element in the left column is revealed

Currently in the process of constructing a registration form for our website, everything is going smoothly with one minor hiccup. The form consists of two columns where users enter their information. Initially, when designing elements for the first (left) ...

jqueryhtmlcsspositionmultiple-columns

What is the best way to display an icon and text side by side in the header of a Phonegap app

____________________________________________________________ | logo_image page_Title | ------------------------------------------------------------ I am looking to create a header for my PhoneGap app similar to the one sh ...

htmlcsscordova

Ways to dynamically retrieve the width of a div's content

I'm currently working on an AngularJS application and I have a div that's structured like this: <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.10/angular.min.js"></script> <div class="role"> Sign Up < ...

javascripthtmlcssangularjs

If a user types in Korean characters in the input field and then clicks away to any other part of the screen, the input field will automatically regain focus

jsfiddle instructions for testing: type Korean characters in the input field scroll down until the input field is no longer visible Click anywhere on the screen Expected result: the input field will come into focus with (Korean text) If the user enters K ...

htmlcss

add text above and below a button in a Button style

Just delving into HTML and CSS, I've created a button with the following styling: .Btns { width:200px; height:75px; background-color:lightblue; color:black; font-weight:bold; ...

jquerycss

Update the code-behind for the Joomla "submit article" page

After incorporating a new template on my Joomla website, I encountered an issue with the "submit an article" page. The fields in the publishing tab were altered to width: 0px;. Here is how the HTML for the category dropdown appears: <div id="jform_cati ...

htmlcssjoomla

Troubleshooting a problem with media queries causing display:none issues

Check out this HTML email template code we've been testing on various email clients including Gmail, Yahoo, Outlook, Rediffmail, iPhone, and iPad. The template consists of two table blocks - one for web browsers and the other for mobile devices like ...

cssipademailoutlookmedia

The hover effect on MUI TableRows is being overshadowed by the background color of the TableCell

I'm currently using @mui/material version ^5.10.1. My challenge is applying the TableRow hover behavior as outlined in the documentation. However, I have also set a background color for the first TableCell in each row, which ends up overriding the ho ...

cssreactjsmaterial-uihovertablerow

Poorly positioned text displayed inline in HTML

My attempt to place a title in a div toolbar next to some images has hit a snag. The text is not aligning correctly; it should be positioned at the top of the toolbar, but it stubbornly remains at the bottom without budging. I wish for it to be vertically ...

htmlcss