The custom CSS file is not being recognized

I am facing an issue while trying to integrate two CSS files into my website. The second CSS file seems to be ignored, even though both files are properly loaded when inspecting with the Development Tool in Chrome.

Here is a snippet from my Header:

<link rel="stylesheet" type="text/css" href="../CSS/theme.css"/>
<link rel="stylesheet" type="text/css" href="../CSS/main.css"/>

Some code from this site:

<div class="test">Test</div>

The main.css file includes the following style for ".test":

.test{
  font-size:300px;
}

However, it seems that this style is being ignored and only the styles from theme.css are being considered. Can anyone provide assistance regarding this issue?

Below is a snippet of the HTML file:

<html lang="de" dir="ltr">
  (...)
</html>

And here is a snippet from the main.css file:

:root {
    --main-blue: #0E2DB7;
    (...)
}

Answer №1

Your CSS has a couple of issues that need to be addressed.

  1. You are missing curly braces on the 4th @font-face declaration.
  2. The correct syntax should be div.test instead of div .test.

Make these adjustments and it should resolve your problem.

Cheers!

Answer №2

If you're using Chrome, you can investigate the styling of your webpage by accessing the developer tools window. Simply right click on the .test element, select "Inspect," and navigate to the "Styles" tab to examine the themes.css rule.

It is possible that the CSS file is targeting the element in a more specific manner than you are currently doing.

For instance:

div.test {
}

takes precedence over

.test {
}

and

div {
}

In some cases, you may need to forcefully apply your CSS rules by utilizing the !important declaration like so:

.test {
  font-size: 300px !important;
}

However, it is advisable to understand why the other rule is being prioritized instead.

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

Challenges encountered with input outcomes

I am facing an issue with input results. I have a button that triggers a function to check for empty input fields. However, when I click the button, it always falls into the last if statement and displays as if the fields are not empty. I have already att ...

Is it possible to share deep links with just a hashtag?

I am currently developing a web application and I want to include social media buttons such as Facebook Like. I have tried using the HTML code/API provided by Facebook, AddThis, Shareaholic, ShareThis, but none of them seem to properly handle my deep link ...

Play button icon is missing in Firefox when using absolute positioning

I'm currently experiencing an issue with my video gallery section. I have both normal and hover versions of a play button positioned above a preview image of a video. However, the play buttons are not visible at all in Firefox. You can view the page h ...

The responsiveness of Bootstrap 5 columns in Chrome inspection appears to break after reaching medium size, yet functions properly in other areas

I am currently working with cards within a grid system, but I am encountering an issue with resizing when the column size is smaller than medium in the mobile view inside the inspect section. The width does not expand to 100%, regardless of how much I try ...

What could be the reason why the form is appearing correctly on one landing page but not the other?

I have embedded a Marketo form on two different landing pages on our website. I am using the same JavaScript provided by Marketo for both pages (shown in the code below). However, on page 2, the form field label and cell are displaying incorrectly, appeari ...

Ways to center the percentage on the progress bar

I'm having an issue with positioning the percentage 100% in the center of the element. I attempted adjusting the spacing in the JavaScript code, but so far it hasn't been successful. Here is the current output for the code: http://jsfiddle.net/G ...

Having difficulty retrieving POST request information from an HTML form using Flask

I have been experimenting with building a website back-end using the Python library Flask. However, I keep encountering a 405 - Method not allowed error whenever I attempt to retrieve form data from a POST request in a secure manner. Right now, after a use ...

Avoid page refreshing when retrieving data using PHP and AJAX

In my current program, I am able to add data and insert it into the database. However, I am looking for a way to automatically send this data to another page or browser without refreshing. I have two browsers open, so how can I submit the data to the other ...

Ways to reload the page following the submission of a form

I implemented a fade dialog to present a form, and successfully submitted the form using ajax to create a new record in the database. Now, I am facing an issue where I cannot refresh the page after the ajax call finishes. Despite attempting to use JavaScr ...

The image display feature in Django is currently not functioning

Recently, I returned to my Django project after being away for a few weeks due to a busy schedule. However, upon reopening the project today, I noticed that all the images were displaying with a little x sign or appearing broken in another browser. This is ...

Aligning a div in relation to the background image

I am seeking guidance on how to center a Div Box and make it responsive relative to the background image. The div box should be contained within the white box, similar to the example shown here: body{ font-family: 'Roboto Mono', monospace; ...

When viewing super-sized (local) files in Chrome(ium), HTML5 video doesn't display images

I am currently developing an Electronjs application that requires playing very large videos stored on the user's machine. I have experimented with using both the vanilla HTML5 video tag and other players. Interestingly, small videos load and play with ...

What is the relationship between html, body, and window when scrolling through code?

I've been working on adding a scroll-to-top button to my website. After doing some research online, I came across this code snippet: $('html, body').animate({scrollTop:0}, 'slow'); It's interesting that they are trying to scr ...

Discover the method to retrieve HTML content by sending an HTTP POST request in AngularJS, similar to loading content

My attempt to retrieve HTML content using Angular Js Post HTTP method was successful, but only for text contents like P tags. I am now trying to fetch HTML contents that include input types such as text boxes using Angular JS. Interestingly, when I utilize ...

Can Wireframe be applied to a 3D gltf model within an HTML document?

I am currently working on achieving a specific design concept, which can be viewed at the following link: To guide me through this process, I have been following a tutorial available here: While I have successfully implemented the model and created mater ...

Flaws in the implementation of Github pages deployment hindered its

When I attempted to run one of my repositories on GitHub for deployment, I encountered an issue where the CSS and JS contents were not loading correctly. You can access the repository through this link: https://github.com/vipin10100001/agecalculator If yo ...

Displaying videos in full screen using HTML5

I am attempting to create a fullscreen webpage with a video using the following code: <video id="backgroundvideo" autoplay controls> <source src="{% path video, 'reference' %}" type="video/mp4"> </video> ...

The paragraph text should dynamically update upon clicking a button based on JavaScript code, however, the text remains unchanged despite attempts to modify it

I recently started learning JavaScript and wanted to update the content of a paragraph when a button is clicked. However, I encountered an issue where this functionality doesn't seem to work. <body> <p id="paragraph">Change Text on cl ...

Guide on resolving the issue of disabled button's tooltip not appearing upon being hovered over

I have a button that looks like this: <a data-toggle="tab" href="#part4" class="btn btn-info tabcontrol mainbutton col-2 offset-8 disabled" id="part3to4" title="Please acknowledge the checkbox before going next" data-toggle="tooltip" data-html="true" d ...

Implementing a switch to trigger a JavaScript function that relies on a JSON object retrieved from a GET request

Having some trouble using a toggle to convert my incoming Kelvin temperature to Celsius and then to Fahrenheit. It loads properly as default Celsius when the page first loads, but once I try toggling the function outside of locationLook, it doesn't se ...