Auf dem Weg zur eigenen Homepage hast du sicher schon von den "berühmt berüchtigen" CSS gehört. Hinter der Abkürzung CSS stecken die Cascading Style Sheets, welche mittlerweile für die Erstellung der eigenen Homepage mehr als nur wichtig sind. Wenn du
Mit den CSS kannst du deine HTML Struktur anpassen ohne direkt in den HTML Code eingreifen zu müssen, womit eine klare Trennung von Struktur und Design entsteht.
Was kann ich mit den CSS alles machen?CSS ist eine Stilsprache die es ermöglicht das Aussehen von HTML Dokumenten zu beinflussen. Zum Beispiel kannst du mit CSS die Grösse und Farbe deiner Schrift die du in den HTML Dokumenten verwendet hast verändern oder Postionen von HTML Elementen festlegen und Hintergrundbilder einbinden. Kurz gesagt, mit HTML erstellst du das Layout und mit CSS formatierst du dein Layout bis es so aussieht wie du es dir wünschst.
Das gute ist das jeder Webbrowser der heute von einem Besucher genutzt wird diese CSS unterstützt und darstellen kann. Für dich heisst das, dass du zum Formatieren deiner HTML Dokumente ohne Einschränkungen auf die CSS zurückgreifen kannst.
Worin unterscheiden sich CSS und HTML?Mit HTML werden deine Webseiten Inhalte strukturiert und mit CSS wird die Struktur lediglich formatiert.
HTML kannst du auch ohne CSS einsetzen, jedoch müsstest du um ein "hübsches" Resultat im Webbrowser zu erzielen deine HTML Dokumente mit den HTML Tags formatieren die fest im HTML Code eingebunden werden.
Reine HTML Dokumente kommen auch heute noch zum Einsatz um Dokmente im Internet bereits zu stellen, dies sind allerdings in den meisten Fällen reine Textdokumente wie z.B. ein Onlinebuch oder Dokumentation.
Homepages werden heute so gut wie immer mit HTML & CSS erstellt. Mit den CSS alleine kannst du erst einmal nichts anfangen weil du keine Grundlage zum Formatieren hast. Steht allerdings deine HTML Struktur mit den Inhalten so kannst du anfangen die CSS für deine HTML Dokumente zu erstellen um deine Webseiten mit einem ansprechenden Layout zu versehen und für den Besucher interessant zu gestalten.
Und wie sieht so eine CSS aus?Aufbau der Stylesheet-Angabe
Eine Stylesheet-Angabe besteht aus der Eigenschaft und einem Wert den wir unserem Objekt zuweisen möchten. Dabei wird die Eigenschaft vom Wert i einem : "Doppelunkt" getrennt.
Schrift in Weiß darstellen::
color: white;
Schrift Fett darstellen:
font-weight: bold;
Diese Angaben werden in Klassen zuammengefasst und auf ein oder mehrere HTML Element angewendet:
Eine CSS Klasse sieht z.B. so aus:
body {
}
Und um unsere Schrift im Body unseres HTML Dokuments Weiß darzustellen und den Hintergund unsere Webseite Schwarz zu gestalten müssten wir folgendes CSS erstellen:
body {
color: #fff;
background: #000;
}
Und wie verbindet man CSS und HTML?Dazu gibt es 2 Möglichkeiten, einmal können wir die CSS direkt in unsere HTML Dokumente schreiben, was weniger zu empfehlen ist.
Möchten wir z.B. unsere Überschift in Rot darstellen können wir dies direkt im HTML Tag notieren:
<h1 style="color:#ff0000;">Dies ist eine Überschrift</h1>
Viel eleganter ist es aber wenn wir unsere CSS in den Headerbereich unser Homepage auslagern:
<html>
<head>
<style type="text/css">
<!--
Deine CSS Angaben kannst du hier notieren
//-->
</style>
</head>
<body>
</body>
</html>
Oder wir lagern unsere CSS komplett in eine getrennte Datei aus und laden diese in unser HTML Dokument in dem wir folgendes in unserem Headerbereich der Homepage notieren:
<link rel="stylesheet" type="text/css" href="meinecssdatei.css">
Welche CSS Angaben gibt es denn überhaupt?Das sind eine ganze Menge!
Du findest eine sehr gute Übersicht bzw. CSS Referenz mit Informationen und Beispielen auf der folgenden Webseite:
Wenn du Fragen hast oder Hilfe benötigst helfen wir dir hier gern im Forum weiter.
