Formatierung mit CSS

Wie verwende ich Formatierungsmöglichkeiten

Es gibt mehrere Möglichkeiten das Aussehen eines Textes zu verändern. Zum einen gibt es die Möglichkeit über CSS die Attribute festzulegen und so z.b. Einfluss auf die Schriftgröße oder die Schriftart zu nehmen. Zum Anderen gibt es auszeichende Tags wie z.b. "b" "i" oder "strong".

Wichtig dabei ist, das diese auszeichnenden Tags auch eine semantische Bedeutung haben. Wenn man einen Abschnitt z.b. mit "strong" kennzeichnet, kann auch eine Maschine erkennen das dies wohl ein eher wichtiger Abschnitt ist.

Bei der Verwendung sollte man unterscheiden, möchte man aus rein estethischen Gründen einen Abschniit in einer bestimmten Art und Weise Layouten sollte man CSS verwenden.


Möchte man hingegen einen Text semantisch hervorheben z.b. dadurch das man ihn fett oder kusiv macht, sollte man dafür nicht CSS nutzen sondern die dafür vorgesehenen Tags. Dadurch haben auch Maschinen (z.B. Suchmaschinen) die Chance die Bedeutung des Textes besser zu erkennen.

In diesem Abschnitt geht es um die Gestalltung mit CSS.

Schriftart in einem Absatz zuweisen

Um die Schriftart eines Textes zu ändern muss man den Bereich des Textes der geändert werden soll in einen Bereich zusammenfassen. Ein Bereich ist immer der Inhalt eines Tags.

 

Wir verwenden hier zunächst den p Tag um das CSS Style auf einen Abschnitt anzuwenden.

An sich hat der <p> Tag keinen Einfluss auf das Layout, da er rein semantische Bedeutung hat. Um diesen Bereich zu formatieren gibt es das Attribut "style". Darin können wir zum Beispiel bestimmen das der Text in der Schriftart Arial dargestellt wird.

Beispiel:

<p style="font-family:Arial"> Arial Text </p>

Bei Schriftarten die aus mehreren Wörten bestehen wird der Name in einfachen Anführunsgzeichen zusammengefasst. Der Grund für die einfachen Anführunsgzeichen ist, dass der Browser bei doppelten Anführunsgzeichen mit dem Anfang und Ende des Style Attributes nicht zurechtkommen würde.


Ein Beispiel mit Times New Roman wäre:

<p style="font-family:'Times New Roman' "> Times New Roman Text </p>

Da nicht jeder, jede Schriftart auf seinem Computer installiert hat, kann man auch alternativen angeben.

Wenn wir also eine Schriftart angeben die es nicht gibt und als alternative Arial hätten wir folgenden Tag:

 

<p style="font-family:'gibts net', Arial "> Mein Text </p>

Nun möchten wir aber auch das unser Text verschiedene größen haben kann.

Schriftgröße mit CSS festlegen

Um die Schriftgröße zu bestimmen gibt es für das style Attribut ebenfalls eine Option.

Diese Option heisst font-size. Optionen werden (bei CSS) durch ein Semikolon getrennt.

Ein Text in Arial Schriftgrösse 20 hätte folgenden Tag:

 <p style="font-family: Arial; font-size: 20 pt"> Mein Text </p> 

Die Angabe der grösse ist in vielen verschiedenen Arten möglich.


Hier ein paar Beispiele:


Grösse in EM:

 <p style="font-family: Arial; font-size: 3em"> Mein Text </p> 

Grösse in Pixel:

 <p style="font-family: Arial; font-size: 20px;"> Mein Text </p> 

Zusätzlich wäre es ja auch schön wenn unsere Seite ein bisschen bunt wäre. Natürlich ist auch daran gedacht in HTML. 

Schriftfarbe mit CSS festlegen

Die Schriftfarbe ist ebenfalls eine Option im style Attribut. Diese Option heisst "color", nicht "fontcolor".Einen roten Text in der Schriftart Arial mit der Schriftgrösse 20 würde man also so erzeugen:

<p style="font-family: Arial; font-size: 20pt; color: red;"> Mein Text </p> 

Jetzt haben wir nur ein Problem. Unsere Welt ist bunt, sehr bunt. Stell dir vor wir müssten für jede Farben einen Namen eingeben.


Wie würde man alle diese Farben nennen und wie könnten man sich alle diese Farben merken?

Für jedes Problem gibt es eine Lösung! Die Farben werden einfach gemischt. So wie wir früher in der Grundschule im Farbkasten die Farben gemischt haben.

Wer da gut aufgepasst hat, weiss das man alle Farben aus drei Grundfarben mischen kann, nämlich aus folgenden:

  • Rot
  • Grün
  • Blau

Weil Informatiker 2er Potenzen lieben, werden die Farbwerte in Form von Hexadezimalwerten angegeben. Jede Grundfarbe wird in 256 teile unterteilt (von 0 bis 255). 255 als Hexadezimalzahl ist FF. Hierbei wird eine additive Farbmischung verwendet. Das heist wenn wir alle Farben voll darstellen (FF), wird der Text weiss.

Beispiel:

<p style="font-family:Arial; font-size: 20pt; color: #FFFFFF">weisser Text </p>


schwarzen Text würden wir mit einem Wert von 000000 darstellen.Beispiel:

<p style="font-family:Arial; font-size: 20pt; color: #000000">schwarzer Text </p>

Durch dieses System sind also 256*256*256 Farben möglich. Wenn man das ganze in seinen Taschenrechner eingibt verrät er uns das wir 16777216 Farben darstellen können.


Das ist schonmal eine ganze Menge. Viele Grafikprogramme geben sogar den HTML Farbwert an wenn man eine Farbe auswählt.

Welche Farbe kommt heraus wenn wir folgenden Farbcode nehmen: #FFFF00 ?
Der Text würde gelb werden.

Und bei #999900?

Der Text hätte immernoch einen gelbstich, aber das gelb ist nichtmehr so intensiv.

In diesem Bereich ist es das beste wenn Sie einfach ein bisschen mit den Farben expimeretieren.

Manchmal wollen wir in unseren Texten auch Dinge aufzählen. Statt dumm immer 1. 2. 3. usw.

Davor zu schreiben kann man hier jedoch einen speziellen Tag benutzen.

 

Navigation