CSS 1, Cascading Style Sheets 1 test

Cascading Style Sheets Version 1 test

Test your browser on basis of Cascading Style Sheets 1 (CSS 1) elements like float, font-size, width, font-family, word-spacing, color and background-color. With this elemens you can make liquid layouts, scaleable text and horizontal spacing for tableless layouts with images and text.

CSS element with scalable font-size

Make text scaleable for all browsers also in Internet Explorer.
Test with IE menu View, submenu Text Size.

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

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

CSS elements color and background-color

Simple example for text with different colors.

red text
green text
blue text

  .redtext {
    font-size: 1em;
    color: #ff0000;
    background-color: #ffffff;
  }	  
  .greentext {
    font-size: 1em;
    color: #00ff00;
    background-color: #ffffff;
  }	  
  .bluetext {
    font-size: 1em;
    color: #0000ff;
    background-color: #ffffff;
  }	
    

CSS element word-spacing

Allows you to specify the distance between the words of a text. The first text line is not formatted, but the second line.

text text text text text
text text text text text

  .wortabstand {
    word-spacing: 0.5em;
  }	
    

CSS element float

Tableless horizont spacing of images or text.

  .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;
  }