CSS ist eine Beschreibungssprache, mit der Sie das Aussehen Ihrer HTML-Seiten steuern können. Für den niederschwelligen Start in die Programmierung ist HTML gut geeignet, HTML selbst ist für die Struktur der Seiten zuständig.
CSS lernt man durch das Benutzen von CSS und das Herumspielen im Zusammenhang mit HTML-Seiten. CSS lernen Sie eher nicht aus Büchern.
Stand: 15.11.2022
Dieser Beitrag ist Teil 2 einer kleinen dreiteiligen Serie
Teil 1: HTML Einstieg von Null auf Hundert
Teil 2: CSS Einstieg von Null auf Hundert (Dieser Beitrag)
Teil 3: Mit HTML und CSS Infografiken bauen (wird noch erstellt)
Was ist CSS?
CSS heißt Cascading Style Sheets und ist eine Auszeichnungssprache für Internet-Seiten. Eine separate CSS-Datei hat oft die Endung .css. Mit CSS können Sie Farbe, Schriftgröße und weiterer Eigenschaften einzelner DOM-Elemente in HTML-Seiten beeinflussen.
CSS sieht so ähnlich aus wie JSON.
CSS Lernen ist nicht sehr schwer, benötigt jedoch aktive Übung. Sie benötigen nur einen Rechner mit einem Dateisystem, einem Browser und einem Texteditor.
Im folgenden Beispiel sind die Auswirkungen von CSS auf Internetseiten gezeigt (Einige Grafiken sind aus den Lehrgangsunterlagen von Jörn Rings, NEU GmbH in Düsseldorf)
Abb. 1: Mit und ohne CSS
Ziel dieses Beitrags CSS Einstieg
Ziel des Beitrags ist
- einen schnellen ersten Einstig in CSS zu schaffen
- die Erstellung von einfachen Infografiken mit HTML und CSS vorzubereiten. Das wird insbesondere die Manipulation des <div> Elementes beinhalten.
Ziel ist es nicht, einen umfassenden Überblick zu geben. Das leiste eher die Quellen weiter hinten.
Wie kommt CSS mit HTML zusammen?
Es gibt drei Möglichkeiten, CSS mit HTML zusammenzubringen:
1. direkt am DOM Element („inline“) (gilt nur für das einzelne Element an dieser Stelle. Das ist die schnellste Methode, das Aussehen von einzelnen DOM-Elementen zu verändern.)
2. im Kopfbereich zwischen <head> und </head> des HTML-Dokuments (gilt für alle Elemente in diesem Dokument)
3. als externe Datei (dateiname.css) (gilt für alle HTML-Seiten, die das referenzieren)
Im Folgenden wird nur noch die dritte Möglichkeit besprochen. Die anderen lesen Sie nach im CSS-Teil von selfhtml.org.
Wie können Sie CSS-Dateien erstellen, bearbeiten und testen?
Starten Sie in Ihrem Wurzelverzeichnis und legen Sie sich ein neues Projektverzeichnis an, z.B. „HTML“. Wechseln Sie in das Verzeichnis. Arbeiten Sie im Terminal unter Linux oder Mac, können Sie nun zwei Datei anlegen mit
touch index.html touch index.css
Ansonsten verwenden Sie einen grafischen Editor wie Notepad++, Sublime Text oder Visual Studio Code. Die genannten Editoren haben den Vorteil, dass sie die CSS-Tags farbig darstellen können. Das erleichtert die Fehlersuche . Editoren werden in einem eigenen Beitrag beschrieben.
Bearbeiten Sie die Dateien mit dem Editor und speichern Sie sie häufig. Führen Sie einen Doppelklick auf eine Datei mit der Endung html aus, wird sie automatisch in Ihrem Browser geöffnet und lädt die CSS-Datei nach. Damit haben Sie gleich den Bearbeitungs-Workflow: Editieren – Speichern – Test der zugehörigen HTML-Datei mit Browser und von vorn.
Achten Sie darauf, von vornherein den Quelltext geordnet schreiben, das erleichtert später die Fehlersuche.
Die index.html erhält zunächst einen Verweis auf die CSS-Datei. Ab dann haben Einträge in der CSS-Datei Auswirkungen auf das Aussehen.
<html>
<head>
<meta name="language" content="de-DE"> <meta http-equiv="Content-type" content="text/html;charset=utf-8">
<meta name="mobile-web-app-capable" content="yes">
<link rel="STYLESHEET" type="text/css" href="index.css">
</head>
<body>
<h1>Erste Überschrift der Ebene 1</h1>
<p>Hallo Welt.</p>
<ul><li>Mini Liste</li></li></ul>
<div>
Ich bin nur ein Demo-Text.
</div>
</body>
</html>
Abb. : HTML-Datei mit wenigen Tags und einem Verweis auf die CSS-Datei.
Wichtig ist die Zeile ‚<link rel=“STYLESHEET“ type=“text/css“ href=“index.css“>‘. Das Statement sorgt dafür, dass der Browser die CSS-Datei nachlädt.
Wie sieht eine CSS-Datei aus?
Starten Sie mit wenigen CSS-Anweisungen. Im ersten Schritt geben Sie den Überschriften und den Listenelementen sowie dem Absatz etwas Farbe.
body,div,span,p,textarea {
max-width:1024px;
margin-left:auto;
margin-right:auto;
font-family:Arial, Verdana, Helvetica, Geneva, sans-serif, sans serif, sansserif, SansSerif;
font-size:2.0em;
text-align:center;
}
h1 {
color: white;
background-color: orangered;
font-size:1.6em;
}
p {
color: white;
background-color: turquoise;
font-size: 1.0em;
}
li { color: red; background-color: turquoise; font-size: 0.5em; }
Abb.: Inhalt der ersten index.css
Mehreren DOM-Elementen können zusammen Eigenschaften gegeben werden. Die Eigenschaften des Absatzes <p> werden dann weiter unten erweitert. Die Anweisungen „kaskadieren“ also.
Übung / Breakout Session 1
Tippen Sie das HTML Grundgerüst und die CSS-Statements im Editor Ihrer Wahl ab - oder kopieren Sie den Quelltext hinein. Speichern Sie sie unter index.html und indexXXX.css. Testen Sie durch Doppelklick auf index.html. Benennen Sie indexXXX.css um in index.css und testen Sie erneut.
Wie arbeiten Sie mit <div>, <span> und CSS-Klassen?
HTML-Tags lassen sich ineinander schachteln. Mit dem rechteckigen Bereich <div> und dem Inline-Bereich <span> können Sie sofort erste Schritte in Richtung Visualisierung von Daten gehen.
Die folgende Kombination index.html und index.css gibt erste Ideen, wie das funktionieren kann. Es werden gleich Klassen verwendet. In der CSS Datei werden die Klassennamen mit Punkt getrennt an das DOM-Element angehangen. In der HTML-Datei wird die Klasse benannt und weist dem entsprechenden Element ihre Eigenschaften zu.
<html> <head> <link rel="STYLESHEET" type="text/css" href="index.css"> </head> <body> <h1>Ein Balkentest</h1> <div> <span class="B1">erster Balken</span> und weitere Text<br> <span class="B2">zweiter Balken</span> und weiterer Text </div> <br><br> <div class="Abbildung"> <span class="B3">*******</span> 7<br> <span class="B4">***********************</span> 21 </div> </body> </html>
Abb. index.html mit der Verwendung von div und span
body, div, span {
max-width:1024px;
margin-left:auto;
margin-right:auto;
font-family:Arial, Verdana, Helvetica, Geneva, sans-serif, sans serif, sansserif, SansSerif;
font-size:1.0em;
text-align:left;
}
div {
color: white;
background-color: lightgrey;
font-size:0.8em;
}
div.Abbildung{
background-color: grey;
max-width:512px;
margin-left:auto;
margin-right:auto
}
span.B1 {
color: white;
background-color: darkred;
}
span.B2 {
color: white;
background-color: darkgreen;
}
span.B3 {
color: darkred;
background-color: darkred;
font-size:3.0em;
}
span.B4 {
color: darkgreen;
background-color: darkgreen;
font-size:3.0em;
}
Abb. : index.css mit der Verwendung von div und span
Übung / Breakout Session 2
Probieren Sie die index.html und index.css aus. Testen Sie vier Balken mit unterschiedlichen Breiten. Googeln Sie, ob es Möglichkeiten gib, dem div-Container abgerundete Ecken zu spendieren
Fazit
Sie können nun das Aussehen von HTML-Dateien mit CSS verändern.
Quellen für den CSS Einstieg & Weiterlesen
- Selfhtml eigent sich auch zum CSS-Lernen: HTML: Zum Nachschlagen, Lernen, einfach anfangen: selfhtml(extern)
- Ein ganz anderer Ansatz mit SVG: https://css-tricks.com/how-to-make-charts-with-svg/
Toller Beitrag, vielen Dank. Ich habe vor kurzem ein Start-up gegründet und bin mir nicht sicher, ob ich die Webseite selber erstellen soll oder eine Design Agentur beauftragen soll. Da ich die Webseite jedoch eher dringender brauche, werde ich wahrscheinlich jemanden beauftragen. Was meinen Sie?