CSS - Cascading Style Sheets

Unformatierte HTML-Seiten wirken auf den Betrachter völlig trostlos. Schöne Farben, passende Schriftarten, angemessene Textgrößen und viele andere Formatierungen sind Selbstverständlichkeiten, die Sie als Internet-Benutzer erwarten. Formatieren bedeutet z.B. ...
  • Wie bekomme ich meinen Text in die Mitte der Seite?
  • Was muss ich tun, um ein Hintergrundbild einzubringen?
  • Wie kann ich die Textgröße ändern?
Die Lösung zu all diesen Problemen finden Sie bei den Cascading Style Sheets (CSS). Cascading Style Sheets dienen ausschließlich zum Formatieren von HTML-Seiten. Jedes HTML-Tag können Sie mit CSS-Formatierungsanweisungen individuell gestalten, indem Sie eine Eigenschaft entsprechend Ihrer Vorstellungen ändern, z.B. wie folgt:
<span style="color: red">roter</span> Text
Im Beispiel wird die im Browser voreingestellte Eigenschaft schwarzer Text für das Wort 'rot' auf rot geändert. 'roter' wird vom Browser also entsprechend rot angezeigt. Besser ist es, solche Formatierungen im Header der Datei vorzunehmen, da so eine bessere Übersicht über alle Formatierungen in der Seite gewährleistet ist.

Im head-Tag der HTML-Datei finden Sie zu Formatierungszwecken das style-Tag, welches alle CSS-Formatierungsanweisungen enthält:
<style type="text/css">
 
   /* Hier stehen alle CSS-Formatierungen! */
 
</style>
Das obige Beispiel "roter Text", welcher mit einem span-Tag realisiert wurde, sieht in dieser zu bevorzugenden Schreibweise dann wie folgt aus:
<style type="text/css">
 
   span
   {
     color: red;
   }
 
</style>
Das zugehörige span-Tag im Body der Seite lautet dann nur noch:
<span>roter</span> Text
Wenn Sie z.B. die ganze HTML-Seite mit einem neuen Schrifttyp versehen wollen, so benötigen Sie eine Formatierung für das body-Tag, welche den Schrifttyp enthält. Das sieht dann z.B. wie folgt aus:
body
{
  font-family      : Arial, Helvetica, sans-serif;
}
Die obige Angabe ist eine CSS-Formatierung, welche für den gesamten Bereich des body-Tags Gültigkeit hat. Es soll der Schrifttyp Arial verwendet werden. Falls dieser Schrifttyp auf dem Zielsystem nicht verfügbar ist, so soll der Schrifttyp Helvetica verwendet werden. Wenn auch dieser nicht vorhanden ist, so soll irgendein anderer Schrifttyp "ohne Schnörkel" zum Einsatz kommen, d.h. sans-serif.
Auch die Inhalte anderer Tags können genau so formatiert werden, wie z.B. Überschriften:
h1
{
  font-size:  2em;
}
Weitere Beispiele folgen ...

Ein Hintergrundbild einbinden

body
{
    background-image: url('beispiel.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
}
Die Datei 'beispiel.png' enthält das auf der Seite anzuzeigende Hintergrundbild. Es soll nur einmal angezeigt werden, d.h. no-repeat lautet die entsprechende CSS-Anweisung. Wenn das Bild beim Scrollen nicht bewegt werden soll, so ist es zusätzlich notwendig, das Bild zu fixieren. Auch diese Fixierung können Sie als Anweisung im obigen Beispiel erkennen. Beim Scrollen werden jetzt nur noch die nicht fixierten Inhalte der Seite bewegt.

Positionierung eines Absatzes mit div

(siehe top, left, height, width)
...
     div
     {
       position: absolute;
       top: 200px;
       left: 150px;
       height: 100px;
       width: 100px;
       color: #00ff00;
       background-color: #777777;
     }
...
 
<div>
  sdfasdf
</div>
...

Positionierungen mit "float"

siehe: http://www.w3schools.com/css/css_float.asp

Text-Schatten

Texte lassen sich mit einfachen CSS-Mitteln 'aufhübschen'. Die übertragene Datenmenge ist verhältnismäßig klein zu Bilddateien aus Photoshop (z.B. PNG, JPG, GIF), welche in der Regel schlechter aussehen und sich weniger gut mit anderen HTML-Elementen vertragen.
text-shadow:
      -1px -1px 1px green,
      15px -10px 2px blue,
      -2px 1px 3px red,
      20px 13px 5px yellow;

siehe:

Andere Layout/Formatierungen mit CSS

Auch hier finden Sie gute Erläuterungen zur Funktionsweise von CSS:
und weitere interessante Attribute (Eigenschaften) hier:
<style type="text/css" media="screen">
 
    body
    {
      border           : 1px solid #666699;
      background-color : yellow;
      font-family      : Arial, Helvetica, sans-serif;
    }
 
    h1
    {
      border-bottom    : 4px double blue;
      padding          : 1em;
      margin           : 0em;
    }
 
    h2
    {
      border-top       : 1px solid green;
      border-bottom    : 1px solid green;
      margin-top       : 1em;
      text-align       : center;
    }
 
    div
    {
      line-height      : 150%;
      margin-top       : 0.5em;
      margin-right     : 1em;
      margin-left      : 1em;
      margin-bottom    : 2em;
    }
 
    div.info
    {
      border           : 1px solid gray;
      background-color : #E0E0E0;
      padding          : 4px;
      margin           : 1em;
      float            : right;
    }
 
    div.quellen
    {
      font-style:      : italic;
      float            : right;
    }
 
    span.rahmen
    {
      border           : 2px solid red;
      font-weight      : bold;
    }
 
    img.bild1
    {
      width            : 536px;
      height           : 200px;
      float            : left;
      border-style     : outset;
      border-width     : 2em;
      border-color     : #ABBCCD;
      margin           : 1em;
    }
 
    body:after
    {
      content:'';
      display:block;
      clear:both;
    }
 
  </style>


Gitarren Akkord mit CSS
Unter http://www.jamplay.com/tools/guitar-chords fand ich Gitarren Akkorde, welche mit CSS sehr ordentlich dargestellt wurden!
GitarrenAkkordBeispiel.png
Für die Darstellung des Akkords muss man noch die im folgenden Beispiel genutzte CSS-Library und die verwendeten Gif- und Png-Dateien von der angegebenen Website laden.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
 
  <!-- siehe auch http://www.jamplay.com/tools/guitar-chords -->
  <!-- z.B.
    http://www.jamplay.com/tools/guitar-chords/1-standard/6-f/129-7add11 -->
 
  <title>Gitarren Akkord</title>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
  <link href="chord_library.css" rel="stylesheet" type="text/css" />
 
</head>
 
<body>
 
  <h1>Gitarren Akkord</h1>
 
  <div class="newchord">
 
    <ul class="status">
      <li>X</li>
      <li>X</li>
      <li>&nbsp;</li>
      <li>&nbsp;</li>
      <li>O</li>
      <li class="hack">O</li>
    </ul>
 
    <p>
      <span>2</span>
      <span>3</span>
      <span>4</span>
      <span>5</span>
      <span>6</span>
    </p>
 
    <div class="thischord">
 
      <div class="grid">
        <img src="chord-grid.gif" width="146" height="166" alt="" />
      </div>
 
      <img src="open.gif" class="open" width="29" height="26" alt="" />
      <img src="open.gif" class="open" width="29" height="26" alt="" />
      <img src="3.png"    class="s4f3" width="29" height="26" alt="" />
      <img src="2.png"    class="s3f2" width="29" height="26" alt="" />
      <img src="open.gif" class="open" width="29" height="26" alt="" />
      <img src="open.gif" class="open" width="29" height="26" alt="" />
 
    </div>
 
    <ul>
      <li class="open-note">&nbsp;</li>
      <li class="open-note">&nbsp;</li>
      <li>F#</li>
      <li>A#</li>
      <li>B</li>
      <li>E</li>
    </ul>
 
  </div>
 
</body>
 
</html>
 

Interessante Links zum Thema

Responsive Web-Design:
Effekte:
CSS3: