CSS: Wie style ich meine Seite? // Der Weg zur eigenen Webseite! - Guide. #5
Endlich ist es soweit! Nachdem wir die wichtigsten HTML-TAGs kennen, werden wir diesen TAGs die Eigenschaften geben, die wir möchten. Beispielsweise wo das Element hin soll, wie hoch und breit es sein soll und vieles mehr. Dafür benötigen wir CSS.
Was wir bisher gelernt haben.
Das HTML-Grundgerüst ist kein Problem mehr. Wir können Texte auf einer Webseite mit HTML formatieren und strukturieren. Wir können auch DIV- und SPAN-Elemente definieren und verstehen warum wir sie brauchen. Dasselbe gilt für die neuen DIV-ähnlichen Elemente, die es seit HTML5 gibt wie header, nav, section, article, aside und footer.In den letzten Beiträgen habe ich schon viel über CSS versprochen, jetzt ist es soweit!
START
Was ist CSS?
Fangen wir mal von vorne an: CSS steht für Cascading Style Sheets. Übersetzt bedeutet dies "gestufte Gestaltungsbogen".
CSS ist im Gegensatz zu HTML eine reine Stilsprache. Mit dieser können wir das Aussehen von HTML-Dokumenten gestalten.
In CSS können wir wie im vorherigen Post erwähnt, Schriftarten, Farben, Abstände, Linien, Größen, Hintergrundbilder und vieles mehr definieren.
CSS wird von allen Browsern unterstützt. Mittlerweile gibt es schon CSS3, also CSS in Version 3. Mit den Änderungen und Vorteilen von CSS3 werden wir uns jedoch erst in späteren Beiträgen beschäftigen.
Einbinden von CSS in die Webseite.
Wo schreibe ich CSS?
Es gibt mehrere Möglichkeiten, dem Browser mitzuteilen, dass wir CSS schreiben.
Variante #1. CSS direkt in die HTML-Datei schreiben.
Grundsätzlich kann man überall in einem HTML-Dokument den style-TAG verwenden. Besser ist es jedoch den head-Bereich ganz oben in einem HTML-Dokument dafür zu verwenden.
Variante #2. Externe style-Dateien.
Für große Projekte bevorzuge ich jedoch diese Möglichkeit.
Man legt sich einfach eine zweite Datei an. Ich nenne sie jetzt style.css. Man könnte jeden Namen vergeben, jedoch sollte die Dateiendung .css sein.
Das Bild hilft hoffentlich bei der Erklärung. Man verlinkt im head-Bereich auf eine "stylesheet"-Datei.
Beachte aber, dass der verlinkte Name im head-Bereich und der Dateiname der style-Datei dieselben sind.
In der CSS-Datei kann es jetzt los gehen!
- Im Beispielbild oben hab ich den Hintergrund mithilfe von CSS geändert.
Dafür habe ich den body-TAG verwendet. - Dort verwendete ich den Befehl: background-color: um die Hintergrundfarbe zu verändern.
- Nachdem Befehl background-color: folgte cornsilk. Dies ist eine Farbe die ich recht angenehm empfinde. Da ich diesen Befehl beim body-Element angewendet hab, ist das gesamte sichtbare Feld mit dieser Hintergrundfarbe gefüllt.
- Jeder Befehl muss mit einem Semikolon ; enden, ansonsten ist der Befehl nicht gültig!
CSS-Befehle.
Was können wir noch alles ändern?
Ich hoffe, dass dir diese beiden Dateien klar waren. Beide sind mit Kommentaren bestückt, die beim Verstehen helfen sollen. Das ganze sieht dann im Browser so aus:
Natürlich ist diese Webseite noch keine Meisterleistung, doch ich glaube für "unsere erste Webseite" können wir das so stehen lassen.
Meine Farbauswahl ist noch nicht die beste. Das hätte ich viel besser auswählen könne, doch darüber machen wir uns jetzt mal keine sorgen. Wir haben unsere erste Webseite designed. Die Navigation ist nun nebeneinander und etwas schöner aufbereitet als vorher.
noch mehr CSS-Befehle.
CSS-Befehle für die Schrift
Die meisten CSS-Befehle werden wir in den nächsten Beiträgen noch sehr intensiv kennen lernen. In der folgenden Auflistung sind die wichtigsten Befehle für das formatieren für die Schriften.
Befehl | Bedeutung | Beispielangaben |
---|---|---|
font-family | Schriftart | Arial, Times New Roman, usw. |
font-size | Schriftgröße | Wert in px oder in % |
color | Schriftfarbe | red, green, white oder in hex. Farbcode |
font-variant | Schriftvariante | normal, small-caps |
font-weight | Schriftgewicht | normal, bold, bolder, lighter |
font-style | Schriftstil | normal, oblique, italic |
noch mehr CSS-Befehle.
CSS-Befehle für unsere Texte
Hier noch die wichtigsten Befehle für die Textgestaltung. Nicht verzweifeln, wir werden uns später alle nochmal etwas genauer ansehen.
Befehl | Bedeutung | Beispielangaben |
---|---|---|
text-align | Textausrichtung | left, right, center, justify (Blocksatz) |
line-height | Zeilenabstand | numerischer Wert in px oder % |
text-decoration | Textgestaltung | underline, overline, line-through, blink |
word-spacing | Wortabstand | Wert in px oder % |
letter-spacing | Zeichenabstand | Wert in px oder % |
text-indent | Texteinrückung | Wert in px oder % |
text-transform | Textart | capitalize, uppercase, lowercase, none |
noch mehr CSS-Befehle.
CSS-Befehle für Seitenränder
Befehle für Außenabstand. Also wie viel Abstand man zum nächsten Element haben möchte.
Befehl | Bedeutung | Beispielangaben |
---|---|---|
margin | genereller Abstand (oben, unten, links, rechts) |
Wert in px oder in % |
margin-left | Abstand von links | Wert in px oder in % |
margin-right | Abstand von rechts | Wert in px oder in % |
margin-top | Abstand von oben | Wert in px oder in % |
margin-bottom | Abstand von unten | Wert in px oder in % |
Dasselbe gibt es für den Innenabstand. Hier spricht man aber vom padding. Dies haben wir heute schon für den Abstand der Überschrift im Header verwendet.
Befehl | Bedeutung | Beispielangaben |
---|---|---|
padding | genereller Abstand (oben, unten, links, rechts) |
Wert in px oder in % |
padding-left | Abstand von links | Wert in px oder in % |
padding-right | Abstand von rechts | Wert in px oder in % |
padding-top | Abstand von oben | Wert in px oder in % |
padding-bottom | Abstand von unten | Wert in px oder in % |
noch mehr CSS-Befehle.
LINKS formatieren
In der folgenden Tabelle geht es nicht um die Befehle sondern um die "TAGs" wie man Links anspricht, um sie mit den obigen Befehlen bearbeiten zu können.
Befehl | Bedeutung | Beispielangaben |
---|---|---|
a:link | Link | Hier kann fast jeder CSS-Befehl verwendet werden |
a:visited | bereits besuchter Link | Hier kann fast jeder CSS-Befehl verwendet werden |
a:active | bereits angeklickter Link | Hier kann fast jeder CSS-Befehl verwendet werden |
a:hover | Link beim überfahren mit der Maus | Hier kann fast jeder CSS-Befehl verwendet werden |
Dich verwirrt das ein bisschen? Kein Problem! Im nächsten Beitrag gehen wir das nochmal ein wenig genauer durch.
Das wars mit der CSS-Einführung! Im nächsten Beitrag gehts hier wieder weiter. Ich hoffe mal, dass ich dir weiterhelfen konnte.
Wenn du nichts verpassen willst folge mir einfach!
Mehr Wissen!
Ich habe schon einige Artikel über das Internet geschrieben. Vielleicht ist etwas interessantes für dich dabei:
- HTML5-Elemente: header, nav, footer uvm. ... - Internet-Basics #9
- HTML: DIV und SPAN-Elemente - Internet-Basics #8
- HTML-TAG: Texte strukturieren und formatieren. - Internet-Basics #7
- Der Weg zur eigenen Webseite! - Guide. Alles von Beginn an. - Internet-Basics #6
Was gibts im nächsten Beitrag? Die Fortsetzung von CSS. Wir werden unsere Webseite ein wenig optimieren. Beispielsweise werden wir lernen, wie wir Farben auswählen, die besser zusammenpassen. Nicht nur das, endlich werden wir unsere Seitenleiste neben unserem Inhalt stehen haben. DANKE!
Schöner Beitrag für Einsteiger.
Ich persönlich benutze gerne rem oder em für Abstände und größen, weil die sich angenehm skalieren lassen.
Außerdem möchte ich noch auf die CSS Referenz von w3schools hinweisen, in der wirklich jedes Attribut beschrieben ist.
Vielen Dank, freut mich sehr. (:
Ich persönlich bevorzuge eher px oder %. Aber natürlich sind rem und em auch nicht zu vernachlässigen. Danke.
Das stimmt w3schools ist ein sehr gutes Nachschlagewerk auch für HTML und JavaSkript.
lg Domii. (:
Netter Beitrag Danke! :)
Nach diversen Programmiersprachen kann CSS Wissen auch nicht schaden :)