Einbinden von Externen Cascading Style Sheet Datei

warning Wichtige Hinweise warning

Bitte achte stets darauf, dass die Tutorials und Anleitungen, die hier erklärt werden, nicht in der Praxis eingesetzt werden können.
Für etwaige schäden haftet der Administrator nicht. Für mehr Informationen klicke bitte > hier <

Damit in der index.html oder index.php nicht zu viele Cascading Style Sheets auftauchen, was ja auch die Datei unübersichtlich macht. Hat man die Möglichkeit, mithilfe von CSS Klassen und CSS IDs. Die Style Codes in eine externe Datei zu definieren und diese dann in verkürzter form, in die HTML webseite rein zu schreiben. Ein Beispiel wäre ohne CSS Datei einzubinden:


<span style="color:#FFFFFF;margin-left:10px;font-weight:bold;padding-top:10px;">Text</span>


Und hier ein Beispiel mit der definierten Variable in der CSS Datei:

<span class="spezialText">Text</span>


Man sieht eindeutig den unterschied, hier habe ich den klassen Namen "spezialText" benutzt. Ihr könnt natürlich jeden beliebigen Variablen namen nehmen, die Ihr wollt. Es gibt sogar die möglichkeit es als ID zu nutzen. Ich würde eher empfehlen bei den styles die Klassen zu nutzen.


So damit die Cascading Style Sheets von einer externen Datei geladen werden kann, muss diese Datei erstmal erstellt werden, diese muss mit der Endung ".css" enden. Ansonsten wird es nicht erkannt. Ich mache immer bei jedem Projekt eine "app.css" Datei oder "default.css" Datei oder "custom.css" Datei. Diese soll bedeuten, dass hier etwas spezifisch nur für einen Webprojekt erstellt CSS Datei ist.

Diese Einbindung wird zwischem dem Tag "Header" gemacht. Hier ist ein Beispiel anhand eines Grundgerüsts:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebTutorialz - Titel der Webseite</title>
    <link rel="stylesheet" type="text/css" href="app.css">
  </head>
  <body>
     <p>Hallo Web-Tutorialz</p>
  </body>
</html>


So nun ist damit die Cascding Stylesheet Datei eingebunden. So ist die Index Datei erstmal übersichtlich geblieben und man kann erstellte klassen auch mehrmals in der HTML Seite nutzen.