Registrieren/Anmelden

Eine Frage stellen

Thema erstellen

Was ist CSS, und wie kann ich CSS in HTML einbinden?

Was ist CSS überhaupt, und wie kannst du es in deine HTML-Seite einbinden? Lerne alles über die CSS-Einbindung, die Dominanz-Regeln von CSS und vieles mehr!
(Letztes Update von Niklas Baumgärtler am 20.9.2020)

Am Ende wirst du:

  • Wissen wie man CSS in HTML einbinden kann
  • Die Vor- und Nachteile der verschiedenen Methoden kennen
  • Den Aufbau einer .css-Datei verstehen
  • Wissen was ein CSS-Selektor ist und wie du ihn anwendest
  • Die CSS-Dominanz-Regeln kennen
Diese Einheit überspringen

Willkommen zurück! Am Ende der letzten Lektion habe ich dir versprochen, dass wir heute etwas lernen werden, was dir hilft, in Zukunft einiges an Aufwand einzusparen. Dieses Versprechen werde ich nun einlösen.

Bisher haben wir einzelne CSS-Befehle über das style-Attribut in unsere HTML-Seite eingebunden. Das funktioniert zwar, wird aber bei einer größeren HTML-Seite rasch sehr aufwendig und unübersichtlich. Deswegen lernen wir heute über alternative Arten, wie wir CSS in HTML einbinden.

Langsam nähern wir uns der Essenz der Programmierung an: Die Programmierung ist vor allem ein Werkzeug, um  sich durch schlaue Automatisierung manuelle Arbeit zu ersparen. CSS-Dateien in HTML einzubinden wird ein erster großer Schritt auf diesem Weg sein. Und falls du Geschmack daran findest dir dein Leben derart zu vereinfachen, dann wird dir der Kurs über PHP und MySQL dann so richtig Freude machen. Aber lass uns erstmal klein anfangen und mit den Grundlagen weitermachen.

Und was ist CSS eigentlich überhaupt? Lass uns diese Frage als erstes klären:

1. Was ist CSS überhaupt?

CSS ist eine Abkürzung für “Cascading Style Sheets”.

“Style Sheet” ist einfach eine Bezeichnung für eine Liste an Style-Anweisungen. Kannst du dich noch an das Style-Attribut in HTML erinnern, in das wir eine Reihe von CSS-Befehlen hineinschreiben konnten? Unser “Style Sheet” ist gewissermaßen ein großes Blatt Papier, auf dem wir alle diese Style-Attribute unseres HTML-Dokuments zusammengesammelt haben.

Aber was bedeutet das Wort “Cascading”, und in welchem Zusammenhang ist es hier zu verstehen? “Cascading” ist frei übersetzt eine Beschreibung für einen stufenweise herabstürzenden Wasserfall, bzw. den Weg, den das Wasser dabei nimmt:

Cascading = herabstürzend

Aber bevor wir uns damit beschäftigen was das stufenweise herabstürzen bedeuten soll, lernen wir erst einmal über die verschiedenen Varianten, CSS-Befehle in HTML einzubinden.

2. Wie kann man CSS in HTML einbinden?

CSS-Befehle lassen sich auf zwei Arten in eine HTML-Seite einbinden. Eine davon kennst du ja bereits: Die Möglichkeit über das Style-Attribut. Es gibt zwar noch eine dritte Möglichkeit, aber die ist für unsere Zwecke nicht wirklich interessant. Der Vollständigkeit halber findest du weiter unten trotzdem noch eine Anleitung dazu.

2.1 CSS in HTML einbinden über das style-Attribut

Diese Möglichkeit CSS in HTML einzubinden haben wir auch schon in den letzten Lektionen genutzt. Zur Erinnerung hier nochmal ein Beispiel-Code, wie wir einem DIV-Element eine definierte Breite und Höhe verpassen können:

<div style='width: 300px; height: 200px;'>

Alle CSS-Befehle, die wir auf dieses HTML-Element anwenden wollen, werden einfach in das Style-Attribut “eingereiht”.

2.1.1 Vorteile, CSS über das style-Attribut in HTML einzubinden

  • Unaufwendig
  • Leicht zuzuordnen
  • Du musst nichts dazulernen

2.1.2 Nachteile, CSS über das style-Attribut in HTML einzubinden

  • Unübersichtlich, sobald es um mehr als 2-3 CSS-Anweisungen geht
  • Keine Automatisierungs-Vorteile
  • Enormer Mehraufwand, sobald es Umänderungen in mehreren HTML-Seiten gibt
  • Begrenzte Möglichkeiten, die Macht von CSS voll zu nutzen
  • Veraltete Vorgehensweise -> Deine Webseite wird womöglich nicht ernstgenommen

2.2 CSS in HTML einbinden über eine eigene .css-Datei

Bevor wir uns damit befassen werden wie es funktioniert CSS-Befehle über eine eigene .css-Datei in HTML einzufügen möchte ich dir erst einmal die Vor- und Nachteile verdeutlichen. Fangen wir zuallererst mit den Nachteilen an, bevor wir uns die Vorteile bewusst machen:

2.2.1 Nachteile, CSS über eine eigene .css-Datei in HTML einzubinden

  • Ein Aufwand von ca. 5 Minuten, diese Datei zu erstellen und einzubinden
  • Den Aufwand von ca. 1/2h um zu lernen wie es funktioniert die Datei in HTML einzubinden

2.2.2 Vorteile, CSS über eine eigene .css-Datei in HTML einzubinden

  • Bessere Übersicht
  • Anwendbar auf mehrere HTML-Dateien
  • Änderungen werden automatisch auf alle verknüpften HML-Dateien angewendet
  • Die Volle Macht von CSS ausschöpfen können

Diese neue Technik des CSS-in-HTML-einbindens zu lernen kostet dich für den Anfang wohl nicht länger als eine halbe Stunde deiner Zeit. Und jedes Mal, wenn du an irgendeiner Webseite programmierst, wirst du dir viele Stunden an zusätzlicher Arbeit ersparen, wenn du diese Zeit jetzt weise investierst.

Wollen wir beginnen?

Dann lass uns loslegen!

2.2.3 Die .css-Datei erstellen

Als ersten Schritt erstellen wir eine neue Datei die unsere CSS-Befehle dann enthalten soll.

Dies geht in Eclipse ganz einfach. Mache einfach wieder einen Rechtsklick auf dein Projekt im Project Explorer von Eclipse, New…->File und gib ihr einen Namen der mit .css aufhört, dann klicke “Finish”.

Alternativ kannst du auch einfach in deinem Projekt-Ordner eine neue Datei erstellen und ihr einen Namen mit der Endung .css erstellen. Es ist ja im Grunde nur eine Text-Datei, das schafft auch dein Windows-Explorer.

Der übliche Name für die Haupt-CSS-Datei ist übrigens style.css – den würde ich auch dir empfehlen.

Wenn du unsere style.css nun öffnest (in Eclipse öffnet sie sich automatisch), dann ist diese noch ziemlich leer. Füge nun den folgenden Code ein und speichere sie:

body {
	color: green;
}

Dieser CSS-Code sagt unserem Browser, dass er auf den <body>-Block alle CSS-Befehle zwischen der öffnenden geschwungenen Klammer und der schließenden geschwungenen Klammer anwenden soll. In diesem Fall soll er den Text grün einfärben.

Profi-Tipp: Falls du dich fragst, wo auf deiner Tastatur diese geschwungenen Klammern zu finden sind: Diese sind über der 7 und der 0 zu finden. Damit du sie verwenden kannst, musst du die AltGr-Taste drücken. Sie ist zumindest auf meiner Tastatur ganz in er Nähe der Leertaste zu finden. Du benutzt die AltGr-Taste ähnlich wie die Taste für die Groß-Schreibung wenn du einen großen Buchstabe schreiben möchtest. Zuerst hältst du die AltGr-Taste gedrückt, und dann – während du sie weiter drückst – drückst du z.B. die 7, um eine öffnende geschwungene Klammer zu tippen.

Wenn wir jetzt unsere Webseite im Browser öffnen, zeigt er den Text aber immer noch schwarz an. Was ist schiefgegangen?

Der Browser weiß ja noch nicht, dass er unsere style.css überhaupt beachten soll – das müssen wir ihm dringend mal mitteilen! Was uns zum nächsten Schritt führt: Dem Einbinden der CSS-Datei in eine HTML-Seite.

2.2.4 Die .css-Datei in HTML einbinden

Dazu musst du als erstes zurück zu deiner HTML-Seite wechseln, in die du die .css-Datei einbinden willst.

Ganz am Anfang des Kurses, als wir unsere erste minimale HTML-Seite erstellt haben, habe ich dir den Unterschied zwischen dem <head>-Block und dem <body>-Block erklärt. Ich habe dir erzählt, dass der <body>-Block für den eigentlichen angezeigten Inhalt der Webseite zuständig ist. Mit dem haben wir uns in letzter Zeit so viel beschäftigt, dass du vermutlich nicht mehr weißt, wofür dann der <head>-Block zuständig ist. Weißt du es noch?

Falls nicht, hier nochmal ganz kurz: Der <head>-Block einer HTML-Seite ist für die sogenannten Meta-Informationen zuständig. Einerseits für den Titel des Dokumentes, also das, was du als Beschriftung deines jeweils geöffneten Tabs ganz oben sehen kannst. Aber auch für das Einbinden von CSS-Dateien und Java Script-Dateien. Um Java Script werden wir uns jetzt nicht kümmern, das ist einen eigenen Kurs wert, aber unsere style.css werden wir jetzt einbinden. Und zwar sieht das dann so im Source-Code aus:

<head>
    <meta charset="utf-8">
    <title>DIV-Layouts</title>
    <link rel="stylesheet" href="style.css">
</head>

Wenn du jetzt deine Webseite ansiehst, sollte die Schrift überall auf der Webseite grün sein.

2.3 CSS in HTML einbinden über einen eigenen Style-Tag im <head>-Block

Der Vollständigkeit halber sei hier noch eine dritte Möglichkeit erwähnt, wie du CSS in HTML einbinden kannst. Du kannst auch einfach alles was in deiner .css-Datei stehen würde in dein <head>-Block packen, das würde dann etwa so aussehen:

<head>
    <meta charset="utf-8">
    <title>DIV-Layouts</title>
    <style>
        body {
	    color: green;
        }
    </style>
</head>

Auch das funktioniert, aber ich würde dir eher davon abraten, weil du dann erst recht wieder für jede einzelne HTML-Datei Änderungen händisch umschreiben musst.

Profi-Tipp: Es gibt spezielle Situationen in denen dieser Zugang Sinn machen kann, etwa wenn du mit Hilfe von PHP genau definierst, welche CSS-Befehle auf welcher Unterseite überhaupt geladen werden sollen und welche nicht, um die Ladezeit deiner Webseite zu beschleunigen. Aber für den Anfang würde ich dir zu der zweiten Variante raten, also jene mit der zusätzlichen .css-Datei.

3. CSS-Selektoren für Anfänger

Nun da wir wissen wie wir eine CSS-Datei in HTML einbinden können, wird es Zeit zu lernen was wir damit alles anstellen können. Aber bevor wir das tun, müssen wir uns erstmal mit einer Problematik befassen, an der wir uns bisher mit Hilfe des style-Attributs “vorbeigeschwindelt” haben.

Bei diesem ist ja klar, auf welches HTML-Element die CSS-Befehle angewendet werden sollen, weil das Style-Attribut klar ersichtlich zu einem ganz bestimmten HTML-Element gehört. Wenn wir nun aber mit einer eigenen .css-Datei arbeiten, ist das nicht mehr so einfach.

Dazu müssen wir uns die drei Arten ansehen, wie CSS-Befehle den einzelnen HTML-Elementen zugewiesen werden.

3.1 Die drei Arten, CSS-Befehle HTML-Elementen zuzuweisen

Es gibt drei Arten, wie wir unseren HTML-Elementen über eine externe .css-Datei CSS-Befehle zuweisen können. Die Zuweisung über Tag-Namen, die Zuweisung über IDs und die Zuweisung über Klassen.

3.1.1 CSS über Tag-Namen den HTML-Elementen zuweisen

Die erste Möglichkeit, CSS Befehle bestimmten HTML-Tags in unserer Webseite zuzuweisen ist die Zuweisung über HTML-Tags. Auf diese Art und Weise können wir zum Beispiel allen Absätzen unserer HTML-Seite den gleichen äußeren Abstand nach links zuweisen, oder allen H1-Überschriften eine blaue Farbe geben:

p {
    margin-left: 20px;
}

h2 {
    color: blue;
}

Die Schreibweise (in der Informatik auch Syntax genannt) ist dabei immer gleich:

  1. Der Name des HTML-Tags, z.B. p für <p>-Tags
  2. Die öffnende geschwungene Klammer {
  3. Eine Liste an CSS-Befehlen, jeweils mit einem Strichpunkt ; am Ende
  4. Die schließende geschwungene Klammer }

Diese Vorgehensweise reicht uns gut aus, wenn es wirklich nur darum geht, z.B. allen h2-Überschriften im Dokument eine andere Farbe oder so zu geben. Ein häufiger Anwendungs-Fall (in der Informatik auch Use-Case genannt) ist das Verschönern von Links, die ja ohne zusätzliches Styling nur langweilig blau und unterstrichen sind. Standardmäßig wird auf Links im Browser nämlich der CSS-Befehl “text-decoration: underline;” angewendet, das müssen wir dazu auf “none”, also auf keine ändern:

a {
    color: green;
    text-decoration: none;
}

Nun sind alle Links auf unserer HTML-Seite grün und nicht mehr unterstrichen. Gar nicht so schwer, oder?

Nur ist diese Vorgehensweise leider ziemlich limitiert. Was ist, wenn wir beispielsweise nur ein ganz bestimmtes DIV anders aussehen lassen wollen wie die anderen?

Das führt uns zur nächsten Technik, die mit den IDs.

3.1.2 CSS über IDs den HTML-Elementen zuweisen

Wenn wir nur ein ganz bestimmtes HTML-Element besonders stylen wollen, müssen wir dieses irgendwie auswählen können. Damit das funktioniert, müssen wir zuerst diesem HTML-Element eine einzigartige ID zuweisen.

In einer vorherigen Lektion in der es um Links ging haben wir das schon einmal gemacht, als wir versucht haben interne Links zu setzen. Das waren die Links, die den Benutzer wenn man darauf klickt direkt zu einem bestimmten HTML-Element bringen.

Die ID ist ein Attribut eines HTML-Dokuments und funktioniert in der Zuweisung genau wie alle anderen Attribute, wie z.B. auch das style-Attribut. Ein DIV mit einer ID von ‘lustwandelndes Tierchen’ würde dann zum Beispiel so im BODY-Block unseres HTML-Dokuments definiert sein:

<div id='lustwandelndes_Tierchen'>
<!-- (hier irgendeinen Inhalt vorstellen) --!>
</div>

Statt “lustwandelndes_Tierchen” kannst du jeden beliebigen Begriff einsetzen. Diesen Begriff habe ich gewählt, weil er so sinnlos ist – einfach damit du siehst dass es technisch betrachtet wirklich egal ist was du da wählst. Wichtig ist es nur, dass der Begriff keine Leerzeichen enthält. Warum, wirst du in Kürze gleich erkennen können.

Natürlich wird es zwecks besserer Übersicht für dich trotzdem sinnvoll sein, dir da Bezeichnungen zu überlegen, die du wieder-erkennst, z.B. ‘main-menu’ für das Haupt-Menü-DIV. Das hilft auch Suchmaschinen dabei, deine Webseite besser zu verstehen.

Profi-Tipp: Du kannst übrigens statt den ‘-Zeichen auch genausogut “-Zeichen verwenden. Wichtig ist nur dass du sie nicht vermischt. Die “-Zeichen findest du übrigens über der 2 auf der Tastatur, das ‘-Zeichen über der Raute # (und diese neben dem Ä). Bei beiden Zeichen musst du gleichzeitig die Großschreib-Taste drücken und dann die Taste.

Nun da wir ein HTML-Element mit einer dazugehörigen ID haben, können wir zurück in unsere style.css wechseln und unserem Element mit dieser ID einige CSS-Befehle zuweisen. Damit der Browser weiß dass diese Anweisungen auf eine ID zutreffen sollen, schreiben wir im .css-Dokument vor dem Namen der ID eine Raute (#), also in etwa so:

#lustwandelndes_Tierchen {
    background-color: orange;
}

Dieser Befehl färbt nun unser DIV mit der ID ‘lustwandelndes_Tierchen’ orange, aber nur dieses eine DIV. Die anderen DIVs bleiben davon unberührt.

Wenn du nun z.B. einen bestimmten Absatz stylen willst, funktioniert das Prinzip genau gleich:

  1. Dem HTML-Element eine ID zuweisen
  2. In der style.css den gleichen ID-Begriff mit einer Raute davor schreiben, Klammer auf und los geht’s

Wichtig dabei ist, dass eine jede ID nur ein einziges Mal im ganzen HTML-Dokument vorkommen darf, sonst macht der Browser dir einfach irgendetwas.

Was aber ist, wenn wir Anweisungen auf mehrere ganz bestimmte HTML-Elemente auf unserer Webseite anwenden wollen, aber nicht alle?

Dann wird es Zeit, etwas über Klassen zu lernen.

3.1.3 CSS über Klassen den HTML-Elementen zuweisen

Klassen sind wie IDs ein Attribut von HTML-Elementen und werden auf die gleiche Art und Weise zugewiesen. Wenn ein Absatz z.B. die Klasse “lustigerer-Absatz” bekommen soll, dann schreibst du das so in deinen BODY-Block:

<p class='lustigerer-Absatz'>
<!-- Was im Absatz drin ist --!>
</p>

Genau wie bei der Zuweisung über die ID müssen wir jetzt dem Browser noch sagen, was er im Falle eines lustigeren Absatzes denn tun soll, und das machen wir wieder in unserer .css-Datei.

Die Zuweisung über IDs funktionierte dort über den ID-Namen mit einer Raute davor. Bei Klassen ist es fast dasselbe, nur schreibst du statt einer Raute einen Punkt vor die Klassen-Bezeichnung:

.lustigerer-Absatz {
    font-size: 50px;
}

Nun haben alle HTML-Elemente auf unserer Webseite, die die Klasse ‘lustigerer-Absatz’ zugewiesen bekommen haben, eine Schriftgröße von 50px bekommen. Das ist ziemlich riesig und sieht dementsprechend absurd aus.

CSS über Klassen in HTML einfügen

Welche HTML-Elemente haben hier wohl das “class=’lustigerer_Absatz'”-Attribut zugewiesen bekommen? Wenn du einem HTML-Element auf deiner Seite die selbe Klasse zuweist, selbst wenn es kein Absatz ist, dann bekommt auch dieses die riesige Schriftgröße.

Anders als bei den IDs kann ein HTML-Element auch mehrere Klassen haben. Dann schreibst du einfach mehrere Klassen hintereinander ins class-Attribut dazu, z.B. so:

<div class='klasse1 klasse2 klasse3'>

4. CSS-Befehle über mehrere Stufen: Warum es Cascading Style Sheets heißt

Nun kann es sein, dass wir eine HTML-Seite haben in dem es z.B. mehrere verschachtelte DIVs gibt, also DIVs, die sich innerhalb anderer DIVs befinden usw. Sehen wir uns dazu einfach mal ein Beispiel an – kopiere den folgenden Code in deine index.html (oder ein anderes HTML-Dokument dass du dann im Browser öffnest):

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>DIV-Layouts</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
  	<div id='content'>
  		<div>
  			Hier kommt das Navi-Menü hin
  		</div>
  		<div >
  			<div class='inh'>
  				Inhalt 1
  			</div>
  			<div class='inh'>
  				Inhalt 2
  			</div>
  		</div>
  	</div>
  </body>
</html>

Wir haben hier einige DIVs, die ineinander verschachtelt sind. Das übergeordnete DIV hat eine ID namens ‘content’ bekommen, und die zwei am tiefsten in der Struktur liegenden DIVs haben die Klasse ‘inh’ zugewiesen bekommen. Nun definieren wir in unserer .css-Datei noch folgendes:

body {
	margin: 0px;
}

#content {
	width: 100%;
	height: 300px;
	background-color: red;
}

#content div {
	border: 1px solid yellow;
	float: left;
	padding: 30px;
	margin: 20px;
}

div {
	background-color: blue;
}

.inh { 
    background-color: green;
}

Was passiert hier:

  • Das übergeordnete DIV mit der ID ‘content’ nimmt die ganze Breite des Browsers ein, eine Höhe von 300 Pixeln und hat einen roten Hintergrund.
  • Alle Kinder-DIVs von dem DIV mit der ID ‘content’ bekommen einen gelben Rahmen und etwas Abstand nach innen und außen (padding und margin).
  • DIVs auf der ganzen HTML-Seite bekommen einen blauen Hintergrund.
  • HTML-Elemente mit der Klasse “inh” bekommen einen grünen Hintergrund.

Dann lass uns mal das Ergebnis betrachten:

CSS in HTML einfügen Regeln

Vielleicht kommt bei dir jetzt eine Frage auf, nämlich: Wenn alle DIVs in dem HTML-Dokument einen blauen Hintergrund haben sollen, warum ist dann unser DIV mit der ID ‘content’ trotzdem rot und die DIVs mit der Klasse ‘inh’ trotzdem grün?

Das bringt uns zum nächsten großen Thema, nämlich zu den Dominanz-Regeln für CSS: Welcher CSS-Befehl setzt sich im Konflikt-Fall durch?

5. Dominanz-Regeln: Welcher CSS-Befehl setzt sich durch?

Manchmal gibt es mehrere Möglichkeiten für den Browser, einem Element einen CSS-Befehl zuzuweisen. In unserem Beispiel eine blaue, eine rote oder eine grüne Hintergrund-Farbe. Dann muss er eine Entscheidung treffen können, und damit diese nicht zufällig passiert (schlecht für einen Webdesigner), beachtet er dabei einige Grundregeln.

Es gibt nur wenige solcher Grundregeln, und du wirst das Prinzip rasch verstanden haben, aber es kann sein dass es anfangs für dich etwas verwirrend sein kann sie in der Praxis anzuwenden. Doch keine Angst: Das wird mit der Zeit besser. Ok, dann lass uns beginnnen:

5.1 Dominanz-Faktor 1: Tiefe

Egal ob es sich um HTML-Tag-Namen, IDs oder Klassen handelt, wenn ein sogenannter CSS-Selektor (das was am Anfang der Zeile steht bis hin zur öffnenden geschwungenen Klammer) tiefer in die HTML-Struktur geht als ein anderer, dann hat dieser “gewonnen”. Die Tiefe solcher Selektoren erkennst du an er Anzahl der Begriffe die mit einem Leerzeichen getrennt sind und vor der öffnenden geschwungenen Klammer stehen – deswegen dürfen ID- oder Klassen-Namen auch keine Leerzeichen enthalten. Versuche, die Tiefe der folgenden 5 Selektoren zu erraten, bevor du weiterliest:

p {
    background-color: black;
}

div p {
    background-color: yellow;
}

.lalala p {
    background-color: blue;
}

.lalala p .argh #rutschlulatsch {
    background-color: red;
}

#tamtam #vargh {
    background-color: purple;
}

Die richtigen Lösungen lauten: 1, 2, 2, 4, 2. Hast du richtig geraten?

Je tiefer durchdefiniert ein CSS-Selektor ist, desto mehr “Vorrang” hat er vor Anweisungen aus anderen Selektoren mit geringerer Tiefe.

Der vierte Selektor im obigen Beispiel setzt sich somit mit seiner roten Farbe über alle anderen hinweg falls er auf das gleiche HTML-Element zeigt. Der erste “verliert” gegen alle.

Aber was ist mit denen, die die gleiche Tiefe haben? Wie geht der Browser dann vor?

5.2 Dominanz-Faktor 2: IDs vor Klassen vor Tag-Namen

Zeigen mehrere CSS-Selektoren auf das selbe HTML-Tag, und weisen alle jene Selektoren auch noch die gleiche Tiefe auf, entscheidet der Browser folgendermaßen:

  1. ID gegen Klasse: ID siegt
  2. ID gegen Tag-Namen: ID siegt
  3. Klasse gegen Tag-Namen: Klasse siegt

Wenn aber z.B. ID gegen ID steht dann wird das Ganze ein wenig… zufällig. Meist setzt sich dann der Befehl durch, der später im .css-Dokument geschrieben steht, weil er den vorherigen Befehl gewissermaßen “überschreibt”.

So, damit haben wir die wichtigsten CSS-Grundlagen geschafft! Du kannst dir auf die Schulter klopfen, das hast du dir verdient! Ich kann mir vorstellen dass dieses Kapitel für dich etwas schwieriger war als die bisherigen, oder zumindest würde es mich nicht wundern.

Aber ab jetzt werden wir uns dafür bei den folgenden Lektionen so einiges an Arbeit ersparen. Und jetzt sind es nur noch wenige Lektionen bis wir alles an Grundwissen zusammen haben, um unser erstes großes Webseiten-Projekt angehen können.

Freust du dich schon?

6. Bonus-Kapitel: CSS-Befehle bei bestehenden Webseiten und CMS “überschreiben”

(Dieses Kapitel ist eher ein Profi-Tipp, aber vielleicht auch nützlich für dich falls du schon einmal mit einem CMS wie WordPress gearbeitet hast und dich gefragt hast wie du dort einfache Änderungen am Layout machen kannst).

Wenn du nun zum Beispiel eine Webseite hast die auf einem CMS (Content Management System) wie WordPress läuft und einfach nur z.B. eine Farbe bei einem vorgefertigten Theme (Layout) verändern willst, dann gibt es dort die Option “zusätzliches CSS”, wo du Extra-CSS-Befehle einfügen kannst. Wenn du nun mit dem Webseiten-Inspektor das HTML-Element untersuchst das du ändern willst (z.B. eine Überschrift auf www.bunterrichten.com), dann erhältst du folgendes Bild:

CSS in HTML einfügen WordPress zusätzliches CSS

Wie du im rechten Bereich unten sehen kannst ist die Überschrift durch den CSS-Selektor “#page-title h1” so geworden wie sie geworden ist. Dieser Selektor hat eine Tiefe von 2. Wenn du nun etwas an den darin enthaltenen CSS-Befehlen ändern willst, dann musst du einen CSS-Befehl einsetzen der eine noch größere Tiefe hat, zum Beispiel 3. Das machst du, in dem du im Webseiten-Inspektor links unten nach übergeordneten HTML-Elementen suchst und einen neuen Selektor erstellst, in dem der bisherige um ein weiteres Element erweitert wird. Aus dem ursprünglichen “#page-title h1” wird dann z.B. dieser:

#overViewBlock #page-title h1 {
    text-align: left;
}

Dieser Selektor hat eine Tiefe von 3 und “gewinnt” damit gegen den ursprünglichen mit der Tiefe von 2. So kannst du vergleichsweise einfach in Content-Management-Systemen Anpassungen an Themes (Layouts) vornehmen.

Du hast nun:

  • Verstanden wie man CSS in HTML einbindet
  • Verschiedene Methoden der Einbindung kennengelernt
  • Den Aufbau einer .css-Datei verstanden
  • Erkannt, was ein CSS-Selektor ist und wie du ihn korrekt anwendest
  • Die CSS-Dominanz-Regeln verstanden
Diese Einheit abschließen

Mit deinem kostenlosen Account kannst du:

  • deine selbst programmierte Webseite auf verschiedenen Geräten ansehen und auch deinen Freunden zeigen
  • Fragen an mich und die Community stellen
  • mehr Hilfsmittel benutzen, um dich besser im Kurs zu orientieren