Manfred Bänder

Einführung in CSS

Diese Sprache ist eine "Anzeigetypdatei", die den normalen HTML-Text in einen vom Nutzer anderen STIL ändern und anzeigen kann. CSS heißt CASCADED STYLE SHEET und sind auch quasi dem HTML-Formular kaskadiert; also funktionstechnisch angehängt.

Man unterscheidet dabei normale HTML-TAGS, Klassen oder nach ID's:

  • BODY { min-width: 100%; margin: 0; }

  • #container { display: flex; }

  • .elem { border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    padding: 0px;
    margin: 0px;
    }

  • .footer { display: grid;
    grid-template-rows:30px 30px 1fr;
    grid-template-columns:33% 33% 33%;
    background-color: lime;
    color: white;
    }

    • Eingebunden werden diese Dateien entweder direkt in der HTML-Datei oder in einer externen CSS-Datei in verschiedene dafür bestimmte Verzeichnisse.

  • direkt in der HTML-Datei: im HEAD-Bereich mit den TAGS
  • extern direkt neben der HTML-Datei sich befindend<link rel="stylesheet" href="main.css">
  • extern direkt neben der HTML-Datei sich befindend<link rel="stylesheet" href="./css/main.css">

    • Ein ganz einfaches Formular sieht dann mit dem direkt im Formular geschriebenen Text erst Mal so aus:

    1. <HTML>
    2. <HEAD>
    3. <TITLE>TEST</TITLE>
    4. <STYLE>
      5. BODY{
      min-width: 100%;
      margin: 0;
      }
    5. </STYLE>
    6. </HEAD>
    7. <BODY>
    8. TEXT
    9. </BODY>
    10. </HTML>

    Ein ganz einfaches Formular sieht dann mit einer externen Datei so aus:

  • <HTML>
  • <HEAD>
  • <TITLE>TEST</TITLE>
  • <link rel="stylesheet" href="main.css">
  • </HEAD>
  • <BODY>
  • TEXT
  • </BODY>
  • </HTML>

    • Ein Formular kann auch so aussehen mit einer externen Datei so aus:

  • <HTML>
  • <HEAD>
  • <TITLE>TEST</TITLE>
  • <link rel="stylesheet" href="main.css">
  • <STYLE>
  • </STYLE>
  • </HEAD>
  • <BODY>
  • TEXT
  • </BODY>
  • </HTML>

    • Die MAIN.CSS wird dann direkt im gleichen Verzeichnis gespeichert und auch dann vom HTML-Formular auch da gefunden!; und so sieht dann der Text in dieser CSS-Datei aus!.

    BODY{
    min-width: 100%;
    margin: 0;
    }

    Soll die MAIN.CSS in ein extra Verzeichnis gespeichert werden; - standardmäßig lautet dann der Verzeichnisname [CSS] und lautet dann bezugnehmend auf das Verzeichnis CSS <link rel="stylesheet" href="./css/main.css">

    Der Punkt innerhalb der href-Position zeigt an: Suche die Datei im Verzeichnis CSS, welches direkt im Grundverzeichnis [ROOT] unterhalb steht.

    Ist diese nicht da; wird gar nichts angezeigt, weil leere STYLE SHEETS ändern in der Regel nichts an der existierenden HTML-Datei. Eine Fehleranzeige gibt es nur in dem Sinne der Anzeige direkt, dass es gegenüber der CSS-Anweisung eine Andere als die Gewünschte ergibt.

    Das gilt generell so auf der ganzen Welt!