Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Oppiskele Verkkosivuston Tyylin Lisääminen CSS:llä | Blogisivuston Rakentaminen
Tekoälyavusteisen Web-Kehityksen Perusteet

bookVerkkosivuston Tyylin Lisääminen CSS:llä

Tavoite

Seuraava vaihe on lisätä sivustolle tyylit, jotta se ei näytä pelkältä raakalta HTML:ltä. Määrittelemme myös värit, jotka haluamme nähdä verkkosivustolla.

Voimme käyttää seuraavaa lähdettä (https://colorhunt.co/) valitaksemme mieluisimman väripaletin.

Olemme valinneet seuraavan väripaletin:

Mahdollinen kehotus

Luo CSS-tyylitiedosto, joka voidaan liittää kyseiseen HTML-tiedostoon ja joka sisältää tyylielementtejä sekä noudattaa seuraavaa väripalettia: #32012F, #524C42, #E2DFD0 ja #F97300. Kirjoita täydellinen CSS-koodi tämän saavuttamiseksi, hyödyntäen parhaita käytäntöjä visuaalisesti miellyttävän ulkoasun luomiseksi.

Tulokset

Tärkeää: Ainoa muutos, joka koodiin tarvitsee tehdä, on yhdistää CSS-tiedosto HTML-tiedostoon head-osiossa.

index.html

index.html

index.css

index.css

copy

Verkkosivuston tila

Videotutoriaali

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 4. Luku 3

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

Awesome!

Completion rate improved to 5

bookVerkkosivuston Tyylin Lisääminen CSS:llä

Pyyhkäise näyttääksesi valikon

Tavoite

Seuraava vaihe on lisätä sivustolle tyylit, jotta se ei näytä pelkältä raakalta HTML:ltä. Määrittelemme myös värit, jotka haluamme nähdä verkkosivustolla.

Voimme käyttää seuraavaa lähdettä (https://colorhunt.co/) valitaksemme mieluisimman väripaletin.

Olemme valinneet seuraavan väripaletin:

Mahdollinen kehotus

Luo CSS-tyylitiedosto, joka voidaan liittää kyseiseen HTML-tiedostoon ja joka sisältää tyylielementtejä sekä noudattaa seuraavaa väripalettia: #32012F, #524C42, #E2DFD0 ja #F97300. Kirjoita täydellinen CSS-koodi tämän saavuttamiseksi, hyödyntäen parhaita käytäntöjä visuaalisesti miellyttävän ulkoasun luomiseksi.

Tulokset

Tärkeää: Ainoa muutos, joka koodiin tarvitsee tehdä, on yhdistää CSS-tiedosto HTML-tiedostoon head-osiossa.

index.html

index.html

index.css

index.css

copy

Verkkosivuston tila

Videotutoriaali

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 4. Luku 3
some-alt