Beispiel - CSS in einer externe Datei auslagern

Beispiel - Einbindung vom Media-Type seit HTML 5 nicht mehr nötigt

um CSS Styles in ein HTML Dokument einzubinden,
wird nur der style-Tag im Header deklariert.

Früher habe ich die Einbindung von CSS noch mit dem Media-Type deffiniert:


        <style type="text/css">
                 ...myCss
        </style>

Seit HTML 5 ist die Angabe des Media-Type nicht mehr nötig
und es reicht die einfache deffinition aus:

        <style>
                 ...myCss
        </style>

Grundsätzlich beziehen sich alle im HTML-Header deffinierten CSS Formate,
immer auf das gesamte HTML Dokument.

<html>
<head>
<title>Ein einfaches HTML-Formular mit CSS-Style-Element</title>
        <style>
                .MyCss {
                        background-color: red;
                        width: 50%;
                        text-align: center;
                }
        </style>
</head>
        <body>

                <p class="MyCss">Das ist mit CSS Class formatierter Text</p>

        </body>
</html>

In der Regel bestehen Webseiten aber aus mehreren HTML Dokumenten (Unterseiten),
und dann ist es eher unpraktisch,
wenn man in jeder einzelnen HTML File die CSS-Style-deffinitionen ändern muss
wenn man nur kleine oder gar große Änderungen bei einer Formatierung vornimmt.

Denn Formatierungen für Überschriften und Schriften, Tabellen, Div und und und
sollte auf allen Unterseiten der Webseite einheitlich sein.

Man kann vielleicht man während der Entwicklung, um einfach mal was zu testen,
die die CSS-Formate direkt im Header deffinieren, oder wenn's garnicht anders geht direkt einem Objekt zuweisen.

Aber grundsätzlich sollte man sich angewöhnen,
die CSS in eine externe Datei auszulagern.
Also alle Style Sheets Formatierungsklassen dort zu deklarieren (deffinieren).
Ansonsten sucht man sich irgendwann dumm und dämlich,
wenn man individuelle CSS Formatierungen deffiniert hat.

Die CSS in eine externe Datei auslagern

Wenn man die Style-Sheets in eine zentrale Text-datei ausgelagert hat,
muss man nur im HEADER von jedem HTML-Dokument,
die Reference zur CSS-Datei mit einer relativen Pfadangebe zur CSS-Datei deffinieren
und selbstverständlich eine externe Datei
mit der Endung .CSS erstellen, Bsp: myStyle.css

Wenn man nun in allen HTML Dokumenten (Webseiten) sich auf die gleiche CSS-Datei bezieht,
und diese überall im HTML-Header deklariert hat,
wirken sich alle CSS Formatierungsänderungen gleichzeitig auf alle HTML Dokumente aus,
(wo man die externe CSS File engebunden hat)
und man muss nicht jede Datei einzeln öffnen, um ein einheitliches Webseiten Format zu haben,
oder gar bei jedem einzelen Objekt die neue CSS-Formate aktualisieren.

Hier ein Beispiel,
einer Einbindung einer externen CSS Datei: (deklaration im HTML-Header)

        <header>
                <link rel="stylesheet" href="MyStyle.css">
        </header>


In der CSS-Datei selbst, benötigt man keine HTML Struktur.
Man legt direkt mit den CSS-Formatierungen los:

         .textread {
           background-color:red;
         }

         #menu {
          background-color:blue;
          border:2px dotted yellow;
          float:left;
         }


Wenn alle CSS Formatierungen in einer externen CSS ausgelagert wurden,
ist die Einbindung der CSS Klassen im HTML Dokument recht einfach.
Hierzu braucht es nur ein HTML Tag, welchem die CSS Class zugeordnet wird.

         

Das ist die textread CSS Class Formatierung


Mann kann fest HTML Tags koplett neu mit CSS gestallten, Bsp:
<h1></h1> <h2></h2> ... oder <b></b> <i></i> usw.
oder im Hilftags verwenden, Bsp:
<div></div> <span></span> ... oder <p> </p> usw.
welche den HTML content kapseln und CSS Class zugewiesen bekommen haben.


Comments

No comments yet.

Add Comment

* Required information
(never displayed)
 
Bold Italic Underline Strike Superscript Subscript Code PHP Quote Line Bullet Numeric Link Email Image Video
 
Smile Sad Huh Laugh Mad Tongue Crying Grin Wink Scared Cool Sleep Blush Unsure Shocked
 
1000
Is ice cream hot or cold?
 
Enter answer:
Captcha
Refresh
 
Enter code:
 
Notify me of new comments via email.
 
Remember my form inputs on this computer.
 
I have read and understand the privacy policy. *
 
I have read and agree to the terms and conditions. *
 
 
Powered by Commentics