{"id":52793,"date":"2024-06-10T01:00:00","date_gmt":"2024-06-10T08:00:00","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=52793"},"modified":"2025-01-07T06:06:29","modified_gmt":"2025-01-07T14:06:29","slug":"css-lernen","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/de\/css-lernen\/","title":{"rendered":"Wie man CSS im Jahr 2024 lernt (schnell &#038; kostenlos)"},"content":{"rendered":"<p>Angenommen, Sie m\u00f6chten Ihre Reiseabenteuer mit der Welt teilen. Sie schreiben also einen Blog und legen Ihr Herz in jeden Absatz, w\u00e4hrend Sie jeden Moment erneut erleben, w\u00e4hrend Sie tippen.<\/p>\n<p>Aber wenn Sie Ihre Ver\u00f6ffentlichung vorschauen, gibt es ein Problem. Das Design wirkt flach: Die Bilder sind eine Gr\u00f6\u00dfe zu klein, der Text ist schwer zu lesen und das gesamte Layout wird der unglaublichen Geschichte, die Sie zu erz\u00e4hlen versuchen, nicht gerecht.<\/p>\n<p>Hier kann <a href=\"https:\/\/www.dreamhost.com\/blog\/de\/css-frameworks\/\" target=\"_blank\" rel=\"noreferrer noopener\">CSS helfen<\/a>.<\/p>\n<p>Mit CSS k\u00f6nnen Sie Ihren Blog von einer einfachen Textwand in ein immersives, visuell beeindruckendes Erlebnis verwandeln. Stellen Sie sich vor, Bilder, die von der Seite hervorstechen, \u00dcberschriften, die herausragen, und Abs\u00e4tze, die m\u00fchelos flie\u00dfen.<\/p>\n<p>Der beste Teil? Sie m\u00fcssen kein professioneller Designer sein, um dies zu erreichen. CSS ist eine einfache, intuitive Sprache, die <em>jeder<\/em> lernen kann. In diesem kurzen Leitfaden werden wir die Wege zum Erlernen von CSS erkunden und wie Sie anfangen k\u00f6nnen.<\/p>\n<h2 id=\"h-a-brief-introduction-to-css\" class=\"wp-block-heading\">Eine kurze Einf\u00fchrung in CSS<\/h2>\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>CSS<\/h3>\n    <p>Cascading Style Sheets (CSS) ist eine unverzichtbare Programmiersprache, die f\u00fcr das Styling von Webseiten verwendet wird. CSS hilft Ihnen, sch\u00f6ne Seiten zu erstellen, indem es das Aussehen verschiedener Elemente \u00e4ndert.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/css\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Mehr lesen                    <\/a>\n\n<\/div>\n\n<p>Bevor Sie lernen, eine Website zu programmieren, m\u00fcssen Sie ein wenig dar\u00fcber wissen, was hinter den Kulissen passiert. Jede Website enth\u00e4lt verschiedene Dateien oder Programmiersprachen. Hier ist eine Erkl\u00e4rung, wie einige davon zusammenarbeiten:<\/p>\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.dreamhost.com\/blog\/de\/html-lernen\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>HTML<\/strong><\/a>: Bildet die Struktur einer Website.<\/li><li><a href=\"https:\/\/www.dreamhost.com\/blog\/de\/javascript-lernen\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>JavaScript<\/strong><\/a>: Definiert das Verhalten einer Website.<\/li><li><strong>CSS<\/strong>: Bestimmt das Aussehen und den Stil einer Website.<\/li><\/ul>\n<p>Javascript ist derzeit die am meisten verwendete Programmiersprache unter Entwicklern weltweit, mit <a href=\"https:\/\/www.statista.com\/statistics\/793628\/worldwide-developer-survey-most-used-languages\/\" target=\"_blank\" rel=\"noreferrer noopener\">63,61%<\/a> Nutzung, w\u00e4hrend HTML\/CSS mit 52,97% an zweiter Stelle steht.<\/p>\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"2560\" height=\"1603\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/01_top_programming_languages_worldwide-scaled.webp\" alt=\"Balkendiagramm, das die f\u00fchrenden Programmiersprachen unter Entwicklern weltweit im Jahr 2023 darstellt. JavaScript ist mit 63,61% am beliebtesten\" class=\"wp-image-46252 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/01_top_programming_languages_worldwide-scaled.webp 2560w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/01_top_programming_languages_worldwide-300x188.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/01_top_programming_languages_worldwide-1024x641.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/01_top_programming_languages_worldwide-768x481.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/01_top_programming_languages_worldwide-1536x962.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/01_top_programming_languages_worldwide-2048x1283.webp 2048w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/01_top_programming_languages_worldwide-600x376.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/01_top_programming_languages_worldwide-1200x752.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/01_top_programming_languages_worldwide-730x457.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/01_top_programming_languages_worldwide-1460x914.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/01_top_programming_languages_worldwide-784x491.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/01_top_programming_languages_worldwide-1568x982.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/01_top_programming_languages_worldwide-877x549.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/01_top_programming_languages_worldwide-1754x1098.webp 1754w\" data-sizes=\"(max-width: 2560px) 100vw, 2560px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 2560px; --smush-placeholder-aspect-ratio: 2560\/1603;\" \/><\/figure>\n<p>CSS, oder Cascading Style Sheets, ist eine Programmiersprache, die Webseiten gestaltet. Sie arbeitet zusammen mit HTML, welches den Inhalt einer Webseite strukturiert. CSS steuert das Layout, die Farben, Schriftarten und andere Designaspekte der Elemente auf einer Seite.<\/p>\n<p>Wenn Sie eine Website besuchen, sehen Sie ihr <a href=\"https:\/\/www.dreamhost.com\/blog\/de\/wordpress-webdesign-trends\/\" target=\"_blank\" rel=\"noreferrer noopener\">einzigartiges Webdesign<\/a>, <a href=\"https:\/\/www.dreamhost.com\/blog\/de\/wordpress-vorlagen-und-vorlagenteile\/\" target=\"_blank\" rel=\"noreferrer noopener\">ansprechende Layouts<\/a>, Formatierung und Stile, die mit CSS erstellt wurden. Ohne CSS h\u00e4tten Websites eine einfallslose Standardgestaltung und Funktionen.<\/p>\n<p>Beispielsweise, hier ist, wie Amazon.com aussehen w\u00fcrde, wenn sie kein CSS-Styling hinzuf\u00fcgen w\u00fcrden:<\/p>\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"2366\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/02_with_css_vs_without_css.webp\" alt=\"Nebeneinander Vergleich der Startseite von Amazon.com, eine mit CSS gestaltet vs. ohne CSS.\" class=\"wp-image-46254 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/02_with_css_vs_without_css.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/02_with_css_vs_without_css-203x300.webp 203w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/02_with_css_vs_without_css-692x1024.webp 692w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/02_with_css_vs_without_css-768x1136.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/02_with_css_vs_without_css-1039x1536.webp 1039w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/02_with_css_vs_without_css-1385x2048.webp 1385w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/02_with_css_vs_without_css-600x887.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/02_with_css_vs_without_css-1200x1775.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/02_with_css_vs_without_css-730x1079.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/02_with_css_vs_without_css-1460x2159.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/02_with_css_vs_without_css-784x1159.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/02_with_css_vs_without_css-1568x2319.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/02_with_css_vs_without_css-877x1297.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/2366;\" \/><\/figure>\n<p>Es w\u00e4re eine schreckliche Benutzererfahrung gewesen, und Amazon w\u00e4re wahrscheinlich nicht ann\u00e4hernd so stark gewachsen, wenn die Seite so ausgesehen h\u00e4tte.<\/p>\n<p>Jetzt verstehen wir einige <a href=\"https:\/\/www.dreamhost.com\/blog\/de\/tailwind-css\/\" target=\"_blank\" rel=\"noreferrer noopener\">Grundlagen von CSS<\/a>, einschlie\u00dflich seiner Struktur und wie Sie CSS-Stylesheets schreiben k\u00f6nnen.<\/p>\n<h3 class=\"wp-block-heading\">Grundlagen von CSS verstehen<\/h3>\n<p>CSS ist eine regelbasierte Sprache, die es Ihnen erm\u00f6glicht, <a href=\"https:\/\/www.dreamhost.com\/blog\/de\/wordpress-globale-stile\/\" target=\"_blank\" rel=\"noreferrer noopener\">Stile zu definieren<\/a> f\u00fcr spezifische Elemente auf Ihrer Webseite. Eines der grundlegenden Konzepte in CSS ist die Verwendung von Selektoren, um HTML-Elemente anzusprechen und ihnen Stile zuzuweisen.<\/p>\n<p><strong>Hier ist ein Beispiel f\u00fcr eine einfache CSS-Regelsatz:<\/strong><\/p>\n<pre class=\"wp-block-code\"><code>h2 {\n  font-size: 18px;\n  color: black;\n}\n\nh3 {\n  font-size: 16px;\n  color: red;\n}<\/code><\/pre>\n<p>Hier haben wir zwei CSS-Regeln:<\/p>\n<ul class=\"wp-block-list\"><li>Die erste Regel zielt auf die <strong><code>&lt;h2><\/code><\/strong> Elemente mit einem kommagetrennten Selektor. Sie stellt die Eigenschaft font-size auf 18px und die Farbe auf schwarz ein.<\/li><li>Die zweite Regel zielt auf das<strong> <code>&lt;h3><\/code><\/strong> Element. Sie stellt die Schriftgr\u00f6\u00dfe auf 16px und die Farbe auf rot ein.<\/li><\/ul>\n<p>CSS-Regels\u00e4tze bestehen aus Selektoren und Deklarationsbl\u00f6cken. Der Selektor bestimmt, auf welche Elemente die Stile angewendet werden, und der Deklarationsblock (alles, was Sie innerhalb der geschweiften Klammern <code>{}<\/code> schreiben) enth\u00e4lt ein oder mehrere Eigenschaft-Wert-Paare, die die Stile definieren.<\/p>\n<p>CSS bietet auch eine breite Palette von Eigenschaften zur Steuerung des Layouts, des Abstands, des Erscheinungsbildes und textbezogener Eigenschaften wie <a href=\"https:\/\/www.dreamhost.com\/blog\/de\/beste-google-schriften\/\" target=\"_blank\" rel=\"noreferrer noopener\">Schriftgr\u00f6\u00dfe<\/a> und Farbe.<\/p>\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"768\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/14_anatomy_of_css_ruleset-1024x768.webp\" alt=\"Anatomie eines CSS-Regelsatzes\" class=\"wp-image-46258 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/14_anatomy_of_css_ruleset-1024x768.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/14_anatomy_of_css_ruleset-300x225.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/14_anatomy_of_css_ruleset-768x576.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/14_anatomy_of_css_ruleset-1536x1152.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/14_anatomy_of_css_ruleset-2048x1536.webp 2048w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/14_anatomy_of_css_ruleset-600x450.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/14_anatomy_of_css_ruleset-1200x900.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/14_anatomy_of_css_ruleset-730x548.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/14_anatomy_of_css_ruleset-1460x1095.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/14_anatomy_of_css_ruleset-784x588.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/14_anatomy_of_css_ruleset-1568x1176.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/14_anatomy_of_css_ruleset-877x658.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/14_anatomy_of_css_ruleset-1754x1316.webp 1754w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/768;\" \/><\/figure>\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"2560\" height=\"1920\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/03_css_box_model-1-scaled.webp\" alt=\"Diagramm einer Elementstruktur in konzentrischen Quadraten, beginnend mit Rand, Rahmen und Abstand. \" class=\"wp-image-46260 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/03_css_box_model-1-scaled.webp 2560w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/03_css_box_model-1-300x225.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/03_css_box_model-1-1024x768.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/03_css_box_model-1-768x576.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/03_css_box_model-1-1536x1152.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/03_css_box_model-1-2048x1536.webp 2048w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/03_css_box_model-1-600x450.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/03_css_box_model-1-1200x900.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/03_css_box_model-1-730x548.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/03_css_box_model-1-1460x1095.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/03_css_box_model-1-784x588.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/03_css_box_model-1-1568x1176.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/03_css_box_model-1-877x658.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/03_css_box_model-1-1754x1316.webp 1754w\" data-sizes=\"(max-width: 2560px) 100vw, 2560px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 2560px; --smush-placeholder-aspect-ratio: 2560\/1920;\" \/><\/figure>\n<p>Das CSS-Box-Modell ist eine Methode, um dar\u00fcber nachzudenken, wie Elemente auf einer Webseite dargestellt werden. Stellen Sie sich vor, jedes Element ist eine Box mit vier Schichten.<\/p>\n<ul class=\"wp-block-list\"><li>Inhalt: Der innerste Teil des Elements: enth\u00e4lt Text, Bilder oder weitere Elemente<\/li><li>Abstand: Der Raum zwischen dem Inhalt und dem Rand<\/li><li>Rand: Die Kante um den Abstand herum<\/li><li>Randabstand: Der Raum au\u00dferhalb des Randes<\/li><\/ul>\n<p>H\u00e4ufig verwendete CSS-Eigenschaften:<\/p>\n<ul class=\"wp-block-list\"><li><strong>Breite und H\u00f6he: <\/strong>Diese Eigenschaften bestimmen die Gr\u00f6\u00dfe eines Elements und erm\u00f6glichen es Ihnen, seine Abmessungen auf der Seite zu steuern. Sie k\u00f6nnen auch eine maximale H\u00f6he und maximale Breite festlegen, wenn Sie nicht m\u00f6chten, dass sich ein Element \u00fcber einen bestimmten Punkt hinaus erstreckt.<\/li><li><strong>Abstand innen<\/strong>: Modifiziert den Raum innerhalb der Grenze eines Elements und f\u00fcgt Atemraum zwischen der Grenze und dem Inhalt des Elements hinzu.<\/li><li><strong>R\u00e4nder: <\/strong>R\u00e4nder an Elementen schaffen eine sichtbare Grenze um eine Komponente, und sie k\u00f6nnen mit verschiedenen Breiten, Farben und Mustern gestaltet werden.<\/li><li><strong>Abstand au\u00dfen<\/strong>: Passt den Raum au\u00dferhalb der Grenze eines Elements an und schafft Abstand zwischen dem Element und seinen Nachbarn.<\/li><li><strong>Hintergrundfarbe<\/strong>: F\u00fcllt den Bereich hinter dem Inhalt und dem Abstand eines Elements mit einer bestimmten Farbe. Zum Beispiel <strong><code>background-color: lightblue<\/code><\/strong>.<\/li><li><strong>Farbe: <\/strong>Bestimmt die Farbe der Zeichen oder der Schriftart innerhalb des Tags.<\/li><li><strong>Anzeige<\/strong>: Gibt an, wie ein Element gerendert werden soll, beispielsweise als Blockelement oder als Inline-Element, oder gar nicht angezeigt wird.<\/li><\/ul>\n<p>Diese Eigenschaften, zusammen mit vielen anderen, erm\u00f6glichen es Ihnen, <a href=\"https:\/\/www.dreamhost.com\/blog\/de\/leitfaden-zu-wp-sidebars-widgets\/\" target=\"_blank\" rel=\"noreferrer noopener\">das Erscheinungsbild einer Webseite zu personalisieren<\/a>, indem Sie <a href=\"https:\/\/www.dreamhost.com\/blog\/de\/websichere-schriften\/\" target=\"_blank\" rel=\"noreferrer noopener\">benutzerdefinierte Schriftarten<\/a>, Farben, Abst\u00e4nde und mehr \u00e4ndern und hinzuf\u00fcgen.<\/p>\n<p>Es gibt drei Methoden, um CSS-Stile auf Ihren HTML-Seiten anzuwenden:<\/p>\n<ol class=\"wp-block-list\"><li><strong>Inline-Stile<\/strong>: Wenden Sie Stile direkt auf ein HTML-Element an, indem Sie das <strong><code>style=-Attribut<\/code><\/strong> verwenden, zum Beispiel, indem Sie die Anzeigeeigenschaft auf ein Div-Element anwenden.<\/li><li><strong>Eingebettete Stile<\/strong>: Definieren Sie Stile innerhalb des <strong><code>style-Elements<\/code><\/strong> im <strong><code>&lt;head><\/code><\/strong>-Abschnitt eines HTML-Dokuments.<\/li><li><strong>Externe Stile<\/strong>: Erstellen Sie eine separate CSS-Datei und verlinken Sie sie mit dem HTML-Dokument unter Verwendung des <strong><code>&lt;link><\/code><\/strong>-Elements im <strong><code>&lt;head><\/code><\/strong>-Abschnitt.<\/li><\/ol>\n<p>Die Verwendung externer Stylesheets wird allgemein als beste Praxis angesehen, da sie eine bessere Trennung der Zust\u00e4ndigkeiten erm\u00f6glicht und die Wartung von Stilen \u00fcber mehrere Seiten hinweg erleichtert.<\/p>\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n<h2 id=\"h2_warum-sie-erwaegen-sollten-css-zu-lernen\" class=\"wp-block-heading\">Warum Sie erw\u00e4gen sollten, CSS zu lernen<\/h2>\n<p>Obwohl es vollkommen m\u00f6glich ist, <a href=\"https:\/\/www.dreamhost.com\/blog\/design-website-without-code\/\" target=\"_blank\" rel=\"noreferrer noopener\">eine Website ohne Programmierung zu gestalten<\/a>, kann Ihnen das Erlernen von CSS mehr Kontrolle \u00fcber das Erscheinungsbild und die Funktionalit\u00e4t Ihrer Website geben. Das Anpassen von CSS erm\u00f6glicht es Ihnen, eine einzigartige und unvergessliche Website zu erstellen, die sich von Standarddesigns abhebt.<\/p>\n<p>Ohne benutzerdefiniertes CSS k\u00f6nnte eine Website auf das einfache Design und die Hintergrundfarben beschr\u00e4nkt sein, die ein <a href=\"https:\/\/www.dreamhost.com\/blog\/de\/wie-man-ein-wordpress-child-theme-erstellt\/\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress-Theme<\/a> vorgibt. Standarddesigns stellen m\u00f6glicherweise nicht Ihre Marke, Ihr Produkt oder Ihren Inhalt im besten Licht dar. Benutzerdefiniertes CSS stellt sicher, dass Ihre Designs einzigartig und unvergesslich sind.<\/p>\n<p>Hier sind nur einige Teile Ihrer Website, die Sie mit grundlegenden CSS-Eigenschaften gestalten k\u00f6nnen:<\/p>\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.dreamhost.com\/blog\/de\/wie-man-ein-farbschema-fur-ihre-website-auswahlt\/\" target=\"_blank\" rel=\"noreferrer noopener\">Textfarbe<\/a> und Schriftstil.<\/li><li>CSS-Layout der Abstands- und Stilgebung des Absatzelements.<\/li><li>Link-Hover-Effekte mit der <strong><code>:hover<\/code><\/strong> Pseudoklasse.<\/li><li>Hintergrundbilder und Schlagschatten.<\/li><li>Und mehr\u2026<\/li><\/ul>\n<p>Abgesehen davon gibt es auch CSS-Pseudoelemente wie <strong><code>::before und ::after<\/code><\/strong>, die Ihnen helfen, Inhalte dynamisch einzuf\u00fcgen und Stile auf spezifische Teile des Inhalts anzuwenden, ohne die Struktur zu \u00e4ndern.<\/p>\n<p>Mit CSS k\u00f6nnen Sie die Eigenschaft background-color f\u00fcr Body-Elemente \u00e4ndern, eine Eigenschaft background-image hinzuf\u00fcgen und visuell ansprechende Designs erstellen, die Ihr Publikum fesseln.<\/p>\n<p>Es erm\u00f6glicht Ihnen auch, responsive Seiten zu gestalten, die sich an verschiedene Bildschirmgr\u00f6\u00dfen und <a href=\"https:\/\/www.dreamhost.com\/blog\/de\/wie-sie-ihre-website-fur-mobile-gerate-optimieren\/\" target=\"_blank\" rel=\"noreferrer noopener\">mobile Ger\u00e4te<\/a> anpassen, wodurch Ihre Inhalte f\u00fcr jeden zug\u00e4nglicher werden.<\/p>\n<p>CSS spart Ihnen Zeit und M\u00fche beim <a href=\"https:\/\/www.dreamhost.com\/blog\/create-website-for-free\/\" target=\"_blank\" rel=\"noreferrer noopener\">Gestalten Ihrer Website<\/a>. Mit CSS-Selektoren k\u00f6nnen Sie Stile auf mehrere Elemente auf Ihrer Website anwenden und so die Menge an Code reduzieren, die Sie schreiben m\u00fcssen.<\/p>\n<p>Lernen von CSS zusammen mit anderen Programmiersprachen wie JavaScript oder <a href=\"https:\/\/www.dreamhost.com\/blog\/php-security-user-validation-sanitization\/\" target=\"_blank\" rel=\"noreferrer noopener\">PHP<\/a> kann zu lohnenden Karrieren in der Webentwicklung oder im Webdesign f\u00fchren. Selbst ein grundlegendes Verst\u00e4ndnis von CSS ist wertvoll in <a href=\"https:\/\/www.dreamhost.com\/blog\/de\/lukrative-nebenbeschaftigungsideen\/\" target=\"_blank\" rel=\"noreferrer noopener\">hochbezahlten Jobs<\/a> wie <a href=\"https:\/\/www.dreamhost.com\/blog\/de\/leitfaden-fur-website-besitzer-zum-e-mail-marketing\/\" target=\"_blank\" rel=\"noreferrer noopener\">E-Mail-Marketing<\/a>, Inhaltsproduktion oder technischer virtueller Assistenz.<\/p>\n<p>Es erm\u00f6glicht Ihnen, Online-Inhalte und responsive Designs f\u00fcr Kunden zu erstellen, ohne auf Tools von Drittanbietern angewiesen zu sein.<\/p>\n<p>Die Kombination von CSS-Kenntnissen mit Expertise in Design-Tools (Adobe Photoshop, Sketch oder Figma) erm\u00f6glicht es Ihnen, sch\u00f6ne visuelle Designs umzusetzen, die oft nicht von Entwicklern mit allgemeinen Software-Engineering-F\u00e4higkeiten erreicht werden.<\/p>\n<h2 id=\"h2_wie-man-css-schnell-lernt-3-einfache-methoden\" class=\"wp-block-heading\">Wie man CSS schnell lernt (3 einfache Methoden)<\/h2>\n<p>Wenn Sie beschlossen haben, CSS zu lernen, aber nicht wissen, wo Sie anfangen sollen, haben wir eine Liste von kostenlosen und <a href=\"https:\/\/www.dreamhost.com\/blog\/de\/beste-online-ressourcen-zum-lernen-von-code\/\" target=\"_blank\" rel=\"noreferrer noopener\">n\u00fctzlichen Online-Ressourcen<\/a> zusammengestellt, die Ihnen in jeder Phase Ihrer Lernreise helfen k\u00f6nnen.<\/p>\n<h3 class=\"wp-block-heading\">1. Schauen Sie sich ein YouTube-CSS-Tutorial an<\/h3>\n<p>YouTube ist eine hervorragende Ressource, um neue F\u00e4higkeiten zu erlernen, und CSS bildet keine Ausnahme.<\/p>\n<p>Viele Webentwicklungsexperten erstellen Schritt-f\u00fcr-Schritt-Anleitungen zum Erlernen von CSS, die oft in verschiedene Teile f\u00fcr einfaches Lernen unterteilt sind. Der einfachste Weg, einen YouTube-Kurs zu filtern, ist, das Ver\u00f6ffentlichungsdatum zu \u00fcberpr\u00fcfen. Generell sollte es in Ordnung sein, wenn es im Bereich von ein bis zwei Jahren liegt.<\/p>\n<p>Allerdings ist CSS eine ausgereifte Technologie und erh\u00e4lt nicht h\u00e4ufig Updates, sodass Sie noch einige Jahre weitermachen k\u00f6nnten und trotzdem relevante Kurse erhalten.<\/p>\n<p>Betrachten Sie das Ansehen des <a href=\"https:\/\/www.youtube.com\/watch?v=Icf5D3fEKbM\" target=\"_blank\" rel=\"noreferrer noopener\">Codevolution CSS Crash-Kurses<\/a> f\u00fcr einen schnellen \u00dcberblick \u00fcber CSS.<\/p>\n<p>Dieses einst\u00fcndige Video erkl\u00e4rt, wie man CSS f\u00fcr Anf\u00e4nger formatiert und anpasst, und f\u00fchrt Sie durch die ersten Schritte des Hinzuf\u00fcgens von CSS zu einem HTML-Dokument. Sie lernen, Farbe, Text, Schriftarten, Listen, Tabellen usw. zu gestalten.<\/p>\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"2400\" height=\"1695\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/04_watch_a_youtube_css_tutorial.webp\" alt=\"YouTube-Video \u201eCSS-Crashkurs - Tutorial f\u00fcr absolute Anf\u00e4nger\u201c bei der 15-Minuten-Marke pausiert.\" class=\"wp-image-46262 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/04_watch_a_youtube_css_tutorial.webp 2400w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/04_watch_a_youtube_css_tutorial-300x212.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/04_watch_a_youtube_css_tutorial-1024x723.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/04_watch_a_youtube_css_tutorial-768x542.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/04_watch_a_youtube_css_tutorial-1536x1085.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/04_watch_a_youtube_css_tutorial-2048x1446.webp 2048w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/04_watch_a_youtube_css_tutorial-600x424.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/04_watch_a_youtube_css_tutorial-1200x848.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/04_watch_a_youtube_css_tutorial-730x516.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/04_watch_a_youtube_css_tutorial-1460x1031.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/04_watch_a_youtube_css_tutorial-784x554.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/04_watch_a_youtube_css_tutorial-1568x1107.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/04_watch_a_youtube_css_tutorial-877x619.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/04_watch_a_youtube_css_tutorial-1754x1239.webp 1754w\" data-sizes=\"(max-width: 2400px) 100vw, 2400px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 2400px; --smush-placeholder-aspect-ratio: 2400\/1695;\" \/><\/figure>\n<p>Denken Sie daran, dass ein einst\u00fcndiges Video nicht <em>alles<\/em> abdeckt, und Sie m\u00f6glicherweise zus\u00e4tzliche Videos \u00fcber fortgeschrittene Techniken wie CSS-Grid und Flexbox ansehen m\u00fcssen.<\/p>\n<p>Schauen Sie sich <a href=\"https:\/\/www.youtube.com\/watch?v=G3e-cpL7ofc\" target=\"_blank\" rel=\"noreferrer noopener\">SuperSimpleDevs HTML &amp; CSS Komplettkurs<\/a> f\u00fcr ein umfassenderes Video \u00fcber CSS an. Dieses sechseinhalb Stunden lange Video lehrt Sie alles von den Grundlagen bis zu professionelleren Techniken, unabh\u00e4ngig von Ihrer vorherigen Erfahrung.<\/p>\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"2400\" height=\"1695\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/05_supersimpledev_s_html_css_full_course.webp\" alt=\"SuperSimpleDevs YouTube-Video \u201eHTML &#038; CSS Vollst\u00e4ndiger Kurs - Vom Anf\u00e4nger zum Profi\u201c bei der 55-Minuten-Marke pausiert.\" class=\"wp-image-46264 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/05_supersimpledev_s_html_css_full_course.webp 2400w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/05_supersimpledev_s_html_css_full_course-300x212.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/05_supersimpledev_s_html_css_full_course-1024x723.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/05_supersimpledev_s_html_css_full_course-768x542.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/05_supersimpledev_s_html_css_full_course-1536x1085.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/05_supersimpledev_s_html_css_full_course-2048x1446.webp 2048w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/05_supersimpledev_s_html_css_full_course-600x424.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/05_supersimpledev_s_html_css_full_course-1200x848.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/05_supersimpledev_s_html_css_full_course-730x516.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/05_supersimpledev_s_html_css_full_course-1460x1031.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/05_supersimpledev_s_html_css_full_course-784x554.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/05_supersimpledev_s_html_css_full_course-1568x1107.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/05_supersimpledev_s_html_css_full_course-877x619.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/05_supersimpledev_s_html_css_full_course-1754x1239.webp 1754w\" data-sizes=\"(max-width: 2400px) 100vw, 2400px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 2400px; --smush-placeholder-aspect-ratio: 2400\/1695;\" \/><\/figure>\n<p>Es enth\u00e4lt auch HTML-Anleitungen und ist daher eine hervorragende Ressource, um mehrere Codierungstechniken an einem Ort zu erlernen.<\/p>\n<p>Da keine Vorkenntnisse erforderlich sind, kann dieses Tutorial Ihr erster Schritt sein, um <a href=\"https:\/\/www.dreamhost.com\/blog\/customer-spotlight-jos-velasco\/\" target=\"_blank\" rel=\"noreferrer noopener\">ein professioneller Entwickler<\/a> zu werden. Es enth\u00e4lt auch HTML-Leitf\u00e4den \u2014 eine hervorragende Ressource, um mehrere Programmierungstechniken an einem Ort zu lernen.<\/p>\n<p>Mit diesem Tutorial k\u00f6nnen Sie verschiedene \u00dcbungen absolvieren, um CSS und HTML zu \u00fcben. Es enth\u00e4lt \u00fcber 100 Aufgaben. Wenn Sie die entsprechenden Techniken beherrschen, sollten Sie in der Lage sein, am Ende des Kurses eine YouTube-Webseite zu erstellen!<\/p>\n<h3 class=\"wp-block-heading\">2. Einen CSS-Kurs belegen<\/h3>\n<p>W\u00e4hrend YouTube wertvoll f\u00fcr grundlegende Programmierkenntnisse ist, bietet es m\u00f6glicherweise nicht immer die umfassendsten oder aktuellsten Informationen. Um Ihre CSS-F\u00e4higkeiten weiterzuentwickeln, erw\u00e4gen Sie, Online-CSS-Kurse zu erkunden, die strukturierte und tiefgehende Lernwege bieten.<\/p>\n<p>Gl\u00fccklicherweise bieten viele Plattformen kostenlose CSS-Kurse an, die es Ihnen erm\u00f6glichen, in Ihrem eigenen Tempo und nach Ihrer Bequemlichkeit zu lernen. Eine solche Plattform ist Codecademy, die nach Erstellung eines Kontos einen <a href=\"https:\/\/www.codecademy.com\/learn\/learn-css\" target=\"_blank\" rel=\"noreferrer noopener\">CSS-Kurs<\/a> kostenlos anbietet.<\/p>\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"920\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/06_codeacademy.webp\" alt=\"Screenshot des Codeacademy Learn CSS-Kurses\" class=\"wp-image-46266 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/06_codeacademy.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/06_codeacademy-300x173.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/06_codeacademy-1024x589.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/06_codeacademy-768x442.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/06_codeacademy-1536x883.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/06_codeacademy-600x345.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/06_codeacademy-1200x690.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/06_codeacademy-730x420.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/06_codeacademy-1460x840.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/06_codeacademy-784x451.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/06_codeacademy-1568x902.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/06_codeacademy-877x504.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/920;\" \/><\/figure>\n<p>Der Codecademy-Kurs \u201eLearn CSS\u201c lehrt Sie, wie Sie eine Webseite mit CSS gestalten, und deckt Themen wie folgt ab:<\/p>\n<ul class=\"wp-block-list\"><li>Korrekte Dateiformatierung.<\/li><li>Hinzuf\u00fcgen neuer Merkmale.<\/li><li>Erstellung \u00e4sthetisch ansprechender CSS-Layouts.<\/li><li>CSS-Syntax und visuelle Regeln.<\/li><li>Das Box-Modell.<\/li><li>Anzeigeeigenschaften.<\/li><li><a href=\"https:\/\/www.dreamhost.com\/blog\/how-typography-affects-website-conversions\/\" target=\"_blank\" rel=\"noreferrer noopener\">Farben und Typografie<\/a>.<\/li><\/ul>\n<p>Jedes Modul umfasst eine schriftliche Lektion und Anweisungen zur Umsetzung der Konzepte. Sie werden in der Lage sein, Code zu formatieren und zu sehen, wie es die Anzeige im Frontend beeinflusst, wodurch Ihr Verst\u00e4ndnis durch praktische \u00dcbungen gefestigt wird.<\/p>\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"2400\" height=\"1772\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/07_codeacademy_intro_to_css.webp\" alt=\"Einblick in Codeacademy's &quot;Einf\u00fchrung in CSS&quot; mit Anweisungen und Code.\" class=\"wp-image-46268 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/07_codeacademy_intro_to_css.webp 2400w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/07_codeacademy_intro_to_css-300x222.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/07_codeacademy_intro_to_css-1024x756.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/07_codeacademy_intro_to_css-768x567.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/07_codeacademy_intro_to_css-1536x1134.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/07_codeacademy_intro_to_css-2048x1512.webp 2048w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/07_codeacademy_intro_to_css-600x443.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/07_codeacademy_intro_to_css-1200x886.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/07_codeacademy_intro_to_css-730x539.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/07_codeacademy_intro_to_css-1460x1078.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/07_codeacademy_intro_to_css-784x579.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/07_codeacademy_intro_to_css-1568x1158.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/07_codeacademy_intro_to_css-877x648.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/07_codeacademy_intro_to_css-1754x1295.webp 1754w\" data-sizes=\"(max-width: 2400px) 100vw, 2400px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 2400px; --smush-placeholder-aspect-ratio: 2400\/1772;\" \/><\/figure>\n<p>Eine weitere ausgezeichnete Ressource zum Erlernen von CSS ist der <a href=\"https:\/\/web.dev\" target=\"_blank\" rel=\"noreferrer noopener\">web.dev<\/a> Learn CSS-Kurs. Dieser kostenlose Kurs zerlegt grundlegende Konzepte in leicht verst\u00e4ndliche Module und behandelt Themen wie:<\/p>\n<ul class=\"wp-block-list\"><li>Das Box-Modell.<\/li><li>CSS-Selektoren.<\/li><li>Flexbox-Layout.<\/li><li>CSS-Grid-Layout.<\/li><\/ul>\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"2400\" height=\"1472\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/08_web_dev_learn_css.webp\" alt=\"Screenshot der Website web.dev mit einem Kurs \u201eCSS lernen\u201c. Eine \u00dcbersicht zeigt zwei behandelte Themen: Box-Modell und Selektoren.\" class=\"wp-image-46270 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/08_web_dev_learn_css.webp 2400w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/08_web_dev_learn_css-300x184.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/08_web_dev_learn_css-1024x628.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/08_web_dev_learn_css-768x471.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/08_web_dev_learn_css-1536x942.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/08_web_dev_learn_css-2048x1256.webp 2048w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/08_web_dev_learn_css-600x368.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/08_web_dev_learn_css-1200x736.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/08_web_dev_learn_css-730x448.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/08_web_dev_learn_css-1460x895.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/08_web_dev_learn_css-784x481.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/08_web_dev_learn_css-1568x962.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/08_web_dev_learn_css-877x538.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/08_web_dev_learn_css-1754x1076.webp 1754w\" data-sizes=\"(max-width: 2400px) 100vw, 2400px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 2400px; --smush-placeholder-aspect-ratio: 2400\/1472;\" \/><\/figure>\n<p>Eine aufregende Funktion des CSS-Kurses von web.dev ist, dass er Clips aus dem CSS Podcast in jedem Modul enth\u00e4lt. Dies ist besonders n\u00fctzlich, wenn Sie ein auditiver Lerner sind:<\/p>\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"2400\" height=\"1352\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/09_web_dev_box_model.webp\" alt=\"Screenshot des web.dev Box-Modells\" class=\"wp-image-46272 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/09_web_dev_box_model.webp 2400w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/09_web_dev_box_model-300x169.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/09_web_dev_box_model-1024x577.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/09_web_dev_box_model-768x433.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/09_web_dev_box_model-1536x865.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/09_web_dev_box_model-2048x1154.webp 2048w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/09_web_dev_box_model-600x338.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/09_web_dev_box_model-1200x676.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/09_web_dev_box_model-730x411.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/09_web_dev_box_model-1460x822.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/09_web_dev_box_model-784x442.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/09_web_dev_box_model-1568x883.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/09_web_dev_box_model-877x494.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/09_web_dev_box_model-1754x988.webp 1754w\" data-sizes=\"(max-width: 2400px) 100vw, 2400px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 2400px; --smush-placeholder-aspect-ratio: 2400\/1352;\" \/><\/figure>\n<p>Um Ihr Wissen zu testen, stellt web.dev am Ende jedes Moduls eine Quizfrage bereit, die Ihnen hilft, Ihr Verst\u00e4ndnis des Stoffs zu festigen.<\/p>\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"2560\" height=\"1613\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/10_check_your_understanding-scaled.webp\" alt=\"Beispiel einer Quizfrage nach einem Modul mit der richtigen und falschen Antwort und einer Erkl\u00e4rung f\u00fcr die richtige Antwort\" class=\"wp-image-46274 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/10_check_your_understanding-scaled.webp 2560w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/10_check_your_understanding-300x189.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/10_check_your_understanding-1024x645.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/10_check_your_understanding-768x484.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/10_check_your_understanding-1536x968.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/10_check_your_understanding-2048x1290.webp 2048w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/10_check_your_understanding-600x378.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/10_check_your_understanding-1200x756.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/10_check_your_understanding-730x460.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/10_check_your_understanding-1460x920.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/10_check_your_understanding-784x494.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/10_check_your_understanding-1568x988.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/10_check_your_understanding-877x553.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/10_check_your_understanding-1754x1105.webp 1754w\" data-sizes=\"(max-width: 2560px) 100vw, 2560px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 2560px; --smush-placeholder-aspect-ratio: 2560\/1613;\" \/><\/figure>\n<p>Das Absolvieren aller Module im CSS-Kurs von web.dev bringt Sie n\u00e4her daran, CSS viel schneller in Ihren Projekten implementieren zu k\u00f6nnen.<\/p>\n<p>Hier sind einige andere bemerkenswerte Namen in der Kursbranche, die Sie ausprobieren k\u00f6nnen:<\/p>\n<ul class=\"wp-block-list\"><li><strong>freeCodeCamp<\/strong>: Bietet einen umfassenden Lehrplan, der CSS und andere Webentwicklungstechnologien abdeckt.<\/li><li><strong>edX<\/strong>: Bietet CSS-Kurse von f\u00fchrenden Universit\u00e4ten und Institutionen an, oft mit der M\u00f6glichkeit, ein verifiziertes Zertifikat zu erwerben.<\/li><li><strong>Udemy<\/strong>: Verf\u00fcgt \u00fcber eine breite Palette von CSS-Kursen, sowohl kostenlos als auch kostenpflichtig, die sich an verschiedene F\u00e4higkeitsniveaus und Lernstile richten.<\/li><\/ul>\n<h3 class=\"wp-block-heading\">3. Ein lehrreiches CSS-Spiel spielen<\/h3>\n<p>Nachdem Sie die Grundlagen von CSS aus Onlinekursen gelernt haben, ist es an der Zeit, Ihre F\u00e4higkeiten zu testen. Auch wenn Sie sich vielleicht noch nicht bereit f\u00fchlen, sofort mit der Codierung von Websites zu experimentieren, bieten interaktive CSS-Spiele eine unterhaltsame und ansprechende M\u00f6glichkeit, Ihr neu erworbenes Wissen zu \u00fcben.<\/p>\n<p><a href=\"https:\/\/flukeout.github.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">CSS Diner<\/a> ist ein Online-Spiel, bei dem Sie Selektoren meistern k\u00f6nnen. Sie lernen, wie man HTML-Elemente am Anfang des CSS-Codes spezifiziert und dann Stile zu diesen Elementen hinzuf\u00fcgt, wodurch Sie fortschrittlichere und verschachtelte Elemente ausw\u00e4hlen, w\u00e4hrend Sie weitermachen.<\/p>\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"762\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/11_play_an_educational_css_game-1024x762.webp\" alt=\"Screenshot der CSS Diner Startseite\" class=\"wp-image-46276 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/11_play_an_educational_css_game-1024x762.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/11_play_an_educational_css_game-300x223.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/11_play_an_educational_css_game-768x572.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/11_play_an_educational_css_game-1536x1143.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/11_play_an_educational_css_game-2048x1524.webp 2048w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/11_play_an_educational_css_game-600x447.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/11_play_an_educational_css_game-1200x893.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/11_play_an_educational_css_game-730x543.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/11_play_an_educational_css_game-1460x1087.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/11_play_an_educational_css_game-784x584.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/11_play_an_educational_css_game-1568x1167.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/11_play_an_educational_css_game-877x653.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/11_play_an_educational_css_game-1754x1306.webp 1754w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/762;\" \/><\/figure>\n<p>Wir haben das Spiel ausprobiert und ehrlich gesagt, wir waren s\u00fcchtig! Spielen Sie dies, w\u00e4hrend Sie CSS lernen.<\/p>\n<p>Wenn Sie eine gr\u00f6\u00dfere Auswahl an Spielen zum \u00dcben von CSS, HTML und JavaScript suchen, erw\u00e4gen Sie die Erstellung eines kostenlosen Kontos auf <a href=\"https:\/\/codepip.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Codepip<\/a>:<\/p>\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"2400\" height=\"1665\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/12_grid_garden.webp\" alt=\"Screenshot der Codepip-Startseite\" class=\"wp-image-46278 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/12_grid_garden.webp 2400w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/12_grid_garden-300x208.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/12_grid_garden-1024x710.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/12_grid_garden-768x533.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/12_grid_garden-1536x1066.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/12_grid_garden-2048x1421.webp 2048w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/12_grid_garden-600x416.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/12_grid_garden-1200x833.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/12_grid_garden-730x506.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/12_grid_garden-1460x1013.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/12_grid_garden-784x544.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/12_grid_garden-1568x1088.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/12_grid_garden-877x608.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/12_grid_garden-1754x1217.webp 1754w\" data-sizes=\"(max-width: 2400px) 100vw, 2400px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 2400px; --smush-placeholder-aspect-ratio: 2400\/1665;\" \/><\/figure>\n<p>Ein weiteres beliebtes Spiel zum \u00dcben von CSS ist <a href=\"http:\/\/flexboxfroggy.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Flexbox Froggy<\/a>, das sich auf das Flexbox-Layoutmodell konzentriert.<\/p>\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"2400\" height=\"1652\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/13_flexbox_froggy.webp\" alt=\"Screenshot der Flexbox Froggy Startseite\" class=\"wp-image-46280 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/13_flexbox_froggy.webp 2400w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/13_flexbox_froggy-300x207.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/13_flexbox_froggy-1024x705.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/13_flexbox_froggy-768x529.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/13_flexbox_froggy-1536x1057.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/13_flexbox_froggy-2048x1410.webp 2048w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/13_flexbox_froggy-600x413.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/13_flexbox_froggy-1200x826.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/13_flexbox_froggy-730x502.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/13_flexbox_froggy-1460x1005.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/13_flexbox_froggy-784x540.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/13_flexbox_froggy-1568x1079.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/13_flexbox_froggy-877x604.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/13_flexbox_froggy-1754x1207.webp 1754w\" data-sizes=\"(max-width: 2400px) 100vw, 2400px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 2400px; --smush-placeholder-aspect-ratio: 2400\/1652;\" \/><\/figure>\n<p>Ihr Ziel in diesem Spiel ist es, einem animierten Frosch zu helfen, ein Seerosenblatt zu erreichen, indem Sie CSS-Code schreiben, der Flexbox-Eigenschaften anwendet. Mit fortschreitenden Leveln werden Sie mit immer komplexeren Herausforderungen konfrontiert, die Ihr Verst\u00e4ndnis von Flexbox-Ausrichtung, Rechtfertigung und Verteilung testen.<\/p>\n<p>Der Hauptvorteil des Erlernens von CSS durch Spiele besteht darin, dass sie es Ihnen erm\u00f6glichen, in einer Umgebung Spa\u00df zu haben, in der Sie als absoluter Anf\u00e4nger <a href=\"https:\/\/www.dreamhost.com\/blog\/de\/anfangerleitfaden-zum-staging-von-websites\/\" target=\"_blank\" rel=\"noreferrer noopener\">Fehler ohne Konsequenzen machen k\u00f6nnen<\/a>, w\u00e4hrend Sie komplexe CSS-Konzepte erfassen.<\/p>\n<h2 id=\"h2_bringen-sie-ihre-css-faehigkeiten-auf-die-naechste-stufe\" class=\"wp-block-heading\">Bringen Sie Ihre CSS-F\u00e4higkeiten auf die n\u00e4chste Stufe<\/h2>\n<p>CSS ist ein gro\u00dfartiger Ausgangspunkt, wenn Sie Ihre technischen <a href=\"https:\/\/www.dreamhost.com\/blog\/scary-web-design-mistakes\/\" target=\"_blank\" rel=\"noreferrer noopener\">Webdesign-F\u00e4higkeiten<\/a> entwickeln m\u00f6chten. Es ist die Basis f\u00fcr viele benutzerdefinierte Seitendesigns und Sie k\u00f6nnen es verwenden, um einzigartige Funktionen und Funktionalit\u00e4ten zu erstellen. Selbst wenn Sie nicht wissen, wie man programmiert, gibt es viele kostenlose Lehranleitungen, die Ihnen den Einstieg in CSS erleichtern k\u00f6nnen.<\/p>\n<p>Um es zu \u00fcberpr\u00fcfen, hier sind einige der besten Methoden, die Sie verwenden k\u00f6nnen, um CSS zu lernen:<\/p>\n<ul class=\"wp-block-list\"><li>Schauen Sie sich ein YouTube-Tutorial von <a href=\"https:\/\/www.youtube.com\/c\/Codevolution\" target=\"_blank\" rel=\"noreferrer noopener\">Codevolution<\/a> oder <a href=\"https:\/\/www.youtube.com\/c\/SuperSimpleDev\" target=\"_blank\" rel=\"noreferrer noopener\">SuperSimpleDev<\/a> an.<\/li><li>Nehmen Sie einen CSS-Kurs bei <a href=\"https:\/\/www.codecademy.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Codecademy<\/a> oder <a href=\"https:\/\/www.udemy.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Udemy<\/a>.<\/li><li>Spielen Sie Lernspiele wie <a href=\"https:\/\/flukeout.github.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">CSS Diner<\/a> oder <a href=\"http:\/\/flexboxfroggy.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Flexbox Froggy<\/a>.<\/li><\/ul>\n<p>Sie werden sich wahrscheinlich auf schnelles Hosting verlassen wollen, wenn Sie benutzerdefiniertes CSS zu Ihrer Website hinzuf\u00fcgen. Bei DreamHost k\u00f6nnen <a href=\"https:\/\/www.dreamhost.com\/de\/hosting\/\" target=\"_blank\" rel=\"noreferrer noopener\">unsere Shared Hosting-Pl\u00e4ne<\/a> die Unterst\u00fctzung bieten, die Sie ben\u00f6tigen, um Ihre einzigartigen Designs reibungslos laufen zu lassen!<\/p>\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>","protected":false},"excerpt":{"rendered":"<p>Entdecken Sie, wie Sie CSS in Ihrer Freizeit lernen k\u00f6nnen. Mit unserer handverlesenen Sammlung kostenloser Ressourcen und Tutorials k\u00f6nnen Sie Ihre Programmierf\u00e4higkeiten schnell verbessern.<\/p>\n","protected":false},"author":1058,"featured_media":46248,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"","toc_headlines":"[[\"h-a-brief-introduction-to-css\",\"Eine kurze Einf\u00fchrung in CSS\"],[\"h2_warum-sie-erwaegen-sollten-css-zu-lernen\",\"Warum Sie erw\u00e4gen sollten, CSS zu lernen\"],[\"h2_wie-man-css-schnell-lernt-3-einfache-methoden\",\"Wie man CSS schnell lernt (3 einfache Methoden)\"],[\"h2_bringen-sie-ihre-css-faehigkeiten-auf-die-naechste-stufe\",\"Bringen Sie Ihre CSS-F\u00e4higkeiten auf die n\u00e4chste Stufe\"]]","hide_toc":false,"footnotes":""},"categories":[14509],"tags":[],"class_list":["post-52793","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdesign-de"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.3 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Wie man CSS im Jahr 2024 lernt (schnell &amp; kostenlos) - DreamHost Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www-dev.dreamhost.com\/blog\/de\/css-lernen\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Wie man CSS im Jahr 2024 lernt (schnell &amp; kostenlos)\" \/>\n<meta property=\"og:description\" content=\"Entdecken Sie, wie Sie CSS in Ihrer Freizeit lernen k\u00f6nnen. Mit unserer handverlesenen Sammlung kostenloser Ressourcen und Tutorials k\u00f6nnen Sie Ihre Programmierf\u00e4higkeiten schnell verbessern.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/de\/css-lernen\/\" \/>\n<meta property=\"og:site_name\" content=\"DreamHost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DreamHost\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-06-10T08:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-07T14:06:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/07\/1460x1095_blog_hero_how_to_learn_css_fast_free_.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"2190\" \/>\n\t<meta property=\"og:image:height\" content=\"1643\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Ian Hernandez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:site\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ian Hernandez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Wie man CSS im Jahr 2024 lernt (schnell & kostenlos) - DreamHost Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www-dev.dreamhost.com\/blog\/de\/css-lernen\/","og_locale":"en_US","og_type":"article","og_title":"Wie man CSS im Jahr 2024 lernt (schnell & kostenlos)","og_description":"Entdecken Sie, wie Sie CSS in Ihrer Freizeit lernen k\u00f6nnen. Mit unserer handverlesenen Sammlung kostenloser Ressourcen und Tutorials k\u00f6nnen Sie Ihre Programmierf\u00e4higkeiten schnell verbessern.","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/de\/css-lernen\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2024-06-10T08:00:00+00:00","article_modified_time":"2025-01-07T14:06:29+00:00","og_image":[{"width":2190,"height":1643,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/07\/1460x1095_blog_hero_how_to_learn_css_fast_free_.webp","type":"image\/webp"}],"author":"Ian Hernandez","twitter_card":"summary_large_image","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Ian Hernandez","Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/css-lernen\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/css-lernen\/"},"author":{"name":"Ian Hernandez","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/220faf2464d5ae08e41cf5f3b28fdc96"},"headline":"Wie man CSS im Jahr 2024 lernt (schnell &#038; kostenlos)","datePublished":"2024-06-10T08:00:00+00:00","dateModified":"2025-01-07T14:06:29+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/css-lernen\/"},"wordCount":2366,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/css-lernen\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/07\/1460x1095_blog_hero_how_to_learn_css_fast_free_.webp","articleSection":["Webdesign"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/css-lernen\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/de\/css-lernen\/","name":"Wie man CSS im Jahr 2024 lernt (schnell & kostenlos) - DreamHost Blog","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/css-lernen\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/css-lernen\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/07\/1460x1095_blog_hero_how_to_learn_css_fast_free_.webp","datePublished":"2024-06-10T08:00:00+00:00","dateModified":"2025-01-07T14:06:29+00:00","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/css-lernen\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/de\/css-lernen\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/css-lernen\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/07\/1460x1095_blog_hero_how_to_learn_css_fast_free_.webp","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/07\/1460x1095_blog_hero_how_to_learn_css_fast_free_.webp","width":2190,"height":1643,"caption":"How to Learn CSS In 2024 (Fast & Free)"},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/css-lernen\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"Wie man CSS im Jahr 2024 lernt (schnell &#038; kostenlos)"}]},{"@type":"WebSite","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website","url":"https:\/\/www-dev.dreamhost.com\/blog\/","name":"DreamHost Blog","description":"","publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-dev.dreamhost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization","name":"DreamHost","url":"https:\/\/www-dev.dreamhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","contentUrl":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","width":1200,"height":168,"caption":"DreamHost"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DreamHost\/","https:\/\/x.com\/dreamhost","https:\/\/www.instagram.com\/dreamhost\/","https:\/\/www.linkedin.com\/company\/dreamhost\/","https:\/\/www.youtube.com\/user\/dreamhostusa"]},{"@type":"Person","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/220faf2464d5ae08e41cf5f3b28fdc96","name":"Ian Hernandez","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","caption":"Ian Hernandez"},"description":"Ian is a Product Designer based in Los Angeles, California. He is responsible for driving brand and product design at DreamHost, developing and maintaining our internal design system, and writing frontend code when he can. In his free time, he enjoys walking his dog, learning history, and discovering new music online and irl. Connect with him on LinkedIn: https:\/\/www.linkedin.com\/in\/ianhernandez23\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/ianh\/"}]}},"lang":"de","translations":{"de":52793,"es":35309,"en":35292,"pt":57093,"pl":57096,"uk":57101,"ru":57134,"it":67944,"fr":69481,"nl":69507},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/52793","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/users\/1058"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=52793"}],"version-history":[{"count":3,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/52793\/revisions"}],"predecessor-version":[{"id":59830,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/52793\/revisions\/59830"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/46248"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=52793"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=52793"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=52793"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}