CSS in HTML einbinden: So funktioniert es
Hauptpunkte aus diesem Artikel:
- Das <link>-Tag, platziert im <head>-Bereich eines HTML-Dokuments, wird verwendet, um CSS-Dateien zu verlinken.
- Attribute des <link>-Tags beinhalten rel=”stylesheet”, um die Beziehung zwischen HTML und der verlinkten Datei zu definieren, und type=”text/css”, um den Stylesheet-Typ zu spezifizieren.
- Das href-Attribut wird verwendet, um den Pfad zur CSS-Datei anzugeben.
HTML (HyperText Markup Language) und CSS (Cascading Style Sheet) sind die Kernsprachen der Webentwicklung. HTML bestimmt den Inhalt und die Struktur einer Webseite, während CSS das Design und die Präsentation bestimmt. Wenn Sie beide Sprachen zusammen verwenden, können Sie eine gut strukturierte und funktionale Webseite erstellen.
CSS definiert Stil-Deklarationen und wendet sie auf HTML-Dokumente an. Es gibt drei verschiedene Möglichkeiten, CSS mit HTML zu verknüpfen, basierend auf drei verschiedenen Arten von CSS-Stilen:
- Inline: Verwendet das Style-Attribut innerhalb eines HTML-Elements
- Intern: Geschrieben im <head>-Abschnitt einer HTML-Datei
- Extern: Verknüpft ein HTML-Dokument mit einer externen CSS-Datei
Dieser Artikel konzentriert sich auf das Verknüpfen von externem CSS mit einer HTML-Datei, was Ihnen ermöglicht, das Aussehen Ihrer gesamten Website mit nur einer Datei zu ändern. Darüber hinaus werden wir eine umfassende Erklärung von CSS und seinen Vorteilen liefern.
Inhaltsverzeichnis
So verknüpfen Sie CSS extern mit einer HTML-Datei
Obwohl es mehrere Ansätze gibt, CSS mit einer HTML-Datei zu verknüpfen, ist der effizienteste Weg, ein externes Stylesheet mit einem HTML-Dokument zu verknüpfen. Es erfordert ein separates Dokument mit einer .css-Endung, das ausschließlich alle CSS-Regeln ohne HTML-Tags enthält.
Im Gegensatz zu internen und Inline-Stilen ändert diese Methode viele HTML-Seiten durch die Bearbeitung einer CSS-Datei. Es spart Zeit – es besteht keine Notwendigkeit, jede CSS-Eigenschaft auf jeder HTML-Seite einer Website zu ändern.
Beginnen Sie damit, Stylesheets mit HTML-Dateien zu verknüpfen, indem Sie ein externes CSS-Dokument mit einem HTML-Texteditor erstellen und CSS-Regeln hinzufügen. Hier sind beispielsweise die Stilregeln von example.css:
body {
background-color: yellow;
}
h1 {
color: blue;
margin-right: 30px;
}
Stellen Sie sicher, dass Sie keinen Abstand zwischen dem Eigenschaftswert hinzufügen. Zum Beispiel, anstatt margin-right: 30px sollten Sie nicht margin-right: 30 px schreiben.
Verwenden Sie dann das <link>-Tag im <head> -Abschnitt Ihrer HTML-Seite, um eine CSS-Datei mit einem HTML-Dokument zu verknüpfen. Geben Sie als nächstes den Namen Ihrer externen CSS-Datei an. In diesem Fall ist es example.css, daher sieht der Code wie folgt aus:
<head> <link rel="stylesheet" type="text/css" href="example.css" media=”screen” /> </head>
Für ein besseres Verständnis finden Sie hier eine Aufschlüsselung der Attribute, die im <link>-Tag enthalten sind:
- rel: Definiert die Beziehung zwischen dem verlinkten Dokument und dem aktuellen. Verwenden Sie das rel-Attribut nur, wenn das href-Attribut vorhanden ist.
- type: Bestimmt den Inhalt der verlinkten Datei oder des Dokuments zwischen den Tags <style> und </style>. Sie haben text oder css als Standardwert.
- href: Gibt den Ort der CSS-Datei an, die Sie mit dem HTML verknüpfen möchten. Wenn sowohl HTML- als auch CSS-Dateien im selben Ordner sind, geben Sie nur den Dateinamen ein. Andernfalls geben Sie den Ordnernamen an, in dem Sie die CSS-Datei speichern.
- media: Beschreibt die Art der Medien, für die die CSS-Stile optimiert sind. In diesem Beispiel setzen wir screen als Attributwert ein, um seine Verwendung für Computerbildschirme zu implizieren. Um die CSS-Regeln auf gedruckte Seiten anzuwenden, setzen Sie den Wert auf print.
Sobald Sie das <link>-Element in Ihrer HTML-Datei eingefügt haben, speichern Sie die Änderungen und geben Sie die URL Ihrer Website in Ihren Webbrowser ein. In der CSS-Datei geschriebene Stile sollten das Aussehen der Webseite ändern.
Obwohl externes CSS die Webentwicklung erleichtert, gibt es einige Dinge zu beachten, dass HTML-Seiten möglicherweise nicht richtig gerendert werden, bevor das externe Stylesheet geladen ist. Darüber hinaus kann das Verlinken zu mehreren CSS-Dokumenten die Ladezeit Ihrer Webseite erhöhen.
In diesem Zusammenhang könnte es besser sein, die Inline-Stil-Methode zu verwenden, wenn Sie ein bestimmtes HTML-Element bearbeiten möchten. Gleichzeitig könnte der interne oder eingebettete Stil ideal sein, um CSS-Regeln auf einer einzelnen Seite anzuwenden.
Gründe für die Verwendung von CSS
CSS ist eine Stylesheet-Sprache, die die visuelle Darstellung einer Webseite verwaltet. Es besteht aus einer Liste von Formatierungsregeln zum Gestalten von Elementen, die in Markup-Sprachen wie HTML geschrieben sind. Darüber hinaus definiert CSS die Anzeige von HTML-Elementen auf verschiedenen Medientypen, wie beispielsweise projizierten Präsentationen oder fernsehähnlichen Geräten.
Immer wenn ein Browser ein Stylesheet findet, wird er die HTML-Datei entsprechend den bereitgestellten Stilinformationen umwandeln. Daher ist es wichtig, CSS mit einer HTML-Datei zu verknüpfen, um Ihrer Website ein ansprechenderes Aussehen auf verschiedenen Geräten zu geben.
Andere Vorteile der Verknüpfung einer CSS-Datei mit einem HTML-Dokument sind:
- Konsistentes Design. Behält die Formatierung und das Design auf der gesamten Webseite bei. Eine einzelne Anpassung an CSS-Regeln kann universell auf mehrere Bereiche einer Website angewendet werden.
- Schnellere Ladezeit. Es wird nur eine einzige CSS-Datei benötigt, um alle HTML-Dateien zu gestalten. Mit weniger Codezeilen kann eine Website schneller laden. Die Website wird auch die CSS-Datei für den nächsten Besuch Ihrer Besucher zwischenspeichern.
- SEO-Verbesserung. Das Speichern von CSS-Stilen in einer anderen Datei macht die HTML-Datei übersichtlicher und organisierter. Als Ergebnis wird die Website einen saubereren und leichteren Code haben, wodurch die Suchmaschinen sie besser crawlen können.
Andererseits hat CSS mehrere Nachteile, wie zum Beispiel:
- Kommt in mehreren Stufen. Das CSS-Stylesheet hat drei Ebenen. Solche unterschiedlichen Rahmenbedingungen können verwirrend sein, insbesondere für Anfänger.
- Kompatibilitätsprobleme. Einige Stylesheets funktionieren möglicherweise nicht auf bestimmten Browsern, da verschiedene Browser CSS unterschiedlich lesen. Verwenden Sie CSS- und HTML-Code-Validatoren, um diese Probleme zu vermeiden.
- Anfällig für Angriffe. Die Open-Source-Natur von CSS kann das Risiko von Cyberangriffen erhöhen. Zum Beispiel könnte eine Person mit Zugang zur CSS-Datei bösartigen Code schreiben oder private Daten stehlen. Allerdings können richtige Sicherheitspraktiken dieses Problem verhindern.
Alles in allem spielt CSS eine wichtige Rolle beim Entwerfen einer Website. Es steuert die Formatierung verschiedener Elemente auf einer Webseite, wie Schriftarten, Hintergrundfarben und Objektpositionen. Mit der richtigen Anwendung von CSS und HTML kann eine Website ein optimiertes Benutzererlebnis bieten.
Fazit
CSS-Regeln in HTML-Elemente einzubetten kann zeit- und energieaufwendig sein. Glücklicherweise machen externe Stylesheets den Prozess effizienter.
Externe CSS-Stylesheets sind Dokumente, die eine Liste von Stilregeln enthalten. Verknüpfen Sie sie mit einem HTML-Dokument, und Sie werden in der Lage sein, mehrere Seiten auf einmal zu ändern, Code-Aufblähung zu vermeiden und Ihre HTML-Struktur sauber zu halten.
Wir hoffen, dass das Wissen, wie man Ihre Webseite einrichtet, indem man CSS einfach mit HTML verknüpft, Ihnen Zeit spart, um sich mehr auf die Steigerung des Traffics zu konzentrieren.
CSS in HTML einbinden FAQ
Wie verknüpfe ich HTML mit CSS in HTML?
Um HTML mit CSS in Ihrer HTML-Datei zu verknüpfen, müssen Sie Link-Tags mit den richtigen Attributen verwenden. Denken Sie daran, dass das Link-Tag als selbstschließendes Tag im Kopfbereich Ihrer HTML-Datei eingefügt werden sollte.
Warum verbindet sich mein CSS nicht mit HTML?
Überprüfen Sie, ob Ihre Dateien im selben Ordner sind, wenn Sie Probleme haben, Ihr CSS mit HTML zu verknüpfen. Überprüfen Sie, ob der Dateipfad korrekt ist, wenn die CSS-Datei in einem anderen Ordner liegt.
Vera ist eine erfahrene Lokalisierungs-Spezialistin bei Hostinger und optimiert erfolgreich Inhalte für globale Zielgruppen. Dank ihres umfassenden SEO-Wissens sorgt sie dafür, dass Hostingers Webhosting-Dienste für ein breites Publikum sichtbar, zugänglich und attraktiv sind. Mit Kreativität mit Präzision überwindet sie Sprachbarrieren in ihren Projekten und trägt so dazu bei, Hostingers Reichweite zu vergrößern und Kunden weltweit ein nahtloses Erlebnis zu bieten.
