Zum Inhalt springen

CSS-Tutorial: So einfach lernst Du Cascading Style Sheets schreiben

c126cdb3a788475c9b61c537a2104935 CSS-Tutorial: So einfach lernst Du Cascading Style Sheets schreiben

Cascading Style Sheets (CSS) ist eine Stylesheet-Sprache, die verwendet wird, um die Darstellung eines in HTML oder XML geschriebenen Dokuments zu beschreiben (einschließlich XML-Dialekte wie SVG, MathML und XHTML). CSS ist neben HTML und JavaScript ein Eckpfeiler des World Wide Web.

Hier ist ein grundlegender Überblick darüber, wie CSS funktioniert:

  • CSS-Stile werden auf Elemente in einem HTML- oder XML-Dokument angewendet.
  • Stile werden normalerweise in externen .css-Dateien gespeichert, können aber auch mit dem <style>-Element direkt in ein HTML- oder XML-Dokument eingebettet werden.
  • Um einen Stil auf ein Element anzuwenden, wird das Element mit einem CSS-Selektor ausgewählt, der angibt, auf welche(s) Element(e) der Stil angewendet werden soll.
  • Sobald ein Element ausgewählt ist, werden die Stile für dieses Element in geschweiften Klammern { } angegeben.
  • Jede Stildeklaration besteht aus einer Eigenschaft und einem Wert, die durch einen Doppelpunkt : getrennt sind, und jede Deklaration wird durch ein Semikolon ; getrennt.

Hier ist ein Beispiel für einen CSS-Stil, der auf ein <p>-Element in einem HTML-Dokument angewendet wird:

<style>
p {
  color: red;
  font-size: 14px;
  text-align: center;
}
</style>

<p>This paragraph will be red, 14px in size, and centered on the page.</p>

Ich hoffe, das hilft dir bei deinen ersten Schritten mit CSS! Es gibt noch viel mehr über CSS zu lernen, aber hier sind noch ein paar Dinge, die du vielleicht hilfreich findest:

  • Mit CSS kannst du verschiedene Stile für unterschiedliche Medientypen festlegen, z. B. für Bildschirm, Druck und Sprache. Das bedeutet, dass du Stile erstellen kannst, die auf die spezifischen Bedürfnisse jedes Medientyps zugeschnitten sind, damit deine Dokumente auf verschiedenen Geräten leichter gelesen und verwendet werden können.
  • CSS bietet außerdem leistungsstarke Werkzeuge zur Steuerung des Layouts deiner Dokumente, einschließlich der Möglichkeit, die Position, Größe und Ausrichtung von Elementen auf der Seite zu bestimmen. So kannst du komplexe, reaktionsfähige Designs erstellen, die sich an verschiedene Bildschirmgrößen und Geräte anpassen.
  • Zusätzlich zu den Standardstilen, die vom Browser bereitgestellt werden, kannst du mit CSS auch eigene Stile auf deine HTML- oder XML-Dokumente anwenden. So kannst du dein eigenes, einzigartiges Design erstellen und ein einheitliches Erscheinungsbild für deine gesamte Website schaffen.
  • Zu guter Letzt ist es wichtig zu wissen, dass CSS ständig weiterentwickelt wird und mit der Zeit neue Funktionen und Möglichkeiten hinzugefügt werden. Um über die neuesten Entwicklungen in CSS auf dem Laufenden zu bleiben, kannst du online Artikel, Blogs und Tutorials lesen und Konferenzen und Workshops besuchen.

Wenn du CSS lernen willst, ist ein guter erster Schritt, dich mit den Grundlagen von HTML vertraut zu machen. HTML (Hypertext Markup Language) ist eine Auszeichnungssprache, mit der Inhalte im Internet strukturiert und organisiert werden. Sie liefert die Bausteine für die Erstellung von Webseiten und ist die Grundlage, auf der CSS und andere Technologien aufgebaut sind.

Sobald du ein Grundverständnis von HTML hast, kannst du mit dem Erlernen von CSS beginnen, indem du die folgenden Schritte befolgst:

  1. Lies eine Einführung in CSS. Es gibt viele gute Tutorials und Anleitungen im Internet, die dir einen Überblick darüber geben, was CSS ist, wie es funktioniert und warum es wichtig ist.
  2. Experimentiere mit CSS in deinem Webbrowser. Eine der besten Möglichkeiten, CSS zu lernen, ist, es selbst auszuprobieren. Du kannst die Entwicklertools deines Webbrowsers nutzen, um kleine CSS-Code-Schnipsel zu schreiben und zu testen und zu sehen, wie sie sich auf das Aussehen deiner Webseiten auswirken.
  3. Beginne damit, CSS in deinen eigenen HTML-Dokumenten zu verwenden. Sobald du mit den Grundlagen von CSS vertraut bist, kannst du es in deinen eigenen HTML-Dokumenten verwenden, um das Aussehen und Layout deiner Webseiten zu steuern.
  4. Lerne fortgeschrittene CSS-Techniken. Je vertrauter du mit CSS wirst, desto mehr fortgeschrittene Techniken kannst du erlernen, z. B. Responsive Design, Rasterlayouts und Animationen. Es gibt viele Online-Ressourcen, die dir beim Erlernen dieser Techniken helfen, darunter Tutorials, Leitfäden und Referenzen.
  5. Lerne weiter und bleibe auf dem neuesten Stand. CSS ist eine Technologie, die sich ständig weiterentwickelt und der mit der Zeit neue Funktionen und Möglichkeiten hinzugefügt werden. Um über die neuesten Entwicklungen in CSS auf dem Laufenden zu bleiben, kannst du Artikel, Blogs und Tutorials online lesen und Konferenzen und Workshops besuchen.

Hier ist ein kurzes Tutorial, das dich in die Grundlagen von CSS einführt:

Erstelle ein neues HTML-Dokument und füge den folgenden Code hinzu: 

<!DOCTYPE html>
<html>
<head>
 <title>Mein CSS Tutorial</title>
</head>
<body>
 <h1>Willkommen zu meinem CSS-Tutorial!</h1>
 <p>In diesem Tutorial lernen wir, wie wir CSS zur Gestaltung unserer Webseiten verwenden.</p>
</body>
</html>

Speichere das HTML-Dokument als tutorial.html.

Öffne das HTML-Dokument in deinem Webbrowser. Du solltest eine Seite mit einer Überschrift und einem Textabsatz sehen.

Öffne die Entwicklerwerkzeuge in deinem Webbrowser. In den meisten Browsern kannst du das tun, indem du mit der rechten Maustaste auf die Seite klickst und „Inspizieren“ oder „Element inspizieren“ auswählst.

Geh in den Entwicklertools auf die Registerkarte „Elemente“ und suche das <h1>-Element im HTML-Code.

Um einen Stil auf das <h1>-Element anzuwenden, füge ein style-Attribut zu dem Element hinzu und gib die Stile an, die du anwenden willst. Um zum Beispiel die Überschrift rot und 24px groß zu machen, fügst du folgenden Code hinzu:

Speichere das HTML-Dokument und aktualisiere die Seite in deinem Webbrowser. Du solltest sehen, dass die Überschrift jetzt rot und größer ist.

Um ein übersichtlicheres und leichter zu pflegendes Stylesheet zu erstellen, kannst du die Stile aus dem HTML-Dokument in eine separate CSS-Datei verschieben. Dazu erstellst du eine neue Datei namens tutorial. css, und füge den folgenden Code hinzu: h1 { color: rot; font-size: 24px; }

In dem HTML-Dokument verlinkst du auf die CSS-Datei, indem du ein <link>-Element innerhalb des <head>-Elements einfügst: <link rel="stylesheet" href="tutorial.css">

Speichere die HTML- und CSS-Dateien und aktualisiere die Seite in deinem Webbrowser. Du solltest sehen, dass die Stile aus der CSS-Datei jetzt auf die Seite angewendet werden.

Dies ist nur eine sehr grundlegende Einführung in CSS. Es gibt noch viel mehr über CSS zu lernen, darunter auch fortgeschrittenere Techniken, mit denen du das Layout und das Aussehen deiner Webseiten steuern kannst. Um mehr zu lernen, kannst du Tutorials, Leitfäden und Referenzen im Internet lesen und selbst mit CSS experimentieren.

Hier sind noch ein paar weiterer Dinge, die du über CSS wissen solltest:

Mit CSS kannst du unterschiedliche Stile für verschiedene Medientypen festlegen, z. B. für Bildschirm, Druck und Sprache. Das bedeutet, dass du Stile erstellen kannst, die auf die spezifischen Bedürfnisse jedes Medientyps zugeschnitten sind, sodass deine Dokumente auf einer Vielzahl von Geräten leichter gelesen und verwendet werden können.

CSS bietet außerdem leistungsstarke Werkzeuge zur Steuerung des Layouts deiner Dokumente, einschließlich der Möglichkeit, die Position, Größe und Ausrichtung von Elementen auf der Seite zu bestimmen. So kannst du komplexe, responsive Designs erstellen, die sich an verschiedene Bildschirmgrößen und Geräte anpassen.

Hier sind ein paar Beispiele dafür, wie du CSS zur Steuerung des Layouts deiner Seiten verwenden kannst:

  • Mit der Eigenschaft display kannst du steuern, wie ein Element auf der Seite angezeigt wird. Du kannst zum Beispiel den Wert display: block verwenden, damit ein Element in einer eigenen Zeile angezeigt wird und die gesamte Breite seines Containers einnimmt. Oder du kannst den Wert display: inline verwenden, damit ein Element inline mit anderen Elementen angezeigt wird und nur so viel Platz wie nötig einnimmt.
  • Mit der float-Eigenschaft kannst du ein Element nach links oder rechts verschieben, so dass andere Elemente es umschließen. Dies kann nützlich sein, um Spalten oder Seitenleisten zu erstellen oder um ein Element an anderen Elementen auf der Seite auszurichten.
  • Mit der Eigenschaft position kannst du die Position eines Elements auf der Seite bestimmen. Du kannst zum Beispiel den Wert position: absolute verwenden, um ein Element relativ zu seinem übergeordneten Container zu positionieren, oder den Wert position: fixed, um ein Element relativ zum Viewport (dem sichtbaren Bereich der Webseite) zu positionieren.
  • Mit den Eigenschaften width und height kannst du die Größe eines Elements angeben. Du kannst die Größe in Pixeln angeben oder relative Einheiten wie Prozentwerte oder em-Einheiten verwenden, um die Elementgröße responsiv zu machen und an unterschiedliche Bildschirmgrößen anzupassen.
  • Mit den Eigenschaften margin und padding kannst du die Abstände um ein Element herum festlegen. Du kannst diese Eigenschaften verwenden, um Platz zwischen Elementen oder innerhalb eines Elements um dessen Inhalt herum zu schaffen.

Dies sind nur ein paar Beispiele dafür, wie du mit CSS das Layout deiner Dokumente steuern kannst. Um mehr zu erfahren, kannst du Tutorials, Anleitungen und Referenzen im Internet lesen und mit diesen Eigenschaften auf deinen eigenen Webseiten experimentieren.

Zusätzlich zu den Standardstilen, die vom Browser bereitgestellt werden, kannst du mit CSS auch eigene Stile auf deine HTML- oder XML-Dokumente anwenden. So kannst du dein eigenes, einzigartiges Design erstellen und ein einheitliches Erscheinungsbild für deine gesamte Website schaffen.

Das Flexible Box Layout oder „flexbox“ ist ein CSS-Layoutmodus, der eine bequeme und leistungsstarke Möglichkeit bietet, Elemente in einer eindimensionalen Zeile oder Spalte anzuordnen. Es ist besonders nützlich für die Erstellung reaktionsfähiger und flexibler Layouts, die sich an unterschiedliche Bildschirmgrößen und Geräte anpassen.

Hier sind einige der wichtigsten Merkmale des Flexbox-Layoutmodus:

  • Die Eigenschaft display wird auf flex gesetzt, um einen flex-Container zu erstellen, der eine Reihe von flex-Elementen enthält.
  • Die Eigenschaft flex-direction gibt die Richtung an, in der die flex-Elemente angeordnet werden, entweder in einer Reihe (von links nach rechts) oder in einer Spalte (von oben nach unten).
  • Die Eigenschaft justify-content richtet die Flexelemente entlang der Hauptachse aus (horizontal für Zeilen, vertikal für Spalten).
  • Die Eigenschaft align-items richtet die Flexelemente entlang der Querachse aus (vertikal für Zeilen, horizontal für Spalten).
  • Die Eigenschaften flex-grow und flex-shrink bestimmen, wie die flexiblen Elemente wachsen oder schrumpfen, um sich dem verfügbaren Platz im Container anzupassen.
  • Die Eigenschaft flex-basis gibt die Standardgröße eines flex-Elements an, bevor es vergrößert oder verkleinert wird.

Hier ist ein einfaches Beispiel, das zeigt, wie man den Flexbox-Layoutmodus verwendet, um ein reaktionsfähiges Raster von Elementen zu erstellen:

<style>
  .container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 200px;
  }
</style>

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
</div>

In diesem Beispiel wird ein .container-Element erstellt, bei dem es sich um einen Flex-Container mit der Flex-Richtung row handelt (d. h. die Elemente werden in einer Reihe von links nach rechts angeordnet). Die Eigenschaft justify-content wird auf space-between gesetzt, wodurch die Elemente entlang der Hauptachse mit gleichem Abstand zueinander ausgerichtet werden.

Die .item-Elemente sind Flex-Elemente und erhalten die Werte flex-grow, flex-shrink und flex-basis von 1, 1 bzw. 200px. Das bedeutet, dass die Elemente wachsen oder schrumpfen, um sich dem verfügbaren Platz im Container anzupassen, mit einer Standardgröße von 200 Pixeln.

Wenn dieser Code in einem Webbrowser ausgeführt wird, wird eine Reihe von Elementen erstellt, die gleichmäßig beabstandet sind und eine Standardgröße von 200 Pixeln haben. Wenn die Größe des Browserfensters geändert wird, wachsen oder schrumpfen die Elemente, um sich dem verfügbaren Platz anzupassen, wobei die gleichen relativen Größen und Abstände beibehalten werden.

Dies ist nur ein sehr einfaches Beispiel dafür, wie der Flexbox-Layoutmodus verwendet werden kann. Es gibt noch viele weitere Eigenschaften und Möglichkeiten für die Erstellung flexibler und reaktionsfähiger Layouts mit flexbox.

Kai Spriestersbach
Letzte Artikel von Kai Spriestersbach (Alle anzeigen)

Weitere Beiträge: