Coco Chanel sagte einmal: „Mode verändert sich, aber Stil bleibt bestehen.“
Während Coco hauptsächlich über die Kleidung sprach, die wir in unseren Schränken aufhängen, würde ich auch sagen, dass Stil mehr ist als nur Mode.
Haben Sie zum Beispiel jemals eine Website besucht und gedacht: „Wow, das ist eine gut aussehende Website“? Die Chancen stehen gut, dass diese stilvolle Website dank CSS erstellt wurde.
Was ist CSS?
CSS steht für Cascading Style Sheets und beschreibt, wie HTML-Elemente auf dem Bildschirm angezeigt werden sollen, da es das Layout verschiedener Webseiten gleichzeitig steuert.
Sie könnten das Gefühl haben, dass CSS und Programmierung entmutigend sein können, besonders wenn Sie sich im Allgemeinen mit dem Erstellen von Websites beschäftigen. Glauben Sie mir, das dachte ich auch einmal. Lesen Sie weiter und ich wette, Sie werden bereit sein, Ihrer Website ernsthaften Stil zu verleihen, bevor Sie es wissen.
Interessiert daran, etwas Spezifisches über CSS zu lernen? Springen Sie vor zu:
Was ist CSS?
Um zu verstehen, was CSS ist, ist es am besten zu erklären, wie CSS und HTML zusammen verwendet werden. HTML wurde erstellt, um den Inhalt von Webseiten zu beschreiben, wie Überschriften und Absätze, und das Einbetten von Bildern und Videos zu ermöglichen. Andererseits gibt CSS den Stil des Dokuments an, der Seitenlayouts, Farben und Schriftarten umfasst.
Wenn Sie Ihre Website wie ein Haus betrachten, das Sie bauen, ist HTML die Trockenbauwand und CSS ist die helle und lebendige Farbe, die Sie auf unsere Wände auftragen, um etwas Flair hinzuzufügen.
Wie funktioniert CSS?
CSS interagiert mit den HTML-Elementen auf Webseiten, um sie auf eine bestimmte Weise aussehen zu lassen. Wenn Sie beispielsweise einen Absatz fett und in der Farbe Lila gestalten möchten, würden Sie es so schreiben:
p {color:purple; font-weight:bold;}
Das p in diesem Fall wird mit dem <p> HTML-Code übereinstimmen und es so ändern, dass es fett und lila erscheint.
Wie HTML wird CSS in einfachem, reinem Text entweder in einem Texteditor oder einem Word-Dokument auf einem Computer geschrieben. Sie können diesen Code zu Ihren HTML-Seiten hinzufügen, indem Sie entweder externes, internes oder Inline-CSS verwenden.
Extern
Externes CSS wird als .css-Dateien gespeichert und kann verwendet werden, um das Erscheinungsbild der gesamten Website mit nur einer Datei zu bestimmen. Um es zu verwenden, müssen Ihre .html-Dateien einen Header-Bereich enthalten, der auf das externe Stylesheet verweist. Es würde so aussehen:
<head>
<link rel=”stylesheet” type=”text/css” href=thestyleofmysite.css”>
</head>
In diesem Fall ist thestyleofmysite.css das externe Stylesheet. Extern ist die effiziente Methode zur Implementierung von CSS auf einer Website, außerdem ist es einfach, den Stil zu verfolgen und zu implementieren.
Intern
Intern sind CSS-Anweisungen, die direkt in den Header der .html-Seite geschrieben werden. Sie möchten diesen Weg gehen, wenn eine Seite auf Ihrer Website ein eigenes, einzigartiges Aussehen haben soll, das sich vom Rest Ihrer Website unterscheidet.
<head>
<style>
body {background-color:orange;}
p {font-size:24px; color:white;}
</style>
</head>
Diese Seite wird einen orangefarbenen Hintergrund mit Absätzen in 24 Punkt und weißer Schrift haben.
Inline
Wenn Sie Inline verwenden, werden CSS-Snippets direkt in den HTML-Code geschrieben und nur auf eine einzelne Codezeile angewendet.
<h2 style=”font-size:22px;color:green;”>Dies ist eine Überschrift.</h2>
Diese Codezeile macht eine bestimmte Überschrift auf einer .html-Seite grün und in 22 Punkt Schriftgröße.
| Verwandt: Schauen Sie sich diese Codierungstipps für Anfänger an! |
Möchten Sie mehr über Website-Builder-Software erfahren? Erkunden Sie Website-Builder Produkte.
CSS-Syntax
Der eigentliche Code von CSS wird CSS-Syntax genannt und besteht aus einem Regelset, das aus einem Selektor und einem Deklarationsblock besteht.
Ein Selektor zeigt auf das HTML-Element, das Sie stylen möchten. Im obigen Beispiel ist es das h1.
Der Deklarationsblock enthält eine oder mehrere Deklarationen, die durch Semikolons getrennt sind. Innerhalb des Blocks befinden sich eine Eigenschaft und ein Wert, die durch einen Doppelpunkt getrennt sind. Diese Blöcke sind von geschweiften Klammern umgeben.
Eine Eigenschaft beschreibt Änderungen wie die Schriftgröße oder Farbe. Der Wert ist die Einstellung für die Eigenschaft, also die spezifische Schriftgröße und Farbe.
Die obige CSS-Syntax wird Ihren H1-Titel auf die Farbe Rot und eine Schriftgröße von 14 setzen.
Es gibt auch Syntaxen, die Gruppierungsselektoren genannt werden. Sie würden einen Gruppenselektor verwenden, wenn Sie mehrere Elemente haben, die denselben Stil haben sollen. Wenn Sie also möchten, dass alle Ihre Überschriften nach Ihrem H1 zentriert, blau und in 12 Punkt Schriftgröße sind, würden Sie einen Gruppenselektor verwenden, der so aussieht:
h2, h3, h4 {text-align:center; color:blue; font-size:12px;}
Häufige CSS-Eigenschaften
Es gibt eine lange Liste von CSS-Eigenschaften, die Sie verwenden können, um Webseiten etwas Flair zu verleihen. Unten sind die häufigen CSS-Eigenschaften, die Sie immer wieder verwenden werden.
Fügen Sie mit CSS etwas Stil hinzu
Stellen Sie sicher, dass Ihre Website alles andere als einfach ist, wenn Sie CSS zu ihrem Format hinzufügen. Vom Ändern der Schriftfarbe bis zum Hinzufügen eines Rahmens können Sie Ihre Webseite mit CSS aus der Masse hervorheben. Scheuen Sie sich nicht, die Ärmel hochzukrempeln und direkt einzutauchen, um zu sehen, worüber Coco Chanel sprach.
Jetzt, da Sie einige Fragen zu CSS beantwortet haben, beantworten Sie andere Fragen, die Sie zum Erstellen von Websites haben, wie was ist JavaScript und warum Sie programmieren lernen sollten.
Mara Calvello
Mara Calvello is a Content and Communications Manager at G2. She received her Bachelor of Arts degree from Elmhurst College (now Elmhurst University). Mara writes content highlighting G2 newsroom events and customer marketing case studies, while also focusing on social media and communications for G2. She previously wrote content to support our G2 Tea newsletter, as well as categories on artificial intelligence, natural language understanding (NLU), AI code generation, synthetic data, and more. In her spare time, she's out exploring with her rescue dog Zeke or enjoying a good book.
