CSS-Grundlagen - für SchülerInnen

Warum CSS

Mit Html kannst du einem Browser sagen, WAS der Besucher deiner Webseite angezeigt bekommt. Html ist dafür da, den groben "Aufbau" deiner Seite zu beschreiben, z. B. Überschriften und Absätze, Listen oder auch Bilder.

CSS dient dazu, deine Seite zu gestalten, "schönzumachen".
Das betrifft einerseits das "Layout", also die Anordnung der verschiedenen Teile auf deiner Webseite, was ist oben unten, was steht rechts oder links von einem Bild, etc.
Aber es geht auch um "Formatierung" von Text, z. B. Fettschrift oder Farben z. B. für roten Text.

Warum heisst das "CSS"

Eigentlich ist es gar nicht wichtig, das zu wissen, aber wenn du es wissen möchtest, bitte:

CSS steht für C - Cascading - S - Style - S - Sheets

Das heißt genau übersetzt so etwas wie "Herabfallende Stilblätter" - ÄHHH?? WHAT??

Also merke dir, es geht um Stil, um Style, und es geht darum, dass html so einen "Schachtelaufbau" hat: diese "TAG"s, die zwischen sich wieder andere "TAG"s haben und so weiter, außen html, dann body dann z. B. ein Absatz...
Wenn man jetzt Stil in diesen "Schachtelaufbau" bringen will, dann kann man das auch von außen nach innen tun, aber dazu später mehr...

Wie geht das? - Ein erstes Beispiel

Als erstes Beispiel nehmen wir Überschriften der ersten Ordnung also
<h1>Deine Überschrift</h1>.

Nehmen wir an, wir möchten der Überschrift eine Farbe geben, dann schreiben wir innerhalb des Start-"TAG"s <h1>:

<h1 style="color:red">

color ist das englische Wort für Farbe, und red heißt rot. Beachte, dass du zwischen color und red einen Doppelpunkt ":" brauchst - und auch dass alles in dem style="" in Anführungszeichen steht!

Der End-Tag, also das </h1> bleibt, wie es war. Hier müssen wir nichts verändern.

Probiere es einfach mal aus! Es ist eigentlich gar nicht schwer.

Nimm dir eine Html-Datei, die du schon hast, oder baue dir zur Übung eine neue.
Du brauchst zwischen den body-TAGs nur ein h1 TAG, und da schreibst du dann den Stil hinein, genau so, wie du es gerade gesehen hast.

Farben

Auf dieser Seite findest du Farben mit sogenannten "Farbcodes". Für CSS wird häufig der Code mit dem "#" am Anfang verwendet.

Suche dir ein paar Farben aus, die du für eine Webseite verwenden willst.

Hintergrundfarbe

Textfarbe

<p style="color:#DEIN_CODE" >Der Inhalt deines Absatzes, dessen Text diese Farbe erhalten soll</p>