CSS 1

Cascading Style Sheets Version 1 Test

Beispiele für die Cascading Style Sheets Version 1 (CSS 1) Elemente float, font-size, width, font-family, word-spacing, color und background-color. Diese Elemente können für relative Textgrössen, Textfarben und Abstände zwischen den Worten, sowie der Positionierung von Text und Grafiken eingesetzt werden.

CSS Element font-size: Text mit relativer Grösse

Dieser Text lässt sich auch im Internet Explorer vergrössern.
Test im Internet Explorer: Menü Ansicht, Menüpunkt Schriftgrad

  body {
    font-family: arial,sans-serif;
    font-size: 100.01%;
  }

  .text {
    font-size: 1em;
    color: #ff0000;
    background-color: #ffffff;
  }	  
    

CSS Elemente color und background-color

Einfaches Beispiel um Texte farbig darzustellen.

roter Text
grüner Text
blauer Text

  .rotertext {
    font-size: 1em;
    color: #ff0000;
    background-color: #ffffff;
  }	  
  .gruenertext {
    font-size: 1em;
    color: #00ff00;
    background-color: #ffffff;
  }	  
  .blauertext {
    font-size: 1em;
    color: #0000ff;
    background-color: #ffffff;
  }	
    

CSS Element word-spacing: Text mit Abstand

Zwei Beispieltexte um das CSS Element zu testen. Der erste Text ist ohne Abstand, der zweite Text sollte mit Abstand zwischen den Worten sein.

Beispieltext Beispieltext Beispieltext Beispieltext
Beispieltext Beispieltext Beispieltext Beispieltext

  .wortabstand {
    word-spacing: 0.5em;
  }	
    

CSS Element float: Grafiken und/oder Text nebeneinander

Das float Element eignet sich gut um ein tabellenfreies oder mehrspaltiges Layout zu erstellen.

  .left-content {
    font-size: 0.8em;
    float: left; 
    width: 48%;
    text-align: center;
    padding-top: 2em; 
    padding-bottom: 2em;
  }

  .right-content {
    float: right;
    width: 48%;
    font-size: 0.8em;
    text-align:center;
    padding-top: 2em; 
    padding-bottom: 2em;
  }
   

Nach oben