Summary  
This chapter explains how to link a CSS file to an HTML document and use selectors, properties, and a chosen color palette to style elements such as headers, paragraphs, images, and footers for consistent typography, layout, and visual design.

General domain of usage  
Front-end web development (web page styling)

## Ziel
Der nächste Schritt besteht darin, unserer Website ein Design zu verleihen, damit sie nicht wie reines HTML aussieht. Außerdem legen wir die Farben fest, die auf der Website verwendet werden sollen.

Wir können die folgende Quelle (<a href="https://colorhunt.co/" target="_blank" style="color: #ff8a00; font-weight: 600; text-decoration: none; transition: .3s ease-in-out" onmouseover="this.style.color='#ff0000'" onmouseout="this.style.color='#d27204'" ><svg width="1em" height="1em" viewBox="0 0 30 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M17.289 17.305v0c-1.754 1.754-4.597 1.754-6.351 0l-7.76-7.759c-1.755-1.755-1.755-4.601 0-6.356v0c1.753-1.753 4.595-1.756 6.351-0.005l6.208 6.187"></path><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M12.504 13.97v0c1.754-1.754 4.597-1.754 6.351 0l7.762 7.762c1.754 1.754 1.754 4.597 0 6.351v0c-1.754 1.754-4.597 1.754-6.351 0l-5.953-5.953"></path></svg>https://colorhunt.co/</a>) verwenden, um die Farbpalette auszuwählen, die uns am meisten zusagt.

Wir haben folgende Farbpalette ausgewählt:

## Möglicher Prompt
Erstellung eines CSS-Stylesheets, das auf das angegebene HTML angewendet werden kann. Das Stylesheet soll Stilelemente enthalten und die folgende Farbpalette berücksichtigen: `#32012F`, `#524C42`, `#E2DFD0` und `#F97300`. Vollständiger CSS-Code zur Umsetzung, unter Einhaltung bewährter Methoden für ein ansprechendes Design.

## Ergebnis
**Wichtig:** Die einzige Änderung, die im Code vorgenommen werden muss, ist das Einbinden der CSS-Datei in die HTML-Datei im `head`.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+TXkgQmxvZzwvdGl0bGU+CgogICAgPCEtLSBMaW5raW5nIENTUyBmaWxlIHRvIEhUTUwgZG9jdW1lbnQgLS0+CiAgICA8bGluayByZWw9InN0eWxlc2hlZXQiIGhyZWY9ImluZGV4LmNzcyIgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8aGVhZGVyPgogICAgICA8aDE+V2VsY29tZSB0byBNeSBCbG9nPC9oMT4KICAgIDwvaGVhZGVyPgoKICAgIDxtYWluPgogICAgICA8YXJ0aWNsZT4KICAgICAgICA8aDI+QXJ0aWNsZSAxOiBFeHBsb3JpbmcgTmF0dXJlPC9oMj4KICAgICAgICA8cD4KICAgICAgICAgIExvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ciBhZGlwaXNjaW5nIGVsaXQuIFNlZCBldWlzbW9kLCB0b3J0b3Igbm9uCiAgICAgICAgICB1bGxhbWNvcnBlciBjb21tb2RvLCBqdXN0byBsaWJlcm8gbWF4aW11cyBwdXJ1cywgdmVsIHB1bHZpbmFyIHR1cnBpcyBxdWFtIHZpdGFlIG1pLiBOdWxsYW0KICAgICAgICAgIGF1Y3RvciwgdG9ydG9yIGlkIHNhZ2l0dGlzIGZlcm1lbnR1bSwgbGVvIGxhY3VzIHZlbmVuYXRpcyB0b3J0b3IsIGF0IHRyaXN0aXF1ZSBsZW8gbWFnbmEKICAgICAgICAgIGluIGxvcmVtLgogICAgICAgIDwvcD4KICAgICAgICA8aW1nIHNyYz0ibmF0dXJlLmpwZyIgYWx0PSJOYXR1cmUgSW1hZ2UiIC8+CiAgICAgICAgPHA+Q2F0ZWdvcnk6IE5hdHVyZTwvcD4KICAgICAgPC9hcnRpY2xlPgoKICAgICAgPGFydGljbGU+CiAgICAgICAgPGgyPkFydGljbGUgMjogQ29va2luZyBBZHZlbnR1cmVzPC9oMj4KICAgICAgICA8cD4KICAgICAgICAgIFBoYXNlbGx1cyBydXRydW0gdGluY2lkdW50IHNhcGllbiwgc2VkIHZlc3RpYnVsdW0gdmVsaXQgdmVoaWN1bGEgbmVjLiBTZWQgcGhhcmV0cmEgZHVpIGluCiAgICAgICAgICBmZXJtZW50dW0gc29kYWxlcy4gUGVsbGVudGVzcXVlIGhhYml0YW50IG1vcmJpIHRyaXN0aXF1ZSBzZW5lY3R1cyBldCBuZXR1cyBldCBtYWxlc3VhZGEKICAgICAgICAgIGZhbWVzIGFjIHR1cnBpcyBlZ2VzdGFzLgogICAgICAgIDwvcD4KICAgICAgICA8aW1nIHNyYz0iY29va2luZy5qcGciIGFsdD0iQ29va2luZyBJbWFnZSIgLz4KICAgICAgICA8cD5DYXRlZ29yeTogQ29va2luZzwvcD4KICAgICAgPC9hcnRpY2xlPgoKICAgICAgPGFydGljbGU+CiAgICAgICAgPGgyPkFydGljbGUgMzogVHJhdmVsaW5nIEFyb3VuZCB0aGUgV29ybGQ8L2gyPgogICAgICAgIDxwPgogICAgICAgICAgTnVsbGFtIGVmZmljaXR1ciBsYWN1cyBuZWMgdXJuYSBmcmluZ2lsbGEsIHV0IHZlbmVuYXRpcyB0b3J0b3IgbGFjaW5pYS4gRHVpcyB2aXRhZSBtYXVyaXMKICAgICAgICAgIHNlZCBtaSBzZW1wZXIgYWxpcXVldC4gQWVuZWFuIHZlc3RpYnVsdW0gbGliZXJvIGVnZXQgbmliaCBtYWxlc3VhZGEsIGlkIGx1Y3R1cyBsaWJlcm8KICAgICAgICAgIHBoYXJldHJhLiBGdXNjZSBhdWN0b3IgbWF1cmlzIHNlZCB0cmlzdGlxdWUgZWZmaWNpdHVyLgogICAgICAgIDwvcD4KICAgICAgICA8aW1nIHNyYz0idHJhdmVsLmpwZyIgYWx0PSJUcmF2ZWwgSW1hZ2UiIC8+CiAgICAgICAgPHA+Q2F0ZWdvcnk6IFRyYXZlbDwvcD4KICAgICAgPC9hcnRpY2xlPgogICAgPC9tYWluPgoKICAgIDxmb290ZXI+CiAgICAgIDxwPiZjb3B5OyAyMDI0IE15IEJsb2cuIEFsbCByaWdodHMgcmVzZXJ2ZWQuPC9wPgogICAgPC9mb290ZXI+CiAgPC9ib2R5Pgo8L2h0bWw+

LyogUmVzZXQgZGVmYXVsdCBtYXJnaW4gYW5kIHBhZGRpbmcgKi8KYm9keSwKaDEsCmgyLApwLAppbWcgewogIG1hcmdpbjogMDsKICBwYWRkaW5nOiAwOwp9CgovKiBBcHBseSBmb250IGFuZCBiYWNrZ3JvdW5kIGNvbG9ycyAqLwpib2R5IHsKICBmb250LWZhbWlseTogQXJpYWwsIHNhbnMtc2VyaWY7CiAgYmFja2dyb3VuZC1jb2xvcjogI2UyZGZkMDsKICBjb2xvcjogIzMyMDEyZjsKfQoKLyogSGVhZGVyIHN0eWxpbmcgKi8KaGVhZGVyIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjNTI0YzQyOwogIHBhZGRpbmc6IDIwcHg7CiAgdGV4dC1hbGlnbjogY2VudGVyOwp9CgovKiBNYWluIGNvbnRlbnQgc3R5bGluZyAqLwptYWluIHsKICBwYWRkaW5nOiAyMHB4Owp9CgovKiBBcnRpY2xlIHN0eWxpbmcgKi8KYXJ0aWNsZSB7CiAgbWFyZ2luLWJvdHRvbTogMzBweDsKfQoKLyogQXJ0aWNsZSB0aXRsZSBzdHlsaW5nICovCmFydGljbGUgaDIgewogIGNvbG9yOiAjMzIwMTJmOwogIGZvbnQtc2l6ZTogMjRweDsKICBtYXJnaW4tYm90dG9tOiAxMHB4Owp9CgovKiBBcnRpY2xlIHBhcmFncmFwaCBzdHlsaW5nICovCmFydGljbGUgcCB7CiAgbGluZS1oZWlnaHQ6IDEuNjsKICBtYXJnaW4tYm90dG9tOiAxNXB4Owp9CgovKiBJbWFnZSBzdHlsaW5nICovCmFydGljbGUgaW1nIHsKICBkaXNwbGF5OiBibG9jazsKICBtYXgtd2lkdGg6IDEwMCU7CiAgaGVpZ2h0OiBhdXRvOwogIG1hcmdpbi1ib3R0b206IDE1cHg7Cn0KCi8qIENhdGVnb3J5IHN0eWxpbmcgKi8KYXJ0aWNsZSBwOmxhc3QtY2hpbGQgewogIGZvbnQtc3R5bGU6IGl0YWxpYzsKICBjb2xvcjogI2Y5NzMwMDsKfQoKLyogRm9vdGVyIHN0eWxpbmcgKi8KZm9vdGVyIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjNTI0YzQyOwogIGNvbG9yOiAjZTJkZmQwOwogIHRleHQtYWxpZ246IGNlbnRlcjsKICBwYWRkaW5nOiAxMHB4Owp9

Warum müssen wir die Zeile `<link rel="stylesheet" href="index.css" />` im `<head>`-Bereich des HTML-Dokuments einfügen?

Erlernen Sie die Grundlagen der Webentwicklung und nutzen Sie dabei die Leistungsfähigkeit von KI-Tools wie ChatGPT. Verstehen Sie die Aufgaben von HTML, CSS und JavaScript beim Erstellen von Websites und wie KI Ihre Codiergeschwindigkeit und Kreativität steigern kann. Üben Sie das Erstellen effektiver Prompts und das Generieren von Code mit ChatGPT. Entwickeln Sie eine vollständige Blog-Website von Grund auf mithilfe KI-gestützter Entwicklung und erwerben Sie praktische Fähigkeiten für Ihre Webprojekte.

Einführung in die wichtigsten Konzepte und Technologien der Webentwicklung, einschließlich der Rolle von KI im modernen Programmieren. Dieser Abschnitt bildet die Grundlage für Ihren Lernweg, behandelt die Grundlagen der Webentwicklung und zeigt auf, wie KI Produktivität, Kreativität und Effizienz beim Programmieren steigert.

Erlernen der grundlegenden Webentwicklungstechnologien. Vertiefung in die Grundlagen von HTML, CSS und JavaScript, mit Erläuterung ihrer jeweiligen Funktionen und ihrer gemeinsamen Rolle bei der Gestaltung der digitalen Landschaft.

Erkunden Sie die Leistungsfähigkeit von ChatGPT, indem Sie dessen Fähigkeiten kennenlernen und erfahren, wie es effektiv genutzt werden kann.
Einblicke in die Erstellung von Prompts und die Arbeit mit Code durch ChatGPT.
Abschließende praktische Hinweise zur Nutzung von ChatGPT in verschiedenen Anwendungen.

Erstellen einer vollständigen und funktionsfähigen Blog-Website von Grund auf unter Einbeziehung verschiedener Webentwicklungstechniken mit ChatGPT.

Anwenden von Website-Styling mit CSS

Ziel

Möglicher Prompt

Ergebnis

Website-Status