[Tutorial] CSS Datei (extern/intern) in HTML Dokument einbinden

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

    • [Tutorial] CSS Datei (extern/intern) in HTML Dokument einbinden

      Hallo Community,

      das hier ist mein erstes Tutorial zu HTML / CSS.
      Ich hoffe ich kann einigen Web Programmieren hiermit weiterhelfen. :-)

      Worum geht's?:

      In diesem Tutorial geht es da drum, eine CSS Datei in ein HTML Dokument einzubinden oder CSS Befehle in einer HTML Datei anzusprechen. Hierbei unterscheidet man unter:


      • External style sheet

      • Internal style sheet

      • Inline style



      Was wird benötigt?:

      Benötigt wird jedeglich:
      • ein HTML Editor (ich empfehle PSPad o. Notepad ++)
      • gesunden Menschlichen Verstand


      Legen wir los:

      Nach der Erstellung eines HTML Dokuments in eurem Editor, wird die Vorlage ungefähr so aussehen:

      HTML-Quellcode

      1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
      2. <html>
      3. <head>
      4. <meta http-equiv="content-type" content="text/html; charset=windows-1250">
      5. <title></title>
      6. </head>
      7. <body>
      8. </body>
      9. </html>


      [*Vorlage PSPad]

      Es gibt nun verschiedene Arten, CSS Befehle anzusprechen, die erste werde ich nun erklären:

      Externe CSS-Datei (External style sheet):

      In dem <head> Bereich einer HTML Datei, werden Befehle ausgeführt, die auf der eigentlichen Homepage nicht direkt angezeigt werden. Wie z.B. CSS Befehle.
      Eine externe CSS Datei, die auf dem Server liegt spricht man so an:

      Quellcode

      1. <[COLOR=#2f4f4f]link rel="stylesheet"[/COLOR] [COLOR=#0000ff]type="text/css"[/COLOR] href="[COLOR=#ff0000][B]PFAD ZUR CSS-DATEI[/B][/COLOR]">


      Dieser Befehl muss irgendwo zwischen <head> und </head> eingefügt werden.

      Kurze Erklärung:
      Mitlink rel="stylesheet", das gibt sozugsagen die "Beziehung" zwischen dem aktuellen Dokument und der verknüpften CSS-Datei an.

      Mit type="text/css", wird der MIME-Typ der verknüpften Datei bestimmt.
      &
      Mit href="PFAD ZUR CSS-DATEI", gibt man den Speicherort der CSS-Datei an.

      --

      Wenn ihr das gemacht habt, könnt ihr in eurer externen CSS-Datei, eure Befehle ausführen.

      Interne CSS-Befehle (Internal style sheet):

      Wieder schauen wir in den <head></head> Bereich.
      Diesmal brauchen wir aber keinen "Link" womit wir die Datei ansprechen, da es bei dieser Methode keine CSS-Datei gibt. :P

      In den <head></head> schreiben wir nun folgendes:

      Quellcode

      1. <style type="text/css">
      2. [COLOR=#ff0000][B]CSS BEFEHLE[/B][/COLOR]
      3. </style>


      Hier könnt ihr nun alle eure Befehle, die ihr eigentlich in eine CSS-Datei geschrieben hättet, in eurem HTML Dokument runter rattern.

      Nachteil: Dadurch hat man viel zu viel Quellcode.

      Erklärung: Mit type="text/css", wird der MIME-Typ angesprochen.

      Inline style:

      Mit 'Inline style' wird nichts im <head></head> Bereich gemacht.
      Hier spricht man jeden HTML Befehl einzelnd an, wodurch man auch wieder viel Quellcode hat.

      Wir schauen hierbei auf den <body></body>, wo alles was auf der Homepage zu sehen ist, drin steht.

      Beispiel:

      Quellcode

      1. <p style="color:blue;">Dies ist ein Beispiel für einen blauen Text.</p>
      Diese Schrift wird nun blau angezeigt.
      Kurze Erklärung:

      Der Befehl <p></p> ist an normaler HTML Befehl womit man einen Text/Satz o.ä. schreibt. Nicht unbedingt notwendig.

      Mit <p style="color:blue;">wird dem HTML Befehl gesagt, das er alles was in dem <p> drin steht, spricht alles was zwischen <p></p> steht, in blau angezeigt werden soll.

      --

      Ich empfehle die erste Methode eine CSS-Datei anzusprechen - externe CSS-Datei, da es viel Quellcode in der HTML Datei spart.

      Bei fragen könnt ihr euch gerne an mich wenden, ich werde versuchen sie schnellst möglich zu beantworten. :-)

      War jetzt zwar ein einfaches Tutorial aber für neulinge die gerade im Bereich HTML - CSS angefangen sind, hoffentlich hilfreich.

      - z0r
    • Werbung zur Unterstützung des Forums ( Bitte AddBlocker deaktivieren )