<body><\/span><\/p>\n <p><\/span>Hallo Welt!<\/span><\/p><\/span><\/p>\n <\/body><\/span><\/p>\n <\/html><\/span><\/p>\n\n\n Speichere den Code als HTML-Datei ab und \u00f6ffne die Datei im\nBrowser.<\/p>\n\n\n\n Die Website enth\u00e4lt den Satz \u201eHallo Welt!\u201c, schwarz auf wei\u00dfem Grund in der Schriftart \u201eTimes\u201c. Das sind die Grundeinstellungen des Browsers, die er verwendet, wenn er keine Designanweisungen von Dir erh\u00e4lt.<\/p>\n\n\n\n Jetzt f\u00fcgst Du Dein erstes CSS in den p-Tag ein:<\/p>\n\n\n <html><\/span><\/p>\n <body><\/span><\/p>\n <p style=“<\/span>font-family<\/span>: Arial<\/span>; font-size<\/span>: 30px<\/span>; color<\/span>: blue<\/span>;“><\/span>Hallo Welt!<\/p><\/span><\/p>\n <\/body><\/span><\/p>\n <\/html><\/span><\/p>\n\n\n Speichere Deine \u00c4nderungen und aktualisiere die Website im Browser.<\/p>\n\n\n\n Die Schrift ist nun blau, 30 Pixel hoch und in der Schriftart \u201eArial\u201c. Diese 3 \u00c4nderungen \u2013 Farbe, Gr\u00f6\u00dfe, Schriftart \u2013 sind in CSS \u00fcbersetzt color<\/span>, font-size<\/span> und font-family<\/span>. Die Syntax f\u00fcr CSS sieht immer so aus:<\/p>\n Eigenschaft<\/span> :<\/span> Wert<\/span> ;<\/span><\/strong><\/p>\n\n\n Mit font-family<\/span> w\u00e4hlst Du die Schriftart aus, das ist die Eigenschaft<\/strong><\/span>. Bedenke dabei nur Schriften zu verwenden, die auf den meisten Computern dieser Welt installiert sind. Das sind zum Beispiel \u201eArial\u201c, \u201eTimes\u201c, oder \u201eCourier\u201c\u2013 aus Sicht von CSS ist das der Wert<\/strong><\/span>. Wenn Du die Website nur f\u00fcr Dich selbst baust, kannst Du nat\u00fcrlich jede Schrift w\u00e4hlen, die auf Deinem Computer installiert ist.<\/p>\n Der Befehl font-size<\/span> stellt die Schriftgr\u00f6\u00dfe ein. In diesem Fall auf den Wert 30px<\/span>. \u201epx\u201c ist die Einheit f\u00fcr Pixel. Andere Einheiten sind zum Beispiel \u201ecm\u201c f\u00fcr Zentimeter oder \u201ept\u201c f\u00fcr Points, was der Einheit aus Programmen wie Word entspricht.<\/p>\n Der dritte Befehl color<\/span> f\u00e4rbt den Text ein. Die Farbnamen sind englisch und Dir bereits aus HTML bekannt. Alternativ kannst Du Farben auch \u00fcber den Hex-Code (Blau = #0000FF<\/span>) oder mit RGBA-Werten definieren: rgba(0, 0, 255, 0.5).<\/span> RGBA sind die 3 Grundfarben Rot, Gr\u00fcn und Blau plus ein Wert f\u00fcr die Transparenz. Rot, Gr\u00fcn und Blau werden mit Zahlen zwischen 0 (= 0% von dieser Farbe) und 255 (= 100% von dieser Farbe) definiert. Die Transparenz wird \u00fcber eine Kommazahl zwischen 0 und 1 ausgedr\u00fcckt, wobei 0 komplett transparent bedeutet und 1 komplett undurchsichtig. Bitte beachte: Im Englischen wird der Punkt statt des Kommas verwendet. Du musst also 0.5 schreiben, nicht 0,5.<\/p>\n Wenn Du keine Transparenz ben\u00f6tigst, kannst Du diese Angabe auch weglassen und nur rgb(0, 0, 255)<\/span> schreiben.<\/p>\n In diesem Tutorial k\u00f6nnen wir unm\u00f6glich alle Eigenschaften behandeln. Deshalb empfehlen wir Dir diese 3 Hilfsmittel, wenn Du weitere Befehle kennenlernen m\u00f6chtest:<\/p>\n Jeder moderne Browser hat einen speziellen Modus f\u00fcr Entwickler. In Firefox \u00f6ffnest Du diesen mit einem Rechtsklick auf irgendein Bild oder eine Textpassage in der Website und w\u00e4hlst im Kontextmen\u00fc den Punkt „Element untersuchen“ aus. Dort kannst Du Dir f\u00fcr jedes Element den zugeh\u00f6rigen Style ansehen und auch probeweise ver\u00e4ndern. Der Browser kennt alle verf\u00fcgbaren Eigenschaften f\u00fcr ein Element und hilft bei der Eingabe mit Textvervollst\u00e4ndigung.<\/p>\n Der Generator erstellt bequem die gew\u00fcnschten Styles. Du musst nur kopieren und einf\u00fcgen.<\/p>\n Die Wikipedia f\u00fcr HTML, CSS und Javascript ist gerade f\u00fcr Anf\u00e4nger unentbehrlich.<\/p>\n Hast Du Lust bekommen, eine eigene Website mit HTML und CSS zu gestalten? Oder m\u00f6chtest Du CSS nutzen, um Deine Gestaltungsm\u00f6glichkeiten bei WordPress voll auszusch\u00f6pfen?<\/p>\n\n\n Finde hier das richtige Hosting-Paket<\/a>\n\n\n\n <\/p>\n\n\n\n Unsere Sommer-Aktion bringt Dir alle zwei Wochen eine Welle mit einem neuen Angebot f\u00fcr das Paket Hosting-Basic. Aktuell bekommst Du das Paket verg\u00fcnstigt mit einer zus\u00e4tzlichen SSL Flat <\/a>\u2013 bis zur n\u00e4chsten Welle am 16.06.<\/p>\n\n\n\nZur Sommer-Aktion<\/a>\n\n\n\n <\/p>\n\n\n\n Mit einem Stylesheet trennst Du CSS und HTML, ohne die logische Verbindung zu verlieren. Die Vorteile: weniger Schreibaufwand, mehr \u00dcbersichtlichkeit und schnellere Ladezeiten.<\/p>\n\n\n\n Hinweis: Lege vorbereitend f\u00fcr alles, was jetzt kommt, eine neue leere Text-Datei an und speichere diese als \u201estylesheet.css\u201c im gleichen Verzeichnis ab, in dem Deine HTML-Datei liegt.<\/strong><\/p>\n\n\n\n In Teil 1 dieser Beitragsserie<\/a> hast Du CSS in das style-Attribut innerhalb eines HTML-Tags geschrieben. Dadurch war die Verbindung von CSS und HTML klar: \u201ediese CSS-Anweisung gilt f\u00fcr diesen HTML-Tag\u201c.<\/p>\n\n\n\n Das wird aber sp\u00e4testens dann unbequem, wenn Du die gleiche Anweisung mehr als einmal ben\u00f6tigst. Betrachte dieses Beispiel:<\/p>\n\n\n <html><\/p>\n <body><\/p>\n <h1 style=“font-family<\/span>: Arial<\/span>; font-size<\/span>: 30px<\/span>; color<\/span>: red<\/span>;“>\u00dcberschrift<\/span><\/h1><\/p>\n <p style=“font-family:<\/span> Arial<\/span>; font-size<\/span>: 16px<\/span>; color<\/span>: black<\/span>;“>Erster Absatz<\/span><\/p><\/p>\n <h2 style=“font-family<\/span>: Arial<\/span>; font-size<\/span>: 24px<\/span>; color<\/span>: orange<\/span>;“>Zweite \u00dcberschrift<\/span><\/h2><\/p>\n <p style=“font-family<\/span>: Arial<\/span>; font-size<\/span>: 16px<\/span>; color<\/span>: black<\/span>;“>Zweiter Absatz<\/span><\/p><\/p>\n <\/body><\/p>\n <\/html><\/p>\n\n\n Dieser Code enth\u00e4lt sehr viele \u00fcberfl\u00fcssige Wiederholungen; ausserdem ist er sehr un\u00fcbersichtlich geworden. Der Code f\u00fcr die beiden \u00dcberschriften hat die gleiche \u201efont-family\u201c-Einstellung und der CSS-Code f\u00fcr beide <p>-Tags ist vollkommen identisch. Diese Erkenntnis l\u00e4sst sich genauso in CSS formulieren mit sogenannten CSS-Regeln.<\/p>\n\n\n\n Eine CSS-Regel sieht immer so aus:<\/p>\n\n\n Selektor <\/span>{ Eigenschaft<\/span> : Wert<\/span> ; }<\/strong><\/p>\n\n\n Ein Selektor w\u00e4hlt HTML-Elemente aus, f\u00fcr die die nachfolgenden\nEigenschaften gelten sollen. Die einfachste Form von Selektoren ist der Name\ndes HTML-Tags, in diesem Fall zum Beispiel \u201ep\u201c, \u201eh1\u201c und \u201eh2\u201c.<\/p>\n\n\n\n Der Teil innerhalb der geschweiften Klammern ist exakt das, was Du bisher in das style-Attribut geschrieben hast. Du kannst einfach alles innerhalb der Anf\u00fchrungszeichen hinter style=<\/em> kopieren und in die geschweiften Klammern einf\u00fcgen.<\/p>\n\n\n\n Du kannst die CSS-Regel f\u00fcr die beiden <p>-Tags nun in die leere \u201estylesheet.css\u201c-Datei einf\u00fcgen:<\/p>\n\n\n p<\/span> { font-family<\/span>: Arial<\/span>; font-size<\/span>: 16px<\/span>; color<\/span>: black<\/span>; }<\/p>\n\n\n Diese CSS-Regel sagt, dass f\u00fcr alle <p>-Tags die Eigenschaften\nin den Klammern gelten.<\/p>\n\n\n\n Du hast sp\u00e4ter Vorteile, wenn Du es etwas ordentlicher formatierst:<\/p>\n\n\n p<\/span> {<\/p>\n font-family<\/span>: Arial<\/span>;<\/p>\n font-size<\/span>: 16px<\/span>;<\/p>\n color<\/span>: black<\/span>;<\/p>\n }<\/p>\n\n\n Dem Browser ist es recht egal, ob Du CSS f\u00fcr Menschen gut lesbar schreibst oder nicht. F\u00fcr sp\u00e4tere \u00c4nderungen oder eine Fehlersuche ist es jedoch besser, ein wenig auf die Form zu achten.<\/p>\n\n\n\n Jetzt brauchst Du das CSS in den style-Attributen f\u00fcr die <p>-Tags nicht mehr. Wenn Du die gleichen Schritte f\u00fcr die beiden \u00dcberschriften wiederholst, sieht der HTML-Code nun wieder ganz sauber aus:<\/p>\n\n\n <html><\/p>\n <body><\/p>\n <h1><\/span>\u00dcberschrift<\/span><\/h1><\/span><\/p>\n <p><\/span>Erster Absatz<\/span><\/p><\/span><\/p>\n <h2><\/span>Zweite \u00dcberschrift<\/span><\/h2><\/span><\/p>\n <p><\/span>Zweiter Absatz<\/span><\/p><\/span><\/p>\n <\/body><\/p>\n <\/html><\/p>\n\n\n Die \u201estylesheet.css\u201c-Datei enth\u00e4lt diesen Code:<\/p>\n\n\n p<\/span> {<\/p>\n font-family<\/span>: Arial<\/span>;<\/p>\n font-size<\/span>: 16px<\/span>;<\/p>\n color<\/span>: black<\/span>;<\/p>\n }<\/p>\n <\/p>\n h1<\/span> {<\/p>\n font-family<\/span>: Arial<\/span>;<\/p>\n font-size<\/span>: 30px<\/span>;<\/p>\n color<\/span>: red<\/span>;<\/p>\n }<\/p>\n <\/p>\n h2<\/span> {<\/p>\n font-family<\/span>: Arial<\/span>;<\/p>\n font-size<\/span>: 24px<\/span>;<\/p>\n color<\/span>: orange<\/span>;<\/p>\n }<\/p>\n\n\n Damit das \u00fcberhaupt funktioniert und alles wieder so aussieht wie vorher, musst Du noch einen entscheidenden letzten Schritt durchf\u00fchren: das Stylesheet muss geladen werden. Das passiert mit einem <link>-Tag (nicht zu verwechseln mit dem Anker <a>!).<\/p>\n\n\n\n <link> geh\u00f6rt in den Header des HTML-Dokuments, also zwischen <head> und <\/head>.<\/p>\n\n\n <html><\/p>\n <head><\/span><\/p>\n <link rel=<\/span><\/strong>„<\/strong>stylesheet<\/strong>„<\/strong> href=<\/strong>„<\/strong>stylesheet.css<\/strong>„<\/strong>><\/strong><\/span><\/p>\n <\/head><\/span><\/p>\n <body><\/p>\n <h1><\/span>\u00dcberschrift<\/span><\/h1><\/span><\/p>\n <p><\/span>Erster Absatz<\/span><\/p><\/span><\/p>\n <h2><\/span>Zweite \u00dcberschrift<\/span><\/h2><\/span><\/p>\n <p><\/span>Zweiter Absatz<\/span><\/p><\/span><\/p>\n <\/body><\/p>\n <\/html><\/p>\n\n\n Neben der Ordnung gibt es einen weiteren gro\u00dfen Vorteil f\u00fcr diese Trennung von CSS und HTML: Du kannst weitere HTML-Seiten bauen und dort das gleiche Stylesheet laden. Da der Browser das erste Laden des Stylesheets bereits im Cache hat, sparst Du dabei sogar Ladezeit.<\/p>\n\n\n\n CSS-Selektoren sind der komplexeste Teil von CSS und gehen weit \u00fcber das hinaus, was Du in diesem Tutorial gelesen hast. Wenn Du mehr wissen m\u00f6chtest, empfehlen wir Dir den CSS-Bereich von SELFHTML: https:\/\/wiki.selfhtml.org\/wiki\/CSS<\/a><\/p>\n\n\n\n <\/p>\n\n\n\n <\/p>\n\n\n\n Unsere Sommer-Aktion bringt Dir alle zwei Wochen eine Welle mit einem neuen Angebot f\u00fcr das Paket Hosting-Basic. Aktuell bekommst Du das Paket verg\u00fcnstigt mit einer zus\u00e4tzlichen SSL Flat <\/a>\u2013 bis zur n\u00e4chsten Welle am 16.06. <\/p>\n\n\n\nZur Sommer-Aktion<\/a>\n","protected":false},"excerpt":{"rendered":" M\u00f6chtest Du mehr Einfluss auf das Design Deiner Website nehmen? Oder das Design durch ein Stylesheet zentral festlegen? CSS erm\u00f6glicht Dir genau das und kann zus\u00e4tzlich noch die Ladezeit Deiner Website reduzieren, weil das Stylesheet nur einmal geladen werden muss.<\/p>\n","protected":false},"author":119,"featured_media":59608,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[485,3],"tags":[144,51,149],"acf":[],"yoast_head":"\n![\"\"](\"https:\/\/strato.de\/blog\/wp-content\/uploads\/2019\/06\/Screenshot-HTML.png\")
<\/figure>\n\n\n\nDesign anpassen mit CSS<\/h2>\n\n\n\n
![\"\"](\"https:\/\/strato.de\/blog\/wp-content\/uploads\/2019\/06\/Screenshot-Hallo-Welt.png\")
<\/figure>\n\n\nG\u00e4ngige CSS Eigenschaften<\/h2>\n\n\n
N\u00fctzliche Ressourcen im Web<\/h2>\n
1. Entwicklerkonsole<\/h4>\n
2. http:\/\/css3generator.com\/<\/h4>\n
3. https:\/\/wiki.selfhtml.org\/wiki\/CSS<\/h4>\n
Gestalte Deine eigene Website<\/h4>\n
Sommer-Aktion bei STRATO<\/h4>\n\n\n\n
\n\n\n\nHTML und CSS verbinden<\/h2>\n\n\n\n
Wiederholungen vermeiden<\/strong><\/h2>\n\n\n\n
HTML aufr\u00e4umen<\/strong><\/h2>\n\n\n\n
Externes Stylesheet laden<\/strong><\/h2>\n\n\n\n
![\"\"](\"https:\/\/strato.de\/blog\/wp-content\/uploads\/2019\/06\/Screenshot-test-html.png\")
<\/figure>\n\n\n\nM\u00f6chtest Du CSS f\u00fcr Deine eigene Website nutzen?<\/h4>\n\n\n\n Zu den STRATO Hosting-Paketen<\/a>\n\n\n\n
Sommer-Aktion bei STRATO<\/h4>\n\n\n\n