Jetzt überall auch offline lernen, mit der neuen learnity-App

Laden im App Store
Jetzt bei Google Play

HTML und CSS lernen

HTML steht für "Hypertext Markup Language" und ist eine sog. Auszeichnungssprache, die zur Erstellung digitaler Dokumente mit Bildern, Formatierungen und Verlinkungen (Hyperlinks) dient. HTML und CSS sind heute die Grundlage für Internetseiten im World Wide Web. CSS (Cascading Style Sheets) ist eine Stylesheet Sprache, die zusammen mit HTML für das einheitliche Layout von Webseiten genutzt wird.

HTML & CSS - Die Video Tutorials auf learnity

Du hast Dich schon immer gefragt, wie Du mithilfe von CSS und HTML eine Webseite erstellst? Dann schau Dir auf learnity das HTML CSS Tutorial an, das Deinem Lernniveau entspricht. Egal, ob Du Einsteiger, Fortgeschrittener oder Profi in CSS oder HTML bist: Hier findest Du das HTML CSS Tutorial, das Dich beim Erstellen oder Verschönern Deiner Website mit HTML und CSS effektiv anleitet. 

CSS und HTML lernen auf learnity – das bedeutet: Du suchst Dir Dein HTML CSS Tutorial aus und kannst den gebuchten Kurs - egal ob kostenlos oder kostenpflichtig – jederzeit anschauen. Außerdem stehen für Dich Kursbegleitmaterialien wie z.B. zusammenfassende Handouts zu den jeweiligen Kurskapiteln der HTML CSS Tutorials bereit. So kannst Du online z.B. auf unseren Kurs zu den wichtigsten CSS Grundlagen zugreifen und Dir dazugehörigen Wissensmaterialien zum Offline-Lernen einfach ausdrucken – und das wo und wann Du möchtest. Bei den learnity HTML & CSS Tutorials gibst Du das Lerntempo vor. Nutze die Kommentarfunktion, wenn Du beim Lernen Schwierigkeiten mit Lerninhalten in den Videos hast. So kannst Du alle auftretenden Fragen zu Kursinhalten im jeweiligen HTML & CSS Tutorial direkt ansprechen und noch effektiver lernen. 

CSS und HTML lernen gehören dabei zusammen: HTML ist die Auszeichnungssprache, mit der Du Deiner Webseite eine Struktur verleihst. Der Internetbrowser erkennt mithilfe von HTML die Struktur Deiner Website und weiß, wie er sie darstellen soll – zumindest dann, wenn Du die richtigen Anweisungen in HTML gibst. Egal, ob Headlines hervorgehoben angezeigt werden sollen, Inhalte als Liste erscheinen sollen oder Du Texte durch Absätze gliedern möchtest: Teile dem Browser über sogenannte Tags mit, wie er den HTML-Code interpretieren soll. Da HTML-Seiten rein statisch sind, musst Du für dynamische Inhalte wie interaktive Webanwendungen z.B. PHP als Programmiersprache nutzen.

Das eigentliche Design der Website legst Du mithilfe von CSS fest: Über die Cascading Style Sheets formatierst Du HTML und XHTML. Du möchtest Schriften für bestimmte Bereiche definieren, Elemente positionieren oder Abstände auf der Seite festlegen? Dann helfen Dir bereits CSS Grundlagen, Deine Website zu gestalten. CSS ermöglicht Dir zudem das zentrale Anlegen von Formaten - entweder direkt im Kopfbereich Deiner HTML-Seite oder in einer gesonderten Datei. Diese Formate gelten dann für Deine gesamte Website bzw. Dein Projekt. So kannst Du in dieser CSS-Datei alle Formatierungen erfassen und diese zentral bearbeiten. Das Ergebnis: ein einheitlicher Look Deiner HTML-Seiten. 

Für neue Gestaltungsmöglichkeiten wird CSS laufend weiterentwickelt. CSS lernen bedeutet also auch: Neue Befehle lernen und das Gestalten immer neu entdecken. 

Übrigens: Die verschiedenen CSS-Versionen werden in den einzelnen Browsern unterschiedlich angezeigt. Damit sämtliche Browser Deine Seite immer korrekt darstellen, solltest Du Dein CSS von einem Validator regelmäßig überprüfen lassen. Online kannst Du das am besten mit einem CSS Validation Service.

CSS Stylesheets – was Du zum CSS Style wissen musst

CSS Stylesheets sind das Mittel, um der definierten Webseitenstruktur in HTML den gewünschten CSS Style mitzugeben. Ohne CSS ist HTML lediglich eine Textstrukturierung. Erst mit CSS kannst Du Deine Webseite wirklich gestalten. Zum CSS Style gehören die Eigenschaft und der Wert: Du möchtest z.B. die Farbe einer Schrift ändern? Dann gebe „color“ als Eigenschaft und mit der gewünschten Farbe den Wert zur jeweiligen Eigenschaft an. Neben der Farbe können auch andere Einheiten oder Schlüsselbegriffe den CSS Style festlegen. So kann der Browser erkennen, welches Format für Headlines, Texte oder andere Elemente gelten soll.     

Du möchtest mehr zum Arbeiten mit CSS Stylesheets erfahren? Dann nutze die CSS Video-Tutorials auf learnity, um Dich mit den grundlegenden CSS Styles vertraut zu machen und Deine Website im Design anzupassen. Lerne z.B. im Kurs „Einführung in die Cascading Stylesheets“, wie Du CSS Style in HTML einbindest. Falls Du mehr über CSS lernen und Dir neue CSS Styles aneignen möchtest, findest Du auf der Internetseite des Word Wide Web Consortiums weitere nützliche Informationen rund um das Thema CSS.

HTML, Links, CSS – wie passt das zusammen?  

HTML, Link und CSS – zusammen sind sie stark! Links sollen dem Betrachter auf Deiner Website ins Auge fallen und natürlich zu einer anderen Stelle außerhalb oder innerhalb Deiner Seite verlinken. Verwende dafür das a-Element, den sogenannten Anker, und weise einem Link CSS in Form bestimmte Eigenschaften bzw. Zustände zu. Dies gelingt Dir über Pseudo-Klassen. Ordne einem Link CSS-Code über die Pseudo-Klasse link zu, um einen einfachen Hyperlink zu erzeugen. 

Mithilfe der Pseudo-Klassen visited, active, hover und focus kannst Du dem Link CSS bzw. weitere Zustände zuweisen. Einen besuchten Link definierst Du über die Eigenschaft “visited“. Ein aktiver Link wird über die Eigenschaft “active“ formatiert. Soll sich der Link beim Mouseover verändern, weist Du diesen Effekt über die Eigenschaft “hover“ zu. Über weitere Eigenschaften wie color oder text-decoration kannst Du Deine CSS Links individuell formatieren und ihnen Farben zuordnen oder den Link unterstreichen. Lerne jetzt mehr zum Thema HTML, CSS & Links in unserer Einführung in CSS & HTML

CSS Menu – wie kannst Du mit CSS ein Navigationsmenü erstellen?

Aller Anfang ist schwer, sagt man. Dabei verfügst Du in CSS über verschiedene Möglichkeiten, ein CSS Menu anzulegen: Ein klassisches Menü kannst Du ganz einfach über Links erstellen, die Du über Zeilenumbrüche vertikal ausrichtest. Formatierst Du das CSS Menu über display:block, wirken die block-formatierten Links eleganter – auch dank des einheitlichen Mouseover-Effekts über die gesamte Zeile. Die wohl beste Grundlage für ein CSS Menu bietet Dir eine Aufzählungsliste, die der Struktur einer Navigation gleicht. Sortiere die Navigationspunkte einfach als Liste innerhalb einer unsortierten Liste ein. 

Das klassische CSS Menu mit Drop-Down-Funktionalität erstellst Du über verschachtelte HTML-Listen. Blende mithilfe des Selektors nav ul ul zuerst die Listen der unteren Ebene aus. Der Selektor nav ul li:hover ul ermöglicht, dass die Menüpunkte beim Mouseover wieder erscheinen und den Drop-Down-Effekt “auslösen“. Die detaillierten CSS-Anweisungen zum Erstellen eines CSS Menus kannst Du in diesem HTML & CSS3 Tutorial für Einsteiger nachvollziehen.

CSS inside HTML – wie HTML und CSS Code zusammenwirken 

CSS Code ohne HTML Code – das ist undenkbar. Denn der HTML-Code gibt die inhaltliche Struktur der HTML-Datei vor, die der CSS Code formatiert. Beide Informationen ergänzen sich sozusagen. Du kannst also CSS nicht in HTML umwandeln oder umgekehrt. Stattdessen bindest Du die Stylesheets direkt im HTML-Code ein oder nutzt dafür eine eigene CSS-Datei. 

CSS ist dabei nicht gleich CSS: CSS3 bietet Dir im Vergleich zu CSS neue Anweisungen der Formatierung. Neben einfacheren Farbmodellen kannst Du mit CSS3 Farbverläufe und Muster kreieren. Du möchtest die Transparenz von Elementen bzw. deren Deckkraft ändern? Dann hilft Dir die Anweisung opacity im neuen CSS3 dabei. Aber auch Schatten für Text oder Boxen, abgerundete Rahmen und mehrspaltige Layouts sind mit dem CSS Code umsetzbar. 

Für Animationen und Transformationen, das Einbinden mehrerer Hintergrundgrafiken oder das Einsetzen einzigartiger Webschriften ist CSS heute ebenfalls zu haben. Damit Deine Website auch auf Smartphone und Tablet korrekt angezeigt wird, kannst Du mit CSS Code in CSS3 auch responsives Webdesign gestalten. 

Du möchtest den Zusammenhang zwischen CSS und HTML verstehen – Stichwort: HTML to CSS? Dann lerne das Einbinden von CSS in HTML-Dokumenten am besten direkt hier – auf learnity.com!

Onclick-Effekte erzeugen – so geht‘s!

Bildelemente sind gut und schön, aber noch besser sind Bildelemente mit CSS Click Effekt. Über das sogenannte Eventhandler-Attribut kannst Du bestimmte Elemente mit Scriptsprachen wie Javascript verbinden. Möchtest Du also, dass sich ein Element in CSS per Click verändert, nutzt Du dafür die Anweisung onclick. Dieser Ereignisbehandler darf übrigens in den meisten Elementen verwendet werden. 

So erstellst Du einen CSS Header

Lege mithilfe des header-Elements einen CSS Header an. Den CSS Header richtest Du über die Eigenschaften top:0px, position: fixed und position:absolute am oberen Browserrand und mit fester Positionierung aus. Innerhalb des header-Elements kannst Du dem Header auch weitere Eigenschaften zuweisen. In den Video-Tutorials auf learnity lernst Du mehr über Header und Co. 

Per CSS Style Guide den Stil für Deine Website festlegen

Du kannst Dir und z.B. Webdesignern die Arbeit an Deiner Website erleichtern, in dem Du einen CSS Style Guide anlegst. Dieser CSS Guide sagt aus, welche Eigenschaften die einzelnen CSS Elemente besitzen sollen. Die CSS Guidelines dienen gleichzeitig dem Festlegen eines konsistenten Designs, das sich auf sämtliche Kommunikationsmittel übertragen lässt. 

CSS – Cascading Stylesheets bestens dokumentiert 

Deine Website sieht immer nur so gut aus, wie Deine Kenntnisse in CSS es zulassen. Mit einer umfassenden CSS Documentation bleibst Du immer auf dem aktuellen Stand im Bereich CSS. Für dokumentierte Informationen in Form von Video-Tutorials empfehlen wir Dir die CSS-Lernvideos auf learnity. Schau einfach direkt rein!