CSS Einführung - Grundlagen der Webgestaltung mit CSS

Exzellenter Artikel
0 | 24926 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "CSS Einführung - Grundlagen der Webgestaltung mit CSS" mit Ihrem Wissen!

Anzeige Hier werben

CSS - Cascading Style Sheets (dt. etwa: Kaskadierende Stildefinitionen) - ist eine Layout- und Formatierungssprache, um strukturelle Inhalte wie HTML zu formatieren. Das Aussehen der semantisch deklarierten Abschnitte im HTML-Dokument wird damit genauer bestimmt, verändert und erweitert. Somit bleibt das Layout von der Struktur getrennt.

HTML besitzt eigene Grundformatierungen, wie eine größere Schrift von Überschriften. Mit den sogenannten "Eigenschaften", die CSS mitbringt, kann man diese modifizieren. So lässt sich beispielsweise die Farbe von Text ändern oder Rahmen um Boxen hinzufügen. Aus Standards wie HTML 4 gibt es noch immer HTML-Attribute (z.B. color, font-face), die einen Teil der CSS-Eigenschaften übernehmen könnten. Solche Attribute sind jedoch, außer in HTML 4, veraltet und unflexibel.

Daneben ist es möglich, CSS für verschiedene Ausgabemedien wie Monitor ("screen"), Projektion ("projection") und Druck ("print") festzulegen.

Wie anfangen

Vor Ihnen befindet sich ihr HTML-Dokument mit semantisch sinnvollen Auszeichnungen für Überschriften, Absätzen, Listen usw.

Ihre CSS-Eigenschaften müssen nun auf irgendeine Weise mit dem Dokument verknüpft werden. Dazu gibt es verschiedene Wege. Der heute hauptsächlich verwendete ist die Einbindung der Deklarationen als externe Datei.

Erstellen Sie sich zunächst eine leere Datei mit dem Namen style.css. Die Endung muss die einer CSS-Datei sein - der Name ist im Grunde frei wählbar. Achten Sie darauf, dass Sie bei der Einbindung der CSS-Datei in die HTML-Datei denselben Namen verwenden. Es gibt für die Bezeichnung der CSS-Datei weiter keine Vorgaben, mit style.css machen Sie bei einfacheren Projekten mit nur einer CSS-Datei aber einen guten Anfang.

In den HEAD-Bereich des HTML-Dokuments kommt folgende Zeile. Damit wird die CSS-Datei beim Aufruf der HTML-Datei im Browser mitgeladen. Achten sie darauf, dass sich die CSS-Datei im selben Verzeichnis befindet, wie das HTML-Dokument.

 
HTML
1
<link rel="stylesheet" type="text/css" href="style.css">

Syntax

Öffnen Sie nun ihre noch leere CSS-Datei in einem Editor, denn nun soll die erste Deklaration von Statten gehen.

Elemente (Tags)

Mit CSS können sie nun einzelne Elemente ansprechen. Die Syntax dazu sieht wie folgt aus:

Bild zu CSS Einführung - Grundlagen der Webgestaltung mit CSS

Die Eigenschaften folgen später.

IDs

Meist ist es jedoch von Nöten, genau einen einzigen Tag auszuzeichnen und sie anderen des selben Typs nicht. Der anzusprechende Tag muss als solcher identifizierbar sein, mit einer ID. Das gleichnamige HTML-Attribut enthält eine Zeichenfolge, die in den CSS-Eigenschaften aufgegriffen wird. Eine ID kann jedoch nur auf ein Element innerhalb eines Dokuments angewendet werden, darf also nur ein Mal vorkommen. Die Syntax dazu sieht so aus:

Bild zu CSS Einführung - Grundlagen der Webgestaltung mit CSS

Oben ist ein exemplarisches HTML-Tag zu sehen und darunter die Syntax der CSS-Eigenschaft.

Klassen

Im Gegensatz zu IDs kann ein und dieselbe Klasse für mehrere Elemente definiert werden und darf damit mehrfach in einem Dokument vorkommen. Eine Klasse steht damit als allgemeine Definition für eine bestimmte Anzahl an Elementen.

Bild zu CSS Einführung - Grundlagen der Webgestaltung mit CSS

Eine Führung durch die gesamte Syntax von CSS gibt es in einem eigenen Artikel.

Die "Eigenschaften"

So, nun geht es an die Essenz der Stylesheets; den Eigenschaften. Wie Sie oben bereits sehen konnten, besteht die Syntax einer Eigenschaft aus deren Namen und dem dazugehörigen Wert: eigenschaft: wert;.

In der CSS Referenz finden Sie alle CSS-Eigenschaften und was sonst noch so dazugehört. Die Referenz ist topaktuell und beinhaltet alle W3C-CSS-Standards (CSS1, CSS2, CSS2.1, CSS3).

Beispiel

Als Beispiel soll eine Überschrift 2. Grades dienen:

ohne css  
HTML
1
<h2>Diese Überschrift bekommt bald eine CSS-Deklaration</h2>

Die Überschrift besitzt einen bestimmten vordefinierten Außen- und Innenabstand, eine vordefinierte Größe, Farbe und Schriftart.

Um diese Werte zu ändern brauchen sie CSS. Hinzu nehme ich im Beispiel eine Hintergrundfarbe und einen Rahmen. Dies könnte beispielsweise so aussehen, in diesem Falle formatieren wir das Element direkt und nicht über eine separate Datei:

mit css  
HTML
1
<h2 style="margin: 20px 0; padding: 10px; font-size: 150%; color: #4C4C4C; font-family: helvetica, arial, sans-serif; background-color: #CCC; border: 1px solid #804000;">Diese Überschrift bekommt eine CSS-Deklaration</h2>

Verhalten und Modell

CSS folgt einem bestimmten Layout-Modell, dem sogenannten Box-Modell. Dies teil die HTML-Elemente in zwei Gruppen auf: Inline-Elemente, die im Fluss laufen, und Block-Elemente, die einen Absatz erzeugen. Blockelemente definieren hauptsächlich das Layout einer Website, während Inline-Elemente innerhalb fließende Tags formatieren [unverständlich]. Aus diesem Grund ist es auch im HTML-Dokument nicht erlaubt, ein Inline-Element um ein Block-Element herumzulegen.

Je nach Art verhält sich auch eine CSS-Eigenschaft etwas anders, wendet man sie auf ein Block- oder Inline-Element an. Manche Eigenschaften verhalten sich gleich (z.B. color), manche ändern ihr Verhalten (z.B. border) und manche lassen sich nur auf Block-Elemente anwenden (zB. position) oder anders herum.

Achten sie deshalb bei den Eigenschaften in der Referenz genau darauf, was in der grauen Box rechts für Informationen zu der Eigenschaft angegeben sind.


Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 4 Personen an der Seite "CSS Einführung - Grundlagen der Webgestaltung mit CSS" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "CSS Einführung - Grundlagen der Webgestaltung mit CSS" hier bearbeiten.

Mitarbeiter
  • hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.
  • hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.
  • Kinderturnen - Sport Spiele für Kinder
  • Meine Schwerpunkte liegen im Bereich Grafikdesign, SEO und Management. Seit sieben Jahren bin ich als Geschäftsführer der Team23 GbR tätig, die Webdesign in Augsburg anbietet, sowie Webmasterpro.de betreut.