CSS not working, W3.CSS rewriting?
I copied the W3.CSS template and I'm going to use it as a base for my web page. I'm trying to add some custom CSS to change the text, but for some reason it doesn't work? I am importing a custom CSS file after W3.CSS so it will overwrite W3.CSS but for some reason it sticks to W3.CSS ... Here are my files and code: style.css (custom css):
h1 {
font-family: "Arial", sans-serif;
color:red;
}
.heading {
font-family: "Arial", sans-serif;
color:red;
}
And index.html:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-black.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
<style>
html,body,h1,h2,h3,h4,h5,h6 {font-family: "Roboto", sans-serif}
</style>
Then in index.html:
<div class="w3-row w3-padding-64">
<div class="w3-twothird w3-container">
<h1 class="w3-text-teal heading">Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
The title is blue, but I want it to be red. My CSS doesn't work for some reason ... I tried my css on an empty html template and it worked in a way that W3 does something, but I don't know why.
source to share
This should work, so I checked out the W3 CSS and it has an important tag in w3-text-teal, which means it will be overwritten no matter if you haven't included the important tag in your CSS as well. So what can you do with style.css:
h1 {
font-family: "Arial", sans-serif;
color:red;
}
.heading {
font-family: "Arial", sans-serif;
color:red !important;
}
You should never use! important if you really don't need to. But since W3.css uses this a lot, you should use your current setting. You can also remove the class w3-text-teal
from your tag and it will work too, without adding the important tag. I recommend doing this because then you don't need to use an important tag.
<h1 class="heading">Heading</h1>
instead:
<h1 class="w3-text-teal heading">Heading</h1>
And your css remains the same:
h1 {
font-family: "Arial", sans-serif;
color:red;
}
.heading {
font-family: "Arial", sans-serif;
color:red;
}
source to share