Unable to modify the CSS of a template downloaded for free in a custom CSS file - changes have no impact. What could be the reason behind this

After downloading a free bootstrap template, I attempted to change the style using a custom CSS file. However, the CSS in the template did not adjust as expected. Changing background colors and text colors had no effect. Why isn't this working? Could the template be blocking changes?

This is just a small example, the CSS and HTML files are too large to upload.

<!DOCTYPE html>
<head>
<link rel="stylesheet" href="assets/css/style.css" />
<link rel="stylesheet" href="assets/css/custom.css" />
</head>
<body>

<div class="container">
<div class="col-lg-4 my-3">
<div class="card hover-top">
<div class="card-body">
<span class="bg-white font-w-500 py-1 lh-1 me-1 mb-1">
change style text
</span>
<div class="d-flex align-items-end pt-4">
<div class="display-7 m-0 font-w-700 lh-1">Display Text</div>
</div>
</div>
</div>
</div>
</div>

/** style.css **/
/********** Template CSS **********/
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #ffffff;
  background-clip: border-box;
  border: 0 solid #eff2f7;
  border-radius: 0.3rem; }
  .card > hr {
    margin-right: 0;
    margin-left: 0; }
  .card > .list-group {
    border-top: inherit;
    border-bottom: inherit; }
    .card > .list-group:first-child {
      border-top-width: 0;
      border-top-left-radius: 0.3rem;
      border-top-right-radius: 0.3rem; }
    .card > .list-group:last-child {
      border-bottom-width: 0;
      border-bottom-right-radius: 0.3rem;
      border-bottom-left-radius: 0.3rem; }
  .card > .card-header + .list-group,
  .card > .list-group + .card-footer {
    border-top: 0; }

.card-body {
  flex: 1 1 auto;
  padding: 1.75rem 1.75rem; }

.card-title {
  margin-bottom: 0.5rem; }

.card-subtitle {
  margin-top: -0.25rem;
  margin-bottom: 0; }

.card-text:last-child {
  margin-bottom: 0; }

.card-link + .card-link {
  margin-left: 1.75rem; }

.card-header {
  padding: 0.875rem 1.75rem;
  margin-bottom: 0;
  background-color: transparent;
  border-bottom: 0 solid #eff2f7; }
  .card-header:first-child {
    border-radius: 0.3rem 0.3rem 0 0; }

.card-footer {
  padding: 0.875rem 1.75rem;
  background-color: transparent;
  border-top: 0 solid #eff2f7; }
  .card-footer:last-child {
    border-radius: 0 0 0.3rem 0.3rem; }


/** custom.css try this **/
.newtextstyle{
color: red;
font-size:1.5em;
}

/** custom.css and this **/
.newtextstyle{
color: red !important;
font-size:1.5em !important;
}

/* try to change this with no effect */
<span class="bg-white font-w-500 py-1 lh-1 me-1 mb-1 newtextstyle">
change style text
</span>
htmlcssbootstrap-5

Answer №1

In order to properly style your website, make sure to insert your CSS code within the style tag in the head section of your HTML file.

<head>
<link rel="stylesheet" href="assets/css/style.css" />
<link rel="stylesheet" href="assets/css/custom.css" />
<style>
...your styles
</style>
</head>

Alternatively, you can incorporate your CSS code within existing stylesheet files, such as assets/css/custom.css which is already included in your project.

Answer №2

It can be challenging to troubleshoot why your changes aren't taking effect with this example. Some templates load styles via JavaScript intermittently.

The hierarchy of CSS loading is as follows:

CSS file

<link rel="stylesheet" href="assets/css/custom.css" />

within your HTML

<script>
.newtextstyle{
color: red !important;
font-size:1.5em !important;
}
</script>

<span class="bg-white font-w-500 py-1 lh-1 me-1 mb-1 newtextstyle">
change style text
</span>

within a tag

<span class="bg-white font-w-500 py-1 lh-1 me-1 mb-1" style="color: red;
font-size:1.5em;">
change style text
</span>

The highest priority is within a tag and will override all other changes. Try one of these methods and see what works best for your situation.

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

Having trouble accessing the iframe element in an Angular controller through a directive

My webpage contains an iframe with a frequently changing ng-src attribute. I need to execute a function in my controller each time the iframe's src changes, but only after the iframe is fully loaded. Additionally, I require the iframe DOM element to b ...

javascripthtmlangularjsiframecallback

Designing a dynamic left navigation column with collapsible features

I'm currently exploring ways to integrate this style of sidebar navigation with the layout from my JSfiddle. In the first example, the sidebar collapses to the main icons, but the use of the Nav tag is causing it to slide under the content instead of ...

jquerycsstwitter-bootstrapmenu

Filter search results to display only posts

My website uses a custom Wordpress theme that has a search functionality. The issue I'm facing is that when I perform a search, it redirects me to the search.php page. However, instead of just displaying posts, it also shows pages and events from the ...

phphtmlwordpress

What is the best way to split an array into four columns and allocate 10 <li> items from the array to each column?

If I have a dynamic array with 40 elements that changes on every render, how can I loop through the array and return 4 groups of elements, each containing 10 items without any repetition? I want to style these objects in the array using a parent flex con ...

javascriptcssreactjsarrays

How to toggle elements using CSS slide animations?

Is there a way to make a div slide in and out from the left to right when the user clicks on "clickthis"? Here is an example of CSS code: .container{width:100px; position:absolute; left:-70px;} .container .open{left:0px;} .button{display:block; top:0px; ...

jquerycssanimationtoggle

Essential Input Element in HTML5

I'm currently facing an issue with form validation that involves two text boxes, both of which are optional. However, in order for the server to validate the form, one of the text boxes must be filled in. I have no problem with creating a required fie ...

javascripthtml

The sticky element should only be active when the visible section is overflowing vertically. There should be no scrollbar if the height is minimal

I'm currently working on a Whatsapp-style navigation bar and facing an issue with the sticky navbar functionality. https://i.stack.imgur.com/Cy3lA.gif Please refer to the details below for more information. To resolve this issue, I have included ...

javascripthtmlcss

Tips for calculating the total of each row and column in a table with jQuery

<table id="repair-invoice"> <tr> <th>Item</th> <th>Parts</th> <th>Labor</th> <th>Total</th> </tr> <tr> <td>Oil Change</td&g ...

javascriptjqueryhtmlsumhtml-table

Wiki experiencing issues with NodeJS HttpGet functionality

Goal Retrieve the HTML content of a Wiki Page. Introduction In an attempt to fetch the HTML of a Wiki page () for data parsing purposes, I am utilizing NodeJS and its HTTP Request methods. Code Snippet Below is the simple code snippet that accesses th ...

javascripthtmlnode.jshttphttp-get

Building a Local Search Tool for HTML Pages

As part of my company's efforts to build a Knowledge Base web on an offline network, I am utilizing basic CSS/HTML coding skills to create web pages. The pages I have developed so far include Home, Software Issues, Network Issues, and Create Page. Th ...

htmlsearch-engineoffline

Create a shiny application that makes text bold in the user interface

Can someone please guide me on how to make specific words bold in a sentence within the UI using HTML tags under the h() function? Your assistance is greatly appreciated. Thank you. library(shiny) ui <- navbarPage( title = 'Benvenuto&apos ...

htmlrshiny

Toggle a jQuery bar based on the presence of a specific CSS class

I am working on a feature where I can select and deselect images by clicking on a delete button. When an image is selected, a bar appears at the top. If I click the same delete button again, the image should be deselected and the bar should disappear. This ...

javascriptjqueryhtmlcss

Creating structured paths for retrieving data via HTTP GET requests

In my Laravel project, I have routes set up for requests in a traditional way: Route::get('edit/{user}', 'AdminUserController@getUser'); Route::post('delete', 'AdminUserController@deleteUser'); However, I am facing ...

javascriptphphtmllaravelget

Issue with Angular uploading a file and sending it as a POST request causing errors

I am currently working on an HTML form that allows users to upload files from the front-end to the back-end and perform various operations on them: <button mat-raised-button color="primary" type="button" style='margin-right:20px ...

javahtmlangularspring-bootfile-upload

Utilizing the CSS :not() selector within a nested table

I am having an issue with my AjaxControlToolkit where the main-page CSS is affecting the inner "calendar" popup. To illustrate what I need, what I've tried, and the temporary workaround, I have simplified everything into a one-page example. I am in s ...

csscss-selectorsajaxcontroltoolkit

Tips for switching images in a grid using jQuery

I have implemented an image grid using flexbox on a website I am developing. The grid consists of 8 boxes, and my goal is to randomly select one box every 2 seconds and assign it one of 12 random images. My strategy involves creating an array containing UR ...

javascriptjqueryhtml

Web browser control in WinForms fails to trigger the document complete event on an AJAX website

My VB.Net desktop application utilizes the IE browser control to browse the web. Typically, when a regular page is loaded, the document_complete event triggers and allows me to access the resulting page content. However, I'm encountering a problem wit ...

htmlvb.netajaxautomationwebbrowser-control

Ways to eliminate whitespace in React and Bootstrap 5

I have a pet project that requires mobile responsiveness, and I'm encountering an issue with white space in the Carousel component. I am unsure of how to remove it - can anyone provide assistance? Here is how the page looks on PC: https://i.sstatic.n ...

cssreactjsbootstrap-5react-bootstrap

Tips for updating information when a button is chosen

Hello everyone, I need some help with a form that has three select buttons. The button labeled "Distribute" is already selected when the page loads, and it contains information about full name, password, and location. How can I use JavaScript to create a c ...

javascripthtmlcss

Tips for making a table header span multiple columns in HTML5

Could someone help me with making my HTML5 heading span across the columns in the table? I want the table to end on the far right with the vertical line appearing at the right end of the table. Any assistance would be greatly appreciated! For reference, ...

htmlcss