CSS Einstieg von Null auf Hundert

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

  1. einen schnellen ersten Einstig in CSS zu schaffen
  2. 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

  1. Selfhtml eigent sich auch zum CSS-Lernen: HTML: Zum Nachschlagen, Lernen, einfach anfangen: selfhtml(extern)
  2. Ein ganz anderer Ansatz mit SVG: https://css-tricks.com/how-to-make-charts-with-svg/

Teile diesen Beitrag.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert