Grundlagen der Webprogrammierung: Basiswissen

CSS: Formatvorlagen für Webseiten

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Während sich HTML ausschließlich um den Inhalt und die Struktur einer Website kümmert, sorgen Cascading Style Sheets (CSS) für die Darstellung von Formen, Farben und das Layout. Kurz, mit CSS kontrollieren Sie das Aussehen Ihres Webauftritts.

Transkript

Mit HTML werden Inhalte und Strukturen einer Webseite definiert. Nicht das Layout, oder das Aussehen einer Seite, also nicht die Präsentation einer Seite. Dafür wird CSS eingesetzt. Mit CSS kontrollieren wir das Aussehen einer Seite oder auch einer kompletten Website. Widmen wir uns nun also einmal dem Zusammenspiel von HTML und CSS. Wie gesagt, HTML ist heute eine reine Struktursprache. Das war nicht immer so. In früheren Versionen wurde das konkrete Aussehen einer Seite, also zum Beispiel, welche Schriften werden benutzt, welche Farben hat ein Text, hat eine Tabelle einen Rand, ist ein Text gefettet oder kursiviert, und ähnliches mehr, direkt in HTML eingegeben. Das heißt, in früheren Versionen wurden Struktur und Präsentationen in HTML gemeinsam definiert. In HTML 5 ist damit endgültig Schluss. Diese Präsentationselemente innerhalb von HTML wurden in HTML 5 endgültig fallen gelassen, oder bekamen eine andere Funktion. Heute ist HTML eine Sprache, in der wir ausschließlich die Struktur und natürlich auch den Inhalt einer Seite angegeben. Was aber ist denn nun mit dem Aussehen einer Seite, mit seiner Presentation, mit dem Layout, mit den Farben, mit den Schriften und ähnlichen mehr? Nun, dafür gibt es CSS. CSS steht für Cascading Style Sheets für kaskadierende Stylevorlagen. Was es damit auf sich hat, erfahren wir gleich. In CSS werden gewissermaßen Formatvorlagen für Webseiten definiert, die das konkrete Aussehen und das Layout einer Seite steuern und bestimmen. Was hat es nun mit dieser Kaskade im Namen von CSS auf sich? Die Kaskade bezieht sich darauf, dass Teil-Sheets auf unterschiedlichen Ebenen definiert werden, und sich gegenseitig überschreiben können, sobald Konflikte auftauchen. CSS Anweisungen lassen sich auf verschiedene Weise mit HTML kombinieren. Wir können sie einmal als externe Datei einbinden. Solche Daten können wir für verschiedene Webseiten benutzen, das heißt wir definieren einmal Stylevorlagen oder Formatvorlagen in einer externen Datei, und binden das in verschiedene, beliebig viele Webseiten ein, und haben somit automatisch in allen diesen Webseiten das gleiche Format. Sie können hier aber auch einmal für ein Dokument im "head" definieren, dann gelten die Style other Styleangaben ausschließlich für dieses eine Dokument. Oder aber Sie können sie auch noch direkt an einem Element angeben, dann gilt die Style Angabe nur für dieses eine einzige Element. Je nachdem, wo eine CSS Anweisung steht, können sie sich gegenseitig überschreiben, sobald Konflikte auftauchen. Diese Kaskade, oder die Kaskadierung von Stylevorlagen erlaubt es, fein aufeinander abgestimmte Styleangaben, mit wenig Aufwand zu kombinieren. Bevor wir uns nun etwas detaillierter mit CSS beschäftigen, schauen wir uns einmal am kleinen, praktischen Beispiel an, was CSS eigentlich macht. Hier habe ich Ihnen einmal den Quelltext meiner Webseite geladen. Sie sehen also normales reines HTML, recht übersichtlich, recht einfach strukturiert, mit den bekannten Elementen, die wir gerade schon mal hatten, also mit "doctype", mit "body" oder gleichen mehr. Wir haben hier ein Listenelement mit verschiedenen Listenpunkten, wir haben hier unsere Absätze und hier eine Headline h1, hier auch eine Headline h1. Das Ganze in verschiedenen "div" Containern, an den verschiedenen Absätzen eingebaut. Soweit wir sehen, da ganz einfach, simples, einfaches HTML. Wenn wir dieses HTML nun ohne Stylevorlagen im Browser aufrufen, dann sieht das so aus. Sie sehen also, es sieht nicht so aus, wie eine Webseite, eher eine Webseite von 1995 vielleicht. Damals sahen die so aus. Wir haben also hier einfach die normale Times Roman, die Standard-Schrift des Browsers. Wir haben ein paar Absätze. Aber so nackt und roh das hier auch aussieht, genau dafür ist HTML da, und HTML macht genau das, was HTML machen soll, es strukturiert den Inhalt der Seite. Das heißt, wir haben hier Absätze, wir haben hier Listenelemente, wir haben oben ein Bild, wir haben Headlines und der gleichen mehr. Gehen wir nochmal zurück in unseren HTML Code, dann werden Sie feststellen, dass hier oben eine Zeile steht, über die ein Stylesheet eingebunden wird, und in diesem Stylesheet wird definiert, wie die Seite eigentlich aussehen soll. Dieses HTML Dokument definiert ausschließlich die Struktur. Schauen wir uns an, was passiert, wenn wir dieses Stylesheet jetzt aktivieren im Browser. Also hier noch einmal die Webseite ohne Stylesheet. Jetzt aktiviere ich mal hier unter Ansicht Format Standardformat, das heißt, der Browser lädt jetzt das CSS-File nach, und wendet es dann auf dem Text an, und das Ergebnis sieht dann so aus. Sie sehen also aus diesem nackten Strukturdokument wurde jetzt ein gestyltes Dokument mit verschiedenen Schriften. Die Liste ist plötzlich nicht mehr vertikal, sie ist jetzt horizontal angeordnet. Diese Menüpunkte sind in einer anderen Schriften etwas größer. Ein anderer Font wird benutzt. Der Bereich für den Kontakt. Also hier dieser Absatz auf der linken Seite bekommt eine eigene Spalte. Diese Liste hier unten hat nicht mehr, wie vorhin in den nackten HTML, einen runden Punkt, sie hat jetzt ein kleines Quadrat davor. Das hier unten hat eine andere Farbe, ist ein etwas kleiner, ist nach rechts ausgerückt. Das Ganze hat einen Rand bekommen, hat eine Hintergrundfarbe und der gleichen mehr. All das wird durch das CSS Dokument gesteuert. Ich schalte nochmal um in die nackte Ansicht, ohne CSS Dokument. Sie sehen, dass ist das Dokument in HTML. Das ist alles reines HTML hier. Und so sieht das Ganze dann aus, wenn CSS in's Spiel kommt. Nachdem wir nun gesehen haben, was CSS kann, werfen wir einmal einen Blick auf ein typischen CSS Code. CSS ist eine relativ simple Sprache. Natürlich hält die Praxis wie immer anderweitig Stolperfallen bereit, und aus bitterer Erfahrung kann ich Ihnen verraten, dass Sie CSS durchaus zur Verzweiflung treiben kann. Aber das sind Ausnahmen, denn im Grunde ist CSS nicht wirklich kompliziert. Auch wenn CSS für Sie komplettes Neuland sein sollte, werden Sie vermutlich erkennen, wozu dieser CSS Code hier dient. Es gibt einmal eine Anweisung "font-family", offensichtlich Schriftfamilie. Dann kommt ein Wert Arial dahinter, also wahrscheinlich wird hier ein Font Arial gewählt. Danach kommt hier ein "font-size: 16px", das wird wahrscheinlich heißen Font-Größe, also Schriftgröße und 16px. Das heißt wir haben also eine Schrift Arial in 16px. Die letzte Anweisung sagt hier "color: black", Farbe schwarz. Das sieht alles ziemlich einfach aus. Wir haben also einen Text in Arial, mit 16px in der Farbe schwarz. Schauen wir uns mal diesen Code noch etwas genauer an. Eine CSS Anweisung teilt sich auf in einen Selektor, das ist hier dieses "p" und in einen Deklarationsbereich Deklarationen. Wir haben also ein Selektor "p", das ist das Element, auf das die Deklaration angewandt werden soll, also in diesem Fall, das "p" Element, ein Absatz. Die Deklarationen werden jeweils mit einem Semikolon getrennt. In diesem Fall haben wir 3 Deklarationen, "font-family", "font-size" und "color", denen verschiedene Werte zugeordnet sind. Eine Deklaration besteht immer aus einer Eigenschaft, in diesem Fall die Eigenschaft Farbe, der mit einem Doppelpunkt getrennt, dann ein Wert zugewiesen wird. Sie sehen also der Aufbau ist ganz einfach, Selektor in Mengenklammern, zusammengefasster Deklarations-Bereich. Deklarationen bestehen aus Eigenschaften, Doppelpunkt und einem Wert, und schon wird diese Deklaration auf unser gewähltes Element, also auf das "p" Element angewandt. Wenn sie diese Styleangabe nun in ihr HTML Dokument einbauen, dann werden sämtliche Absätze in Ihrem Dokument automatisch, und ohne weiteres zutun, in Arial 16 Punkt schwarz gesetzt. Vielleicht kommen Ihnen diese Trennung von Struktur und Präsentation etwas umständlich vor. Aber glauben Sie mir, diese Trennung bietet nicht nur erhebliche Vorteile, sie macht modernes Webdesign überhaupt erst möglich. Wenn sie Struktur und Präsentation trennen, dann können Sie Ihre Webseite modular aufbauen. Wenn sie Struktur und Präsentation mischen, wie es in früheren HTML Versionen der Fall war, dann bekommen sie sehr schnell ein Problem. Spätestens dann, wenn Sie ihrer Site eine neue Seite hinzufügen möchten, die natürlich genauso aussehen soll, wie die anderen Seiten, wird es extrem mühsam die benötigten Formatierungsangaben immer und immer wieder auf's Neue einzugeben. Das ist nicht nur lästig, das kostet nicht nur Zeit, das ist auch über die Maßen fehleranfällig. Ein Tippfehler hier, ein Tipfehler da. Eine kleine Unachtsamkeit an dieser Stelle, und Ihre komplette Site ist nur noch ein veritables Kuddelmuddel. CSS beschleunigt da die Entwicklung auch komplexer Websites. Sie definieren zentral Formate in einem externen Stylesheet, binden es über eine Link Anweisung in den HTML Code ein, und schon sieht jede neue Seite, die Sie hinzufügen, genauso aus, wie sie aussehen soll. Und nicht nur das, CSS ermöglicht Ihnen auch sehr schnell Websites für verschiedene Ausgabemedien zu definieren und zu erstellen. Sie können Styles sehr einfach übertragen, in andere Dokumente einbauen. Sie müssen lediglich eine Hand voll Anweisungen im zentralen CSS Dokument ändern und anpassen, und schon wird zum Beispiel aus Ihrer Desktopsite eine Site, die an die besonderen Anforderungen eines Smartphones oder Tablets angepasst ist, und zwar ohne, dass Sie auch nur ein Byte in Ihrem HTML Code hätten ändern müssen.

Grundlagen der Webprogrammierung: Basiswissen

Lernen Sie die wichgsten Technologien und Begriffe des World Wide Web kennen und sehen Sie, wie Sie sie selbst anwenden können.

2 Std. 21 min (29 Videos)
Derzeit sind keine Feedbacks vorhanden...

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!