Was ist CSS?

Benutzerfreundlichkeit

Dieser Artikel über CSS wurde von unserem Praktikanten Saleh geschrieben.

CSS (Cascading Style Sheets) ist der Partner zu HTML. Damit lässt sich jedes Element innerhalb des HTML Codes vom Aussehen verändern. Du wirst wahrscheinlich selbst gemerkt haben, dass deine Internetseite bisher noch nichts für das Auge ist. Beim Kochen gilt das gleiche, denn das Auge isst mit. Zwar funktioniert deine Webseite so, wie du es haben möchtest, doch lange möchte der Besucher sich dort nicht aufhalten.

Um ein Element (Tag) aus dem HTML-Code zu verschönern, ist es nötig ihn anzusprechen, denn woher soll CSS sonst wissen, was man genau verändern möchte. Dies geschieht mit „Element {  }“. Wenn man zum Beispiel den paragraph-Tag nun verändern möchte macht man folgendes „p {  }“. Jetzt ist der Tag zwar angewählt, doch hat man ihm noch nicht gesagt, was sich genau ändern soll. Für den Anfang verändern wir mit dem Befehl „color“ die Farbe, welcher innerhalb der zwei geschweiften Klammern angegeben werden muss.

CSS-Grundstruktur

p { color: red; }

Alle Paragraph-Tags werden somit in Rot dargestellt.

Weitere Anpassungen an den Text wären noch die Schriftart und die Schriftgröße. Mit dem Befehl „font-family“ lässt sich die Schriftart ändern und mit „font-size“ die Schriftgröße. Die Größe lässt sich in Pixeln (px) in Centimetern (cm), Punkt (pt) und vielen anderen Einheiten angeben. Meistens wird für Text jedoch nur die Einheit Pixel verwendet.

p {

font-family: Arial;

font-size: 15px;

}

Somit wird die Schriftart und die Schriftgröße verändert.

Mit dem Befehl „background-color“ ist es möglich die Hintergrundfarbe zu ändern. Um allerdings den Hintergrund für die gesamte Internetseite zu verändern, sollte man vorher den Tag „body“ ausgewählt haben.

body {  background-color: blue; }

Der Hintergrund erscheint nun in Blau.

Farben und Bilder

Falls man statt einer Farbe doch lieber ein Bild im Hintergrund haben möchte, benutzt man den Befehl „background-image: (bild.png)“

Wahrscheinlich hast du schon gesehen, dass das Bild nun mehrmals im Hintergrund zu sehen ist. Um das zu vermeiden, ist ein weiterer Befehl neben dem Verweis zum Bild von Nöten.

body {

background-image: (bild.png);

background-repeat: no-repeat;

}

Durch „background-repeat“ ist es möglich dem Browser mitzuteilen, wie oft sich das Bild im Hintergrund wiederholen darf. Durch „no-repeat“ wird die Bildwiederholung vermieden. Zudem kann man durch „repeat-x“ oder „repeat-y“ die Bildwiederholung nur auf die jeweilige Achse begrenzen, das wird aber selten bis gar nicht gemacht.

Wenn man nun alles zusammen würfelt, schaut der CSS-Code bisher so aus:

body {

background-color: blue;

}

p {

color: red;

font-family: Arial;

font-size: 15px;

}

Das Verstellen von Höhe und Breite bei Bildern oder Boxen funktioniert durch die beiden Befehle „height“ und „width“. Aber nicht vergessen den Image-Tag (img) vorher anzuwählen, da sich sonst nichts am Bild verändern würde.

img {

height: 200px;

width: 200px;

}

Das Seitenverhältnis der Bilder beträgt nun 200 x 200 Pixel.

Links mit CSS ändern

Selbst Links lassen sich verändern, indem man zunächst den Tag „a“ selektiert. Du kannst ihm z.B. eine Farbe zuweisen. Es lässt sich allerdings noch viel mehr als nur die Farbe verändern. Beispielsweise kannst du die vorgegebene Unterstreichung von Links entfernen oder beim drüber halten der Maus eine andere Farbe anzeigen lassen. Ebenfalls kann man bereits angeklickte Links farblich kennzeichnen.

Zunächst weisen wir den Links die Farbe Grün zu.

a { color: green; }

Die Unterstreichung kann man mit „text-decoration“ ändern. Um sie zu entfernen, heißt der Befehl „text-decoration: none“

a {

color: green;

text-decoration: none;

}

Nun wollen wir den Link eine andere Farbe annehmen lassen, wenn einmal die Maus über den Link gehalten wird und wenn der Link bereits angeklickt wurde. Dazu nutzen wir einfach „:hover“ und „:visited“. Das kommt aber nicht wie für gewöhnlich in die geschweiften Klammern, sondern steht direkt neben dem angewählten Tag.

a:hover {  color: red }

a:visited { color: orange }

Links, bei denen die Maus drüber gehalten wird, werden nun in rot und bereits besuchte Links in Orange dargestellt.

Am Ende einfach wieder alles speichern, nur dass statt der Dateityp-Endung .html nun die Endung „.css“ steht.

CSS in HTML-Datei verankern

Um das HTML-Dokument nun mit dem CSS-Dokument zu verknüpfen, wird ein etwas komplizierterer Tag im Header der HTML-Datei benötigt.

<link rel=”stylesheet” href=”style.css” type=”text/css”>

Der HTML-Datei wird durch diesen Befehl mitgeteilt, dass sie eine Verbindung mit der CSS-Datei eingehen soll. Als Letztes muss die CSS-Datei nur noch gespeichert werden. Die Dateitypendung für CSS Dateien lautet „.css“.

Der Artikel befasst sich nur mit den grundlegenden Befehlen und Elementen von HTML und CSS. Wer sich weiterhin damit auseinandersetzen möchte, dem empfehle ich einen Blick auf die Internetseite http://de.selfhtml.org/.

0 Kommentare

Dein Kommentar

Want to join the discussion?
Feel free to contribute!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.