Wieso funktioniert die CSS-Datei nicht?

Question

Ich muss bis nächste Woche eine HTML-Website erstellen, und wollte meinem HTML-Dokument ein Stylesheet hinzufügen, jedoch wird das Stylesheet nicht übernommen, was ist der Grund dafür?
Hier sind Screenshots vom Code:
HTML:

CSS:

Kann mir bitte jemand sagen, woran der Fehler liegt?

regex9 · Answer

Du hast recht viele Fehler in deinem Dokument. Ich liste sie einmal auf:

1) In den head-Bereich eines Dokuments gehören nur Metainformationen, die nicht den Seiteninhalt, sondern das Dokument generell beschreiben (also z.B. wer der Autor ist, welche Stichworte sich mit ihm verbinden lassen, welche Zeichenkodierung genutzt werden soll, u.ä.).

Dein Bild/Logo ist jedoch ein Seitenelement. Es gehört in den body-Bereich.

2) Um zugleich beim Bildelement zu bleiben:

Das title-Attribut ist dazu da, um erweiterte Nutzungshinweise zu einem Element zu liefern. Ein klassisches Beispiel wäre ein Hinweis, dass man das Bild via Klick vergrößern kann (wenn so eine Funktion denn implementiert wäre). In deinem Fall ist es also fehl am Platz.
Die Attribute height und width erwarten nur numerische Werte, ohne Einheitsangabe. Wenn du Größen mit einer spezifischen Einheit setzen möchtest, nutze die CSS-Properties width und height.
Dem Bild fehlt ein alt-Attribut. Seinen Wert kannst du mit Hilfe dieses Guides bestimmen. Da es sich bei einem Logo um ein dekoratives Element handelt, bleibt der Attributwert leer.
Das align-Attribut gehört nicht zum Standard. Es wird dir vom Editor ja auch nicht grundlos rot markiert. Um das Bild zu positionieren, kannst du CSS (z.B. das text-align-Property) nutzen.

3) Der Wert des title-Elements gehört zwischen Start- und Endtag.

<title>Irgendein Titel</title>

4) Das type-Attribut des link-Elements erwartet einen validen MIME-Typ. Im Falle von CSS wäre das text/css. Du kannst das Attribut aber auch komplett weglassen, da der Browser den richtigen Typ dann auch automatisch ermitteln kann.

5) Das br-Element ist für Zeilenumbrüche innerhalb von Paragraphen gedacht. Für das Setzen größerer Abstände zwischen Elementen gibt es CSS-Properties wie margin oder padding.

6) In Zeile 19 verwendest du erneut Elemente/Attribute, die es im HTML5-Standard nicht gibt. Positionierungen, Schriftdefinitionen u.ä. kann man mit CSS vorgeben.

<h1 class="headline">Irgendein Titel</h1>

CSS:

.headline {
  color: green;
  font-family: "Broadway";
  font-size: 24px; /* for example */
  text-align: center;
}

7) In deinem CSS-Code fehlt hinter dem Wert für das border-radius-Property ein abschließendes Semikolon.

8) Tipp: Das ol-Element kann bereits für dich die Listenpunkte nummerieren. Das musst du nicht manuell machen.

Generell würde ich dir empfehlen, HTML und CSS mit einer aktuellen und seriösen Lernquelle zu lernen. Die Webdokumentation von Mozilla oder Mediaevent bieten sich da an.

Irgendein Titel

CSS:.headline { color: green; font-family: "Broadway"; font-size: 24px; /* for example */ text-align: center; } 7) In deinem CSS-Code fehlt hinter dem Wert für das border-radius-Property ein abschließendes Semikolon.8) Tipp: Das ol-Element kann bereits für dich die Listenpunkte nummerieren. Das musst du nicht manuell machen.Generell würde ich dir empfehlen, HTML und CSS mit einer aktuellen und seriösen Lernquelle zu lernen. Die Webdokumentation von Mozilla oder Mediaevent bieten sich da an.

Kurzeilig007 · Answer

Mach doch erstmal alles in eine Datei und füg das ganze zwischen unten ein. 🤷🏽‍♀️

DieFreistunde · Answer

Du mixt hier irgendwie viele Sachen zusammen. Das zeigt, dass du noch nicht ganz verstanden hast, wie CSS und HTML Harmonieren.

Vorweg:

Ist alles in einem Ordner? Also deine "index.html" und dein Stylesheet? Wenn es sich in einem Unterordner im Projekt-Ordner befindet, musst du diesen Pfad bei der Angabe zu dem Namen der Datei auch als solchen angeben.

Würde da auch einen kürzeren Namen vergeben z. B. "style.css". Der Name bzw. was dein Projekt sein soll wird ja vom Projekt-Ordner; also deinem "root" Verzeichnis der Webseite schon deutlich. Alles Interne soll / muss auch intern einfach lesbar sein.

Weiter:

Ja, du kannst die Attribute für deinen H1 Text natürlich auch in HTML angeben. Aber dafür ist eigentlich gar kein Bedarf...

Du kannst deinen H1 Text entweder, wie unten, in einen Div setzen und diesen in CSS mit Attributen bestücken oder eben nur dem H1 Titel eine ID vergeben, die du dann ebenfalls in CSS bearbeiten kannst.

Aber das musst du selber ausprobieren. Nimm dir aber gerne noch eine Hilfestellung von WW3 Schools:

https://www.w3schools.com/

Wieso funktioniert die CSS-Datei nicht?

3 Antworten