Wie kann ich HTML und CSS in zwei dateien miteinander verbinden?

6 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

Du schreibst in den HEAD der html Datei Bereich  folgende Zeile rein: 

<link rel="stylesheet" href="stylesheet.css">

Danke für den Stern. 

0

Bevor du dich um das Einbinden von Dateien kümmerst, erst einmal eine sinnvolle Verzeichnisstruktur für dein Projekt respektive deine Seite anlegen solltest. Sprich für unterschiedliche Dateitypen einen eigenen Ordner (unten in [...] dargestellt) anlegen und dort die jeweiligen Dateien abspeichern. Das kann dann folgendermaßen ausschauen.

index.html
- [assets]
- - [css]
- - - style.css
- - [js]
- - - functions.js
- - [img]
- - - image.jpg

Eingebunden werden externe Stylesheets im Kopfbereich (Head) einer Seite. Dafür wird wird ein Link-Element verwendet, mit dem man auf die gewünschte Datei verweist bzw. diese referenziert. Hier ein Beispiel, unter Berücksichtung der zuvor gezeigten Verzeichnisstruktur:

<link rel="stylesheet" href="assets/css/style.css">

Wenn das externe Stylesheet auf der selbe Ebene wie dein HTML-Dokument liegt, der Pfad entsprechend angepasst werden muss. In dem Fall dann direkt referenzierst:

<link rel="stylesheet" href="style.css">

Es können auch mehrere unterschiedliche Stylesheets direkt im Head-Bereich oder via CSS mit @import hinzugefügt werden. Jedes weitere Stylesheet jedoch mindestens einen zusätzlichen HTTP-Request verursacht und daher allein aus Performance-Gründen von abrate. 

Neben reinem CSS gibt es auch CSS Preprocessor wie Sass, Less oder Stylus. Mit Hilfe eines solchen Preprocessors können Features und Funktionen genutzt werden, die mit reinem CSS nicht möglich sind. Jedoch wird auch bei einem CSS Preprocessor am Ende ein CSS zur Laufzeitumgebung kompiliert. 

Hier jetzt jedoch nicht weiter auf die Möglichkeiten eines Preprocessors eingehe, da dich genau das 1. wohl unnötig verwirren würde und 2. dir erst einmal die essentiellen HTML und CSS Grundlagen aneignen solltest. Wenn das sitzt ja immer noch dein Wissen weiter vertiefen kannst. 

LG medmonk 




Also eigentlich geht das (bei HTML5) so:

<link rel="stylesheet" type="text/css" href="foo/bar.css">

Aber wenn du ein richtig hipper © Webdeveloper ® in einem innovativen Startup ™ aus Berlin-Mitte bist, dann nimmst du dafür lieber jQuery oder irgendein anderes JS-Framework, das gerade angesagt ist und auf jeden Pups losgelassen wird, auch WENN es wirkt, als würdest du mit Kanonen auf Spatzen schießen. (Denn als hipper Webdeveloper weiß man, dass unendlich Bandbreite vorhanden ist, Deutschland eine 1A Netzabdeckung hat und sowieso alle mit Glasfaser unterwegs sind.)

Hauptsache ist, dass dabei so viel aufgeblasener Code von so vielen Drittanbietern nachgeladen wird, wie nur irgend möglich ... am besten mit AJAX-Code aus einem anderen Framework, der von einem Drittdrittserver nachgeladen wird.

Aber falls du nur ein popeliger Anfänger bist, geht das auch so, wie im obigen Codeschnipsel. ><

Was möchtest Du wissen?