Lernen Sie CSS in 5 Minuten - Ein Tutorial für Anfänger

Ein kurzes Tutorial zur Designsprache des Webs.

CSS (Cascading Style Sheets) macht Webseiten gut und präsentabel. Es ist ein wesentlicher Bestandteil der modernen Webentwicklung und ein Muss für jeden Webdesigner und -entwickler.

In diesem Artikel werde ich Ihnen eine kurze Einführung geben, um Ihnen den Einstieg in CSS zu erleichtern.

Wir haben auch einen kostenlosen CSS-Kurs in voller Länge auf Scrimba gestartet. Klicken Sie hier, um es zu überprüfen.

Ich gehe davon aus, dass Sie ein grundlegendes Verständnis von HTML haben, aber ansonsten gibt es keine Voraussetzungen für dieses Tutorial.

Loslegen

Beginnen wir mit dem Lernen, wie wir CSS in unsere Projekte einbeziehen können. Es gibt normalerweise drei Möglichkeiten, wie wir das tun.

1. Inline-CSS

Zunächst können wir CSS direkt in unsere HTML-Elemente aufnehmen. Dazu verwenden wir das styleAttribut und stellen ihm dann Eigenschaften zur Verfügung.

Hello world!

Hier geben wir ihm die Eigenschaft von colorund setzen den Wert auf blue, was zu Folgendem führt:

styleWenn wir möchten, können wir auch mehrere Eigenschaften innerhalb des Tags festlegen . Ich möchte diesen Weg jedoch nicht fortsetzen, da die Dinge unordentlich werden, wenn unser HTML-Code mit viel CSS überfüllt ist.

Aus diesem Grund wurde die zweite Methode zur Einbeziehung von CSS eingeführt.

2. Internes CSS

Die andere Möglichkeit, CSS einzuschließen, besteht darin, das styleElement im headAbschnitt des HTML-Dokuments zu verwenden. Dies wird als internes Styling bezeichnet.

  h1 { color: blue; }   

Im Stilelement können wir unseren HTML-Elementen das Styling geben, indem wir die Elemente auswählen und Styling-Attribute bereitstellen. Genau wie wir die colorEigenschaft auf das h1obige Element angewendet haben .

3. Externes CSS

Die dritte und am meisten empfohlene Möglichkeit, CSS einzuschließen, ist die Verwendung eines externen Stylesheets. Wir erstellen ein Stylesheet mit einer .cssErweiterung und fügen dessen Link wie folgt in das HTML-Dokument ein:

Im obigen Code haben wir den Link der style.cssDatei mit dem linkElement eingefügt. Wir schreiben dann alle unsere CSS in ein separates Stylesheet, das style.cssso genannt wird , dass es leicht zu verwalten ist.

h1 { color: blue; } 

Dieses Stylesheet kann auch in andere HTMLDateien importiert werden. Dies ist ideal für die Wiederverwendbarkeit.

CSS-Selektoren

Wie bereits erwähnt, ist CSS eine Designsprache, mit der HTML-Elemente formatiert werden. Und um Elemente zu stylen, müssen Sie sie zuerst auswählen. Sie haben bereits einen Einblick in die Funktionsweise erhalten, aber lassen Sie uns etwas tiefer in die CSS-Selektoren eintauchen und drei verschiedene Möglichkeiten betrachten, wie Sie HTML-Elemente auswählen können.

1. Element

Die erste Möglichkeit, ein HTML-Element auszuwählen, besteht darin, einfach den Namen zu verwenden, wie wir es oben getan haben. Mal sehen, wie es funktioniert:

h1 { font-size: 20px; } p { color: green; } div { margin: 10px; } 

Das obige Beispiel ist fast selbsterklärend. Wir wählen verschiedene Elemente wie h1, p, divund ihnen verschiedene Stilattribute zu geben. Das font-sizesteuert die Größe des Texts, colorlegt die Textfarbe fest und marginfügt Abstände um das Element hinzu.

2. Klasse

Eine andere Möglichkeit zur Auswahl von HTML-Elementen ist die Verwendung des Klassenattributs. In HTML können wir unseren Elementen verschiedene Klassen zuweisen. Jedes Element kann mehrere Klassen haben, und jede Klasse kann auch auf mehrere Elemente angewendet werden.

Lassen Sie es uns in Aktion sehen:

This is heading

 .container { margin: 10px; } 

Im obigen Code haben wir containerdem div-Element die Klasse von zugewiesen . Im Stylesheet wählen wir unsere Klasse im .classNameFormat aus und geben ihr einen 10pxRand.

3. ID

Wie Klassen können wir auch IDs verwenden, um HTML-Elemente auszuwählen und sie zu stylen. Der einzige Unterschied zwischen Klasse und ID besteht darin, dass eine ID nur einem HTML-Element zugewiesen werden kann.

This is a paragraph

 #para1 { color: green; font-size: 16px; } 

Das obige Beispiel zeigt, wie wir dem Absatzelement eine ID zuweisen und später den ID-Selektor im Stylesheet verwenden, um den Absatz auszuwählen und den Stil darauf anzuwenden.

Schriftarten & Farben

CSS provides us with literally hundreds of options for playing around with fonts and colors and making our HTML elements look pretty. We can choose from two types of font family names:

1. Generic Family: a group of font families with a similar look (like ‘Serif’ or ‘Monospace’)

2. Font Family: a specific font family (like ‘Times New Roman’ or ‘Arial’)

For colors, we can use predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.

CSS is Coooooool!!!!

.container { width: 500px; height: 100px; background-color: lightcyan; text-align: center; } .heading1 { font-family: 'Courier New'; color: tomato; } 

As you can see in the above example, we have a div element with the class of container. Inside this div, there is an h1 tag with some text inside it.

In the stylesheet, we select the container class and set its width, height, background-color, and text-align.

Finally, we select the .heading1 class — which is applied to the h1 tag — and give it the attributes of font-family and color.

Conclusion

You might feel a bit overwhelmed by all this information, but don’t worry.

Just check out our free Intro to CSS course on Scrimba and you’ll be a web design ninja in less than an hour.

Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if want to learn to build modern website on a professional level.