Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Oppiskele Johdanto CSS:ään Verkkosivujen Tyylittelyssä | Verkkosivuston Anatomia
Learn
Kurssit
Projects
Tracks
Practice
Real World Projects
Quizzes & Challenges
Quizzes
Challenges
/
Web-kehitys ChatGPT:n Avulla

bookJohdanto CSS:ään Verkkosivujen Tyylittelyssä

CSS (Cascading Style Sheets) on kieli, jota käytetään lisäämään tyyliä ja parantamaan HTML-elementtien visuaalista ilmettä verkkosivulla. Se on keskeisessä roolissa verkkosivuston ulkoasun parantamisessa, aivan kuten sisustus, seinien väri, huonekalut, sohvan materiaali sekä ikkunoiden ja ovien muoto vaikuttavat talon yleisilmeeseen.

CSS:n lisääminen HTML:n tyylittelyyn

CSS:n avulla voidaan hallita HTML-elementtien esitystapaa ja asettelua, kuten värejä, fontteja, välistyksiä ja paljon muuta. Näin CSS-tyylejä voidaan soveltaa HTML-elementteihin:

Sisäiset tyylit

Käyttämällä style-attribuuttia voimme lisätä CSS-tyylejä suoraan yksittäisiin HTML-elementteihin. Tämä menetelmä soveltuu nopeiden, kertaluonteisten tyylien lisäämiseen.

index.html

index.html

copy

Sisäiset tyylit

Voimme myös sisällyttää CSS-tyylejä <style>-tageihin HTML-dokumentin <head>-osioon. Tämä menetelmä soveltuu useiden elementtien tyylittämiseen samassa dokumentissa.

index.html

index.html

copy

Ulkoiset tyylitiedostot

Suuremmissa projekteissa tai kun halutaan käyttää samoja tyylejä useilla sivuilla, on tavallista käyttää ulkoisia tyylitiedostoja. Luo erillinen CSS-tiedosto (esim. index.css) ja liitä se HTML-dokumenttiin käyttämällä <link>-tagia.

Tarkista esimerkistä index.html- ja index.css-tiedostot.

index.html

index.html

index.css

index.css

copy

CSS-valitsimet

CSS-valitsimet kohdistavat HTML-elementtejä kriteerien, kuten elementtityypin, luokan tai ID:n perusteella. Valitsin määrittää tarkan elementin, johon tietyt tyylit tulee soveltaa.

Elementtivalitsin

Kohdistaa kaikki tietyn tyyppiset elementit.

p {
  /* styles */
}

Luokkavalitsin

Kohdistaa elementit, joilla on tietty class-attribuutti.

.highlight {
  /* styles */
}

ID-valitsin

Kohdistaa tiettyyn elementtiin, jolla on yksilöllinen ID-attribuutti.

#header {
  /* styles */
}

CSS-ominaisuudet

CSS-ominaisuudet määrittävät, miten valitut elementit tyylitellään. Tässä on joitakin yleisiä CSS-ominaisuuksia:

  • color määrittää tekstin värin;
  • background-color määrittää elementin taustavärin;
  • font-size määrittää tekstin koon;
  • margin lisää tilaa elementin ympärille.

Voimme mukauttaa verkkosivun ulkoasua soveltamalla CSS-tyylejä HTML-elementteihin, jolloin luodaan visuaalisesti miellyttäviä ja käyttäjäystävällisiä kokemuksia.

Esimerkki:

index.html

index.html

index.css

index.css

copy

Videotutoriaali

question mark

Mitkä seuraavista ovat kelvollisia tapoja lisätä CSS-tyylejä HTML-sivulle?

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 2. 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

bookJohdanto CSS:ään Verkkosivujen Tyylittelyssä

Pyyhkäise näyttääksesi valikon

CSS (Cascading Style Sheets) on kieli, jota käytetään lisäämään tyyliä ja parantamaan HTML-elementtien visuaalista ilmettä verkkosivulla. Se on keskeisessä roolissa verkkosivuston ulkoasun parantamisessa, aivan kuten sisustus, seinien väri, huonekalut, sohvan materiaali sekä ikkunoiden ja ovien muoto vaikuttavat talon yleisilmeeseen.

CSS:n lisääminen HTML:n tyylittelyyn

CSS:n avulla voidaan hallita HTML-elementtien esitystapaa ja asettelua, kuten värejä, fontteja, välistyksiä ja paljon muuta. Näin CSS-tyylejä voidaan soveltaa HTML-elementteihin:

Sisäiset tyylit

Käyttämällä style-attribuuttia voimme lisätä CSS-tyylejä suoraan yksittäisiin HTML-elementteihin. Tämä menetelmä soveltuu nopeiden, kertaluonteisten tyylien lisäämiseen.

index.html

index.html

copy

Sisäiset tyylit

Voimme myös sisällyttää CSS-tyylejä <style>-tageihin HTML-dokumentin <head>-osioon. Tämä menetelmä soveltuu useiden elementtien tyylittämiseen samassa dokumentissa.

index.html

index.html

copy

Ulkoiset tyylitiedostot

Suuremmissa projekteissa tai kun halutaan käyttää samoja tyylejä useilla sivuilla, on tavallista käyttää ulkoisia tyylitiedostoja. Luo erillinen CSS-tiedosto (esim. index.css) ja liitä se HTML-dokumenttiin käyttämällä <link>-tagia.

Tarkista esimerkistä index.html- ja index.css-tiedostot.

index.html

index.html

index.css

index.css

copy

CSS-valitsimet

CSS-valitsimet kohdistavat HTML-elementtejä kriteerien, kuten elementtityypin, luokan tai ID:n perusteella. Valitsin määrittää tarkan elementin, johon tietyt tyylit tulee soveltaa.

Elementtivalitsin

Kohdistaa kaikki tietyn tyyppiset elementit.

p {
  /* styles */
}

Luokkavalitsin

Kohdistaa elementit, joilla on tietty class-attribuutti.

.highlight {
  /* styles */
}

ID-valitsin

Kohdistaa tiettyyn elementtiin, jolla on yksilöllinen ID-attribuutti.

#header {
  /* styles */
}

CSS-ominaisuudet

CSS-ominaisuudet määrittävät, miten valitut elementit tyylitellään. Tässä on joitakin yleisiä CSS-ominaisuuksia:

  • color määrittää tekstin värin;
  • background-color määrittää elementin taustavärin;
  • font-size määrittää tekstin koon;
  • margin lisää tilaa elementin ympärille.

Voimme mukauttaa verkkosivun ulkoasua soveltamalla CSS-tyylejä HTML-elementteihin, jolloin luodaan visuaalisesti miellyttäviä ja käyttäjäystävällisiä kokemuksia.

Esimerkki:

index.html

index.html

index.css

index.css

copy

Videotutoriaali

question mark

Mitkä seuraavista ovat kelvollisia tapoja lisätä CSS-tyylejä HTML-sivulle?

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 2. Luku 3
some-alt