CSS funktioniert nicht, W3.CSS überschreibt?

Question

Ich habe eine W3.CSS-Vorlage kopiert und werde sie als Basis für meine Webseite verwenden. Ich versuche, ein paar benutzerdefinierte CSS hinzuzufügen, um den Text zu ändern, aber aus irgendeinem Grund funktioniert es nicht? Ich importiere die benutzerdefinierte CSS-Datei nach der W3.CSS, so dass es die W3.CSS überschreibt, aber aus irgendeinem Grund bleibt es mit der W3.CSS ... Hier sind meine Dateien und Code: style.css (benutzerdefinierte css) :

h1 { 
    font-family: "Arial", sans-serif; 
    color:red; 
} 
.heading { 
    font-family: "Arial", sans-serif; 
    color:red; 
} 

Und 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> 

später dann 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> 

Die Überschrift ist blau, aber ich will es rot. Mein CSS funktioniert aus irgendeinem Grund nicht ... Ich habe mein CSS auf einer leeren HTML-Vorlage versucht und es hat funktioniert, so dass W3 etwas tut, aber ich weiß nicht warum.

Answer 1

Das sollte funktionieren, also habe ich das W3 CSS geprüft und es hat ein! Wichtiges Tag auf w3-text-teal, was bedeutet, dass es egal was überschrieben wird, außer du fügst auch ein wichtiges Tag in deinem CSS ein. Also, was können Sie tun, ist: style.css:

h1 { 
    font-family: "Arial", sans-serif; 
    color:red; 
} 
.heading { 
    font-family: "Arial", sans-serif; 
    color:red !important; 
} 

Sie sollten nie verwenden wichtig, wenn Sie wirklich zu haben. Aber da W3.css es anscheinend sehr oft benutzt, musst du es mit deinem aktuellen Setup machen. Sie können auch die Klasse w3-text-teal aus Ihrem Tag entfernen, und es funktioniert auch, ohne dass ein wichtiges Tag hinzugefügt werden muss. Ich empfehle das, weil du dann das! Wichtig-Tag nicht benutzen musst.

<h1 class="heading">Heading</h1> 

statt:

<h1 class="w3-text-teal heading">Heading</h1> 

Und Ihre CSS bleibt gleich:

h1 { 
    font-family: "Arial", sans-serif; 
    color:red; 
} 
.heading { 
    font-family: "Arial", sans-serif; 
    color:red; 
}