In HTML gibst du deiner Webseite die grundlegende Struktur – Du ordnest deine verschiedenen Elemente an und anderen Elementen unter, und schaffst so deine Hierarchie. Nicht mehr und nicht weniger.
Mit CSS gibst du deinen Elementen ihre Form und Farbe, lässt sie auf kleineren Bildschirmen wachsen oder durchs Bild fliegen.
Hier habe ich einen ausführlichen Leitfaden zu dem ganzen Thema für dich.
Beispiel:
Nehmen wir an, du hast ein einfaches DIV-Element <div> in deinem HTML-Code, und möchtest, dass dieses Element 100 Pixel breit und hoch wird und blaue Farbe bekommt.
Hier wäre dein HTML dazu:
<html>
<head>
</head>
<body>
<div> </div>
</body>
</html>
Jetzt hast du drei Möglichkeiten, die alle essenziell das Gleiche machen:
Eine externe CSS-Datei
Du erstellst eine Datei mit der Endung .css, und bindest sie mit einem meta-tag in dein HTML-Dokument ein.
Das Meta-Tag zum Einbinden sieht so aus, und kommt in den HEAD-Bereich deines HTML-Dokuments:
<head>
<link rel="stylesheet" type="text/css" href="style.css" media="screen"> </link>
</head>
Im Href-Attribut des Meta-Tags schreibst du den Pfad zu deinem HTML-Dokument.
Das HTML-Style-Tag
Du schreibst deine CSS-Regeln in ein <style>-Tag im HEAD-Bereich deines HTML-Skripts.
Das Style-Attribut
Du fügst deinem Element die Style-Regel direkt über das style-Attribut hinzu. Das ist sinnvoll, wenn dein Element ein bis zwei spezielle, einzigartige Style-Regeln braucht.
In externer CSS-Datei (Eingebunden durch Meta-Tag in HTML-head):
div {
width: 100px;
height: 100px;
background-color: blue;
}
Im Style-Tag im HTML:
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
Mit Style-Attribut des Elements:
<div style="width: 100px; height: 100px; background-color: blue;"> </div>