Text-Styling

Allgemeines

Zu beginn des Zeitalters des Internets wurden die Texte auf Webseiten zunächst nur über die innerhalb des Programmes in dem die Webseite erstellt wird gegebenen Möglichkeiten bearbeitet um den Wünschen des Webseitenbesitzers zu entsprechen. Heutzutage ist diese Methode jedoch stark veraltet. Die gängigste Art eine Webseite zu erstellen ist den Hauptkörper der Webseite in der Programmiersprache HTML zu erstellen und die Textoptik dann mithilfe eines zusätzlichen CSS Protokolls zu überarbeiten. Dabei gibt es drei verschiedene Möglichkeiten den Text zu bearbeiten. Diese sind in form der Größe, der Schriftart und der Textfarbe und so funktionieren die drei verschiedenen Bearbeitungsfunktionen:

Veränderung der Textgröße

Mit hilfe von CSS lässt sich ganz einfach über verschiedene Wertekategorien die Größe von Schriften verändern. Einige Beispiele für die verschiedenen Maßeinheiten sind Pixel(px), root-Element(rem), Elemente(em), Prozente der standard Schriftgröße(%) oder Zentimeter(cm).
Zum ändern der Schriftgröße definiert man hierfür den Abschnitt bei dem man die Schriftart ändern möchte und nutz dann den Befehl "font-size". Anschließend gibt man ein in welcher Parameterform man die Schriftgröße veränder will und einen Wert auf welchen man sie verändern. Danach endet man den CSS befehl mit einem Semikolon.

<style>
 #Text1{font-size: 20px;}
 #Text2{font-size: 120%;}
 #Text3{font-size: 1cm;}
</style>

<body>
 <ol>
  <li id="Text1">Pixel </li>
  <li id="Text2">Vorgegebene Größen</li>
  <li id="Text3">Prozent</li>
 </ol>
</body>

  1. Pixel
  2. Vorgegebene Größen
  3. Prozent

Neben diesen Größenenheiten gibt es auch noch von CSS vorgegebene Größen. Hierfür nutzt man dann statt einem Parameter mit Wert einfach eine der vorgegeben Größenstufen, indem man sie als Wort hinschreibt.


<style>
 #Text1{font-size: smaller;}
 #Text2{font-size: medium;}
 #Text3{font-size: large;}
</style>

<body>
 <ol>
  <li id="Text1">Pixel </li>
  <li id="Text2">Vorgegebene Größen</li>
  <li id="Text3">Prozent</li>
 </ol>
</body>

  1. Pixel
  2. Vorgegebene Größen
  3. Prozent

So lässt sich grob und schnell die Schrifgröße des Textes auf der Webseite auf die passende Größe einstellen.