CSS für Anfänger: Erste Schritte und Stylesheet erstellen

CSS für Anfänger: Erste Schritte und Stylesheet erstellen

Möchtest Du mehr Einfluss auf das Design Deiner Website nehmen? Oder das Design durch ein Stylesheet zentral festlegen? CSS ermöglicht Dir genau das und kann zusätzlich noch die Ladezeit Deiner Website reduzieren, weil das Stylesheet nur einmal geladen werden muss.

Während HTML eine Markup-Sprache ist – das heißt, sie beschreibt die Struktur einer Website – ist CSS eine Stylesheet-Sprache; sie beschreibt den Stil, das Design der Website.

Hole dir unser kostenloses E-Book zum Thema HTML & CSS

CSS (die Abkürzung steht für „Cascading Style Sheets“) erlaubt feinere Designanpassungen als pures HTML – wie etwa Zeilenabstände, Eckenrundungen oder Schlagschatten, die in HTML nicht möglich sind. Die Schriftgröße zum Beispiel ist in HTML auf 7 Stufen eingeschränkt, während Dir in CSS keine Grenzen gesetzt sind.

Layout in HTML festlegen

Du beginnst mit einer simplen Website:

<html>

<body>

<p>Hallo Welt!</p>

</body>

</html>

Speichere den Code als HTML-Datei ab und öffne die Datei im Browser.

Die Website enthält den Satz „Hallo Welt!“, schwarz auf weißem Grund in der Schriftart „Times“. Das sind die Grundeinstellungen des Browsers, die er verwendet, wenn er keine Designanweisungen von Dir erhält.

Design anpassen mit CSS

Jetzt fügst Du Dein erstes CSS in den p-Tag ein:

<html>

<body>

<p style=”font-family: Arial; font-size: 30px; color: blue;”>Hallo Welt!</p>

</body>

</html>

Speichere Deine Änderungen und aktualisiere die Website im Browser.

Die Schrift ist nun blau, 30 Pixel hoch und in der Schriftart „Arial“. Diese 3 Änderungen  – Farbe, Größe, Schriftart – sind in CSS übersetzt color, font-size und font-family. Die Syntax für CSS sieht immer so aus:

Eigenschaft : Wert ;

Gängige CSS Eigenschaften

Mit font-family wählst Du die Schriftart aus, das ist die Eigenschaft. Bedenke dabei nur Schriften zu verwenden, die auf den meisten Computern dieser Welt installiert sind. Das sind zum Beispiel „Arial“, „Times“, oder „Courier“– aus Sicht von CSS ist das der Wert. Wenn Du die Website nur für Dich selbst baust, kannst Du natürlich jede Schrift wählen, die auf Deinem Computer installiert ist.

Der Befehl font-size stellt die Schriftgröße ein. In diesem Fall auf den Wert 30px. „px“ ist die Einheit für Pixel. Andere Einheiten sind zum Beispiel „cm“ für Zentimeter oder „pt“ für Points, was der Einheit aus Programmen wie Word entspricht.

Der dritte Befehl color färbt den Text ein. Die Farbnamen sind englisch und Dir bereits aus HTML bekannt. Alternativ kannst Du Farben auch über den Hex-Code (Blau = #0000FF) oder mit RGBA-Werten definieren: rgba(0, 0, 255, 0.5). RGBA sind die 3 Grundfarben Rot, Grün und Blau plus ein Wert für die Transparenz. Rot, Grün und Blau werden mit Zahlen zwischen 0 (= 0% von dieser Farbe) und 255 (= 100% von dieser Farbe) definiert. Die Transparenz wird über eine Kommazahl zwischen 0 und 1 ausgedrückt, wobei 0 komplett transparent bedeutet und 1 komplett undurchsichtig. Bitte beachte: Im Englischen wird der Punkt statt des Kommas verwendet. Du musst also 0.5 schreiben, nicht 0,5.

Wenn Du keine Transparenz benötigst, kannst Du diese Angabe auch weglassen und nur rgb(0, 0, 255) schreiben.

Nützliche Ressourcen im Web

In diesem Tutorial können wir unmöglich alle Eigenschaften behandeln. Deshalb empfehlen wir Dir diese 3 Hilfsmittel, wenn Du weitere Befehle kennenlernen möchtest:

1. Entwicklerkonsole

Jeder moderne Browser hat einen speziellen Modus für Entwickler. In Firefox öffnest Du diesen mit einem Rechtsklick auf irgendein Bild oder eine Textpassage in der Website und wählst im Kontextmenü den Punkt “Element untersuchen” aus. Dort kannst Du Dir für jedes Element  den zugehörigen Style ansehen und auch probeweise verändern. Der Browser kennt alle verfügbaren Eigenschaften für ein Element und hilft bei der Eingabe mit Textvervollständigung.

2. http://css3generator.com/

Der Generator erstellt bequem die gewünschten Styles. Du musst nur kopieren und einfügen.

3. https://wiki.selfhtml.org/wiki/CSS

Die Wikipedia für HTML, CSS und Javascript ist gerade für Anfänger unentbehrlich.

Gestalte Deine eigene Website

Hast Du Lust bekommen, eine eigene Website mit HTML und CSS zu gestalten? Oder möchtest Du CSS nutzen, um Deine Gestaltungsmöglichkeiten bei WordPress voll auszuschöpfen?

Finde hier das richtige Hosting-Paket

Sommer-Aktion bei STRATO

Unsere Sommer-Aktion bringt Dir alle zwei Wochen eine Welle mit einem neuen Angebot für das Paket Hosting-Basic. Aktuell bekommst Du das Paket vergünstigt mit einer zusätzlichen SSL Flat – bis zur nächsten Welle am 16.06.

Zur Sommer-Aktion


Mit einem Stylesheet trennst Du CSS und HTML, ohne die logische Verbindung zu verlieren. Die Vorteile: weniger Schreibaufwand, mehr Übersichtlichkeit und schnellere Ladezeiten.

Hinweis: Lege vorbereitend für alles, was jetzt kommt, eine neue leere Text-Datei an und speichere diese als „stylesheet.css“ im gleichen Verzeichnis ab, in dem Deine HTML-Datei liegt.

HTML und CSS verbinden

In Teil 1 dieser Beitragsserie hast Du CSS in das style-Attribut innerhalb eines HTML-Tags geschrieben. Dadurch war die Verbindung von CSS und HTML klar: „diese CSS-Anweisung gilt für diesen HTML-Tag“.

Das wird aber spätestens dann unbequem, wenn Du die gleiche Anweisung mehr als einmal benötigst. Betrachte dieses Beispiel:

<html>

<body>

<h1 style=”font-family: Arial; font-size: 30px; color: red;”>Überschrift</h1>

<p style=”font-family: Arial; font-size: 16px; color: black;”>Erster Absatz</p>

<h2 style=”font-family: Arial; font-size: 24px; color: orange;”>Zweite Überschrift</h2>

<p style=”font-family: Arial; font-size: 16px; color: black;”>Zweiter Absatz</p>

</body>

</html>

Wiederholungen vermeiden

Dieser Code enthält sehr viele überflüssige Wiederholungen; ausserdem ist er sehr unübersichtlich geworden. Der Code für die beiden Überschriften hat die gleiche „font-family“-Einstellung und der CSS-Code für beide <p>-Tags ist vollkommen identisch. Diese Erkenntnis lässt sich genauso in CSS formulieren mit sogenannten CSS-Regeln.

Eine CSS-Regel sieht immer so aus:

Selektor { Eigenschaft : Wert ; }

Ein Selektor wählt HTML-Elemente aus, für die die nachfolgenden Eigenschaften gelten sollen. Die einfachste Form von Selektoren ist der Name des HTML-Tags, in diesem Fall zum Beispiel „p“, „h1“ und „h2“.

Der Teil innerhalb der geschweiften Klammern ist exakt das, was Du bisher in das style-Attribut geschrieben hast. Du kannst einfach alles innerhalb der Anführungszeichen hinter style= kopieren und in die geschweiften Klammern einfügen.

Du kannst die CSS-Regel für die beiden <p>-Tags nun in die leere „stylesheet.css“-Datei einfügen:

p { font-family: Arial; font-size: 16px; color: black; }

Diese CSS-Regel sagt, dass für alle <p>-Tags die Eigenschaften in den Klammern gelten.

Du hast später Vorteile, wenn Du es etwas ordentlicher formatierst:

p {

  font-family: Arial;

  font-size: 16px;

  color: black;

}

Dem Browser ist es recht egal, ob Du CSS für Menschen gut lesbar schreibst oder nicht. Für spätere Änderungen oder eine Fehlersuche ist es jedoch besser, ein wenig auf die Form zu achten.

HTML aufräumen

Jetzt brauchst Du das CSS in den style-Attributen für die <p>-Tags nicht mehr. Wenn Du die gleichen Schritte für die beiden Überschriften wiederholst, sieht der HTML-Code nun wieder ganz sauber aus:

<html>

<body>

<h1>Überschrift</h1>

<p>Erster Absatz</p>

<h2>Zweite Überschrift</h2>

<p>Zweiter Absatz</p>

</body>

</html>

Die „stylesheet.css“-Datei enthält diesen Code:

p {

  font-family: Arial;

  font-size: 16px;

  color: black;

}

 

h1 {

   font-family: Arial;

   font-size: 30px;

   color: red;

}

 

h2 {

   font-family: Arial;

   font-size: 24px;

   color: orange;

}

Externes Stylesheet laden

Damit das überhaupt funktioniert und alles wieder so aussieht wie vorher, musst Du noch einen entscheidenden letzten Schritt durchführen: das Stylesheet muss geladen werden. Das passiert mit einem <link>-Tag (nicht zu verwechseln mit dem Anker <a>!).

<link> gehört in den Header des HTML-Dokuments, also zwischen <head> und </head>.

<html>

<head>

     <link rel=stylesheet href=stylesheet.css>

</head>

<body>

<h1>Überschrift</h1>

<p>Erster Absatz</p>

<h2>Zweite Überschrift</h2>

<p>Zweiter Absatz</p>

</body>

</html>

Neben der Ordnung gibt es einen weiteren großen Vorteil für diese Trennung von CSS und HTML: Du kannst weitere HTML-Seiten bauen und dort das gleiche Stylesheet laden. Da der Browser das erste Laden des Stylesheets bereits im Cache hat, sparst Du dabei sogar Ladezeit.

CSS-Selektoren sind der komplexeste Teil von CSS und gehen weit über das hinaus, was Du in diesem Tutorial gelesen hast. Wenn Du mehr wissen möchtest, empfehlen wir Dir den CSS-Bereich von SELFHTML:  https://wiki.selfhtml.org/wiki/CSS

Möchtest Du CSS für Deine eigene Website nutzen?

Zu den STRATO Hosting-Paketen

Sommer-Aktion bei STRATO

Unsere Sommer-Aktion bringt Dir alle zwei Wochen eine Welle mit einem neuen Angebot für das Paket Hosting-Basic. Aktuell bekommst Du das Paket vergünstigt mit einer zusätzlichen SSL Flat – bis zur nächsten Welle am 16.06.

Zur Sommer-Aktion
Schlagworte: , ,

Teilen

  1. Fabian Brandt sagte am

    Wie kann ich ein .css file auf dem webspace oder sftp server ablegen und dann in meinem html code auf dieses zugreifen? ich habe diverse varianten der relativen pfade und einige varianten der externen pfade ausprobiert und würde ungerne extern einen “.css” server hosten.

    Antworten
    • Vladimir Simović sagte am

      Hallo Fabian,

      wenn du die CSS-Datei Hauptverzeichnis auf FTP ablegst, dann müsstest du mit der folgenden Adresse /style.css die CSS-Datei von jeder Stelle der Website erreichen können. Wenn du die Datei im Unterordner ablegst, dann müsste es so aussehen: /name-ordner/style.css.

      Viele Grüße
      Vladimir

      Antworten
  2. C. Schneider sagte am

    Gibt es einen speziellen Grund dafür, warum sich die Webshop Themes nur via CSS anpassen lassen? Ich versuche nach wie vor herauszufinden in welchem Format das CSS im Backend übermittelt werden muss, nachdem ich den entsprechenden Wert via Konsole ausfindig gemacht habe. In meinem Falle geht es lediglich um die Hintergrundfarbe des Headers Desktop view in der elegant.css

    Wenn ich die komplette Informaton des Styles kopiere, sehe ich zwar die geänderte Farbe, aber es lässt sich nicht speichern, weil der Text zu lang ist.

    Antworten
    • Tobias Mayer sagte am

      Hallo,

      die Farben lassen sich auch ohne CSS anpassen. Wenn Du im Shop den Menüpunkt „Editor” wählst und dann auf den Pinsel unten klickst, kannst Du unter anderem den Header-Hintergrund auswählen.

      Beste Grüße

      Tobias

      Antworten
  3. elli sagte am

    Dieser Artikel hat mir gerade sehr beim lernen geholfen. Danke sehr!

    Antworten
  4. Anonymous sagte am

    Ich muss ehrlich sein…
    Ich verstehe in diesem Artiket, trotz vorkenntnisse, exakt NICHTS.

    Antworten
  5. Aren sagte am

    Vielen Dank für diesen schönen Artikel !

    Antworten

Sie können erst kommentieren, wenn Sie unseren Datenschutzbestimmungen und den Cookies zugestimmt haben. Aus Datenschutzrechtlichen Gründen dürfen wir andernfalls keine personenbezogenen Daten von Ihnen aufzeichnen.

Klicken Sie dazu einfach unten im Browser Fenster auf den blauen Button Akzeptieren. Nach dem Neuladen der Seite können Sie Ihr Kommentar schreiben.

 

Diese Webseite verwendet Cookies, um die Nutzung der Seite zu verbessern, den Erfolg von Werbemaßnahmen zu messen und interessengerechte Werbung anzuzeigen. Durch die Nutzung dieser Seite erklären Sie sich damit einverstanden. Informationen