Benötigte Software
Für das Erstellen der CSS-Dokumente wird ein Texteditor benötigt, in dem der Code erstellt werden kann. Um den geschriebenen Code sichtbar zu machen, benötigen wir einen Webbrowser.
Texteditor / Codeeditor
Ein einfacher Texteditor, wie er vom Betriebssystem bereitgestellt wird, reicht dafür zwar aus, aber diese eignen sich nicht besonders gut für das Umsetzen größerer Projekte. Im Internet gibt es zahlreiche kostenlose Tools, die für das Erstellen und bearbeiten von CSS-Dateien ausreichende Funktionen zur Verfügung stellen.
beliebte Texteditoren / Codeeditoren
Webbrowser
Windows Betriebssysteme hatten bis Windows 10 den "Internet-Explorer" als Standard-Browser, seit Windows 10 ist sein Nachfolger der Webbrowser "Microsoft Edge". Inzwischen hat Microsoft mit dem Webbrowser "Edge Chromium" nachgelegt, der seine Vorgänger um weiten voraus ist.
Weil die Microsoft-Browser bisher nicht die besten Freunde des Webentwicklers waren, wurde lieber mit alternativer Software gearbeitet.
beliebte Webbrowser
Nach der Installation des Webbrowsers sollte dieser als Standardbrowser in den Systemsteuerungen eingestellt werden.
Um in die Entwicklerumgebung des Webbrowsers zu gelangen, reicht es meistens aus, die Taste F12 (Funktionstaste 12) auf der Tastatur zu drücken. Alternativ gelangt man über einem Rechtsklick im aktuellen Browserfenster in ein Kontextmenü, über welches auch die Entwicklerumgebung geöffnet werden kann. Bei Chrome zum Beispiel heißt der Menüpunkt Untersuchen.
Was man wissen sollte
Eine CSS-Datei kann auf mehreren Seiten ein einheitliches Design erstellen. Jedoch wird dieses Design leider nicht auf allen Monitoren gleich aussehen. In Zeitschriften oder ähnlichen wird die Darstellung immer die Gleiche sein. Bei Webseiten liegt das Problem schon darin, das jeder Benutzer einen anderen Browser und einen anderen Monitor mit einer anderen Auflösung hat. Über bestimmte Einstellungen im Browser kann der Benutzer sogar dafür sorgen, dass die Gestaltungen vom Designer ignoriert werden. Aber die wenigsten verwenden solche Einstellungen. Die Webbrowser haben auch nicht alle den gleichen Entwicklungszustand, wodurch einige Funktionen beim Browser A schon lange implementiert wurden, aber die gleichen Funktionen bei Browser B erst zukünftig zu erwarten sind. Jeder Webbrowser verfügt über sein eigenes integriertes Stylesheet, dadurch kann es vereinzelt zu Abweichungen zwischen den Webbrowsern kommen.
Die erste Datei erstellen
Bevor wir die erste CSS-Datei schreiben, erstellen wir noch einen Projektordner. Dieser Ordner kann irgendwo im System erstellt werden. Am schnellsten geht das allerdings, wenn ein neuer Ordner direkt auf dem Desktop erstellt wird (Rechtsklick Neu Ordner).
Der Name des Ordners kann ein beliebiger Name sein. Als Namensvorlage könnte "mein erstes CSS" dienen.
Nun benötigen wir als Erstes eine HTML-Datei in diesem Ordner, bei der wir die Elemente verändern können. Entweder wir erstellen eine neue Textdatei in dem Projektordner, die mit dem Name "index.html" gespeichert wird.
Achtung!
Die Dateiendung muss unbedingt von ".txt" auf ".html" geändert werden.
Manchmal verändert sich die Dateiendung nicht wie gewünscht und dann trägt die Datei den Name "index.html.txt" und ist somit immer noch eine Textdatei.
Oder wir öffnen den Texteditor / Codeeditor und speichern einfach eine Datei mit dem Namen "index.html" in den Projektordner, den wir erstellt haben. Nachdem die Datei "index.html" im Projektordner liegt, müssen wir nur noch ein paar Elemente einfügen, um mit CSS darauf zugreifen zu können.
Der nachfolgende Inhalt einer HTML-Datei kann kopiert und im Verzeichnis abgespeichert werden:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Titel der Webseite</title>
</head>
<body>
<h1>Hauptüberschrift</h1>
<h2>Artikelüberschrift</h2>
<p>Sichtbarer Teil der Webseite</p>
<p>Ich bin ein Textabsatz</p>
<p>Ein Textabsatz enthält <i>mehrere Inlineelemente <b>die miteinander <u>verschachtelt sind.</u></b></i>
Die Elemente sollten entgegengesetzt zum Starttag wieder geschlossen werden.</p>
<ul>
<li>Listenpunkt 1</li>
<li>Listenpunkt 2</li>
<li>Listenpunkt 3</li>
</ul>
<ol>
<li>Listenpunkt 1</li>
<li>Listenpunkt 2</li>
<li>Listenpunkt 3</li>
</ol>
<table>
<tr><th>Zeile 1 / Spalte 1</th><th>Zeile 1 / Spalte 2</th></tr>
<tr><td>Zeile 2 / Spalte 1</td><td>Zeile 2 / Spalte 2</td></tr>
<tr><td>Zeile 3 / Spalte 1</td><td>Zeile 3 / Spalte 2</td></tr>
</table>
</body>
</html>Das sollte als Vorlage genügen, um mit CSS starten zu können.
Weiter mit Einbinden