CSS-tyylitiedostoja käytetään verkkosivujen muotoiluun erillään HTML:stä. CSS-tyylitiedosto sisältää säännöt, jotka määrittelevät esimerkiksi elementtien värit, fontit, taustat ja sijainnit. CSS:n käyttö mahdollistaa verkkosivujen ulkoasun muokkaamisen helposti ja ylläpidettävästi.
CSS-tyylitiedosto voidaan sisällyttää HTML-dokumenttiin eri tavoin. Yksi yleisimmistä tavoista on käyttää <link>-elementtiä. Tällöin CSS-tyylitiedosto ladataan erillisenä tiedostona ja se liitetään HTML-dokumenttiin <head>-osassa seuraavasti:
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>Tiedostonimen sijaan href-attribuutissa voidaan käyttää myös URL-osoitetta, jolloin CSS-tiedosto voidaan ladata etäpalvelimelta.
Toinen tapa käyttää CSS-tyylitiedostoa on kirjoittaa säännöt suoraan HTML-dokumenttiin <style>-elementin sisään. Tällöin CSS-tyylitiedosto ei ole erillinen tiedosto, vaan se sisältyy suoraan HTML-dokumenttiin:
<head>
<style>
/* CSS-säännöt */
</style>
</head>
CSS-säännöt kirjoitetaan selektorien ja sääntöjen avulla. Selektori määrittelee, mihin elementtiin sääntö vaikuttaa, ja sääntö määrittelee, mitä säännön sisällä oleva CSS-koodi tekee. Esimerkiksi seuraava CSS-sääntö määrittelee otsikko-elementin fontin:
h1 {
font-family: Arial, sans-serif;
}Tässä selektori on "h1" ja säännössä määritellään, että otsikko-elementin fontiksi valitaan Arial tai mikäli sitä ei ole saatavilla, niin sans-serif.
CSS-sääntöjä voidaan myös kirjoittaa usealle riville, mikä helpottaa niiden luettavuutta ja ylläpidettävyyttä:
h1 {
font-family: Arial, sans-serif;
font-size: 2em;
color: #333;
}CSS-sääntöjen avulla voidaan muokata monia erilaisia ominaisuuksia, kuten elementin taustaväriä, reunuksia, sisennystä, marginaaleja ja animaatioita. CSS tarjoaa myös erilaisia yksikköjä, kuten pikseleitä, prosentteja ja em-yksiköitä, joiden avulla voidaan määrittää elementtien kokoja ja sijainteja.
CSS:n käyttö mahdollistaa myös responsiivisen suunnittelun, joka tarkoittaa verkkosivun suunnittelua siten, että se mukautuu erilaisiin näyttökokoihin. Tämä on erityisen tärkeää nykyisin, kun verkkosivuja käytetään yhä enemmän erilaisilla laitteilla, kuten älypuhelimilla ja tableteilla.
CSS:n kehitys jatkuu edelleen, ja uusia ominaisuuksia lisätään säännöllisesti. Esimerkiksi CSS Grid ja Flexbox ovat suhteellisen uusia ominaisuuksia, jotka mahdollistavat entistä monimutkaisempien sivustojen suunnittelun ja toteutuksen.
Valmis ryhtymään eettiseksi hakkeriksi?
Aloita jo tänään.
Hakatemian jäsenenä saat rajoittamattoman pääsyn Hakatemian moduuleihin, harjoituksiin ja työkaluihin, sekä pääset discord-kanavalle jossa voit pyytää apua sekä ohjaajilta että muilta Hakatemian jäseniltä.