can't change css from free downloaded template in a custom css file

downloaded a free bootstrap template and try change the style with a custom css file but the css in the template did not change it. try to change some background colors and text color has no effect why is this not work, what can do, can template blocked that you can not do changes?

this is only a small part of example the css and html is to big to upload

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

<div >
<div >
<div >
<div >
<span >
change style text
</span>
<div >
<div >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 >
change style text
</span>

CodePudding user response：

You need to put your css inside your style tag in html head

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

Or you can add it inside of existing stylesheet files, for example assets/css/custom.css that is already included

CodePudding user response：

with this example, it's impossible to figure out why your changes aren't working. the styles of some templates are load sometimes via js.

the priority of css load is

css file

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

inside your html

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

<span >
change style text
</span>

inside a tag

<span  style="color: red;
font-size:1.5em;">
change style text
</span>

the highest priority is inside a tag and overwrites all changes try one of this an see what works for you