CSS Grundlagen

HTML / CSS Jan 21, 2024 0 Add to Reading List

Insgesamt gibt es deren drei, um Stylesheet-Anweisungen in ein HTML-Dokument einzubinden. Warum man sich weswegen wofür entscheidet, wird hier weiter unten gezeigt.

Innerhalb eines HTML-Dokuments

Dies geschieht mit dem HTML-Attribut style, das man bei praktisch jedem HTML-Tag einsetzen kann.


<p style="...">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

Dies wird auch als Inline-Style bezeichnet und sollte nur in Ausnahmefällen(!) benutzt werden.

Innerhalb eines HTML-Dokuments

Hier wird normalerweise im Head-Bereich mit dem <style>-Tag ein Bereich definiert, in dem wir alle(!) unsere CSS-Anweisungen unterbringen.


<html>
  <head>
    <style type="text/css">
    body {background-color: #333333;}
    p {color: #ffffff; font-size: 18px;}
      a {color: #eee;}
      ...
    </style>
  </head>  
  <body>  
  
  </body>
  </html>

In einer separaten Stylesheet-Datei

Hierbei verweist man über das <link>-Tag auf eine externe CSS-Datei. Der Vorteil liegt dabei auf der Hand. Man kann all seine Anweisungen an zentraler Stelle sammeln und Änderungen innerhalb dieser CSS-Datei gelten automatisch für das ganze Projekt. Die Syntax dafür sieht zum Beispiel so aus:

Datei: index.html
Datei: style.css


    // Index.html
    
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>  
  <body>  
  
  </body>
  </html>


    // style.css
    
    /* Eingebaute Kommentare */
body {background-color: #333333;}
p {color: #ffffff; font-size: 18px;}
a {color: #eee;}

Dabei gelten ein paar Regeln. Die Stylesheet-Datei muss aus reinem Text bestehen und darf nur CSS-Anweisungen und Kommentare enthalten. Das nennt man dann External- oder Seperate-Style.

Weitere Möglichkeiten der Strukturierung

Bei größeren Internet-Projekten die CSS-Anweisungen ziemlich schnell anschwellen, verliert man irgendwann den Überblick. Eine Alternative bietet das CSS-Element @import.

Damit kann man in einer zentralen CSS-Datei, die über das <link>-Tag eingebunden wird, noch mal unterschiedliche CSS-Dateien einbinden. Die zentrale Datei sieht dann zum Beispiel so aus:


    // style.css in einem separaten Ordner "css"   
    // Im html head die Pfadangabe auch anpassen "css/style.css"
    
    @import url(css/dark.css);
    @import url(css/table.css);
    @import url(css/style.css);
    @import url(css/theme.css);

Alle Pfadangaben erfolgen relativ zur zentralen CSS-Datei. Man kann so zum Beispiel die Anweisungen nach Ihrer "Art" unterteilen. Alle Link-Definitionen in eine Datei, alle HTML-Definitionen in eine weitere und so weiter.