CSS-reunuksilla tarkoitetaan reunaviivojen lisäämistä HTML-elementteihin. Reunuksia käytetään yleensä sivuston suunnittelussa korostamaan tiettyjä osia tai antamaan visuaalista erottelua eri elementtien välillä. CSS:n avulla voit määrittää reunaviivan värin, tyylin, paksuuden ja pyöristyksen.

Alla on esimerkkejä CSS-reunaviivojen käytöstä:

Voit määrittää reunaviivan värin CSS:ssä käyttämällä border-color -ominaisuutta. Esimerkiksi, jos haluat asettaa reunaviivan värin punaiseksi, voit kirjoittaa seuraavan säännön:

Voit määrittää reunaviivan tyylin käyttämällä border-style -ominaisuutta. Esimerkiksi, jos haluat käyttää pisteviivaa reunaviivana, voit kirjoittaa seuraavan säännön:

Voit määrittää reunaviivan paksuuden käyttämällä border-width -ominaisuutta. Esimerkiksi, jos haluat asettaa reunaviivan paksuuden 2 pikseliksi, voit kirjoittaa seuraavan säännön:

Reunaviivan pyöristyksen määrittäminen

Voit määrittää reunaviivan pyöristyksen käyttämällä border-radius -ominaisuutta. Esimerkiksi, jos haluat pyöristää reunaviivan kulmat 5 pikselillä, voit kirjoittaa seuraavan säännön:

Voit myös yhdistellä näitä ominaisuuksia yhteen CSS-sääntöön. Esimerkiksi, jos haluat luoda vihreän reunaviivan, joka käyttää kaksoisviivaa, on 4 pikselin paksuinen ja pyöristetyt kulmat, voit kirjoittaa seuraavan säännön:

CSS-reunaviivojen avulla voit luoda monipuolisia ja näyttäviä designeja sivustollesi.

CSS-reunuksilla tarkoitetaan reunaviivojen lisäämistä HTML-elementteihin. Reunuksia käytetään yleensä sivuston suunnittelussa korostamaan tiettyjä osia tai antamaan visuaalista erottelua eri elementtien välillä. CSS:n avulla voit määrittää reunaviivan värin, tyylin, paksuuden ja pyöristyksen.

Alla on esimerkkejä CSS-reunaviivojen käytöstä:

## Reunaviivan värin määrittäminen

Voit määrittää reunaviivan värin CSS:ssä käyttämällä border-color -ominaisuutta. Esimerkiksi, jos haluat asettaa reunaviivan värin punaiseksi, voit kirjoittaa seuraavan säännön:

```css
border-color: red;
```

---

## Reunaviivan tyylin määrittäminen

Voit määrittää reunaviivan tyylin käyttämällä border-style -ominaisuutta. Esimerkiksi, jos haluat käyttää pisteviivaa reunaviivana, voit kirjoittaa seuraavan säännön:

```css
border-style: dotted;
```

---

## Reunaviivan paksuuden määrittäminen

Voit määrittää reunaviivan paksuuden käyttämällä border-width -ominaisuutta. Esimerkiksi, jos haluat asettaa reunaviivan paksuuden 2 pikseliksi, voit kirjoittaa seuraavan säännön:

```css
border-width: 2px;
```

---

## Reunaviivan pyöristyksen määrittäminen

Voit määrittää reunaviivan pyöristyksen käyttämällä border-radius -ominaisuutta. Esimerkiksi, jos haluat pyöristää reunaviivan kulmat 5 pikselillä, voit kirjoittaa seuraavan säännön:

```css
border-radius: 5px;
```

Voit myös yhdistellä näitä ominaisuuksia yhteen CSS-sääntöön. Esimerkiksi, jos haluat luoda vihreän reunaviivan, joka käyttää kaksoisviivaa, on 4 pikselin paksuinen ja pyöristetyt kulmat, voit kirjoittaa seuraavan säännön:

```css
border: 4px double green;
border-radius: 10px;
```

CSS-reunaviivojen avulla voit luoda monipuolisia ja näyttäviä designeja sivustollesi.

---

## Harjoittele

@embed b3c158b579c8


CSS Reunukset

Tämä kurssi on johdatus web-kehitykseen ja se keskittyy HTML:n, CSS:n, JavaScriptin ja taustajärjestelmien perusteisiin. Kurssin tavoitteena on antaa opiskelijoille tarvittavat taidot ja tietämys, jotta he voivat suunnitella ja kehittää ja ymmärtää yksinkertaisia web-sovelluksia.

Tämä kurssi on johdatus web-kehitykseen ja se keskittyy verkkosivustojen peruspalikoiden, eli HTML:n, CSS:n ja JavaScriptin sekä taustajärjestelmien perusteisiin. Kurssin tavoitteena on antaa sinulle tarvittavat taidot ja tietämys, jotta voit suunnitella ja kehittää yksinkertaisia full-stack web-sovelluksia, sekä ymmärtää muiden tekemiä web-sovelluksia.

Ensimmäisessä osassa opiskellaa HTML:ää joka on verkkosivustojen rakentamisessa käytetty merkintäkieli.


Toisessa osassa opiskellaan CSS:n perusteita, kuten tyylitiedoston käyttöä, sääntöjä, selektoreita ja muotoilua. Käsitellään myös CSS:n edistyneitä ominaisuuksia, kuten animaatioita ja responsiivista suunnittelua.


Kolmannessa osassa opiskellaan JavaScriptia joka on nykyisin valtavan tärkeä työkalu sekä frontend että backend -kehityksessä ja sitä kautta myös tietoturvassa ja eettisessä hakkeroinnissa.

Viimeisessä osassa opiskellaan rakentamaan taustajärjestelmiä Python Flask sovelluskehyksellä. Opit taustajärjestelmien perusteet, kuten tietokantojen käytön, autentikoinnin, istunnonhallinnan sekä pääsynhallinnan.

Voit tehdä kurssin tehtäviä omalla koneellasi jos haluat, mutta jokaisessa koodiesimerkissä on nappi jolla voit suoraan selaimessa ajaa kyseisen koodin ja nähdä miltä sivu näyttää, tai mitä skripti tulostaa. Sinun ei siis tarvitse asentaa mitään, mutta voit jos haluat.

On suositeltavaa mutta vapaaehtoista tehdä tili replit.com palvelussa, tällöin voit vain klikata "Fork" koodiesimerkeissä niin saat niistä kopion itsellesi jolla voit leikkiä

CSS Reunukset

Reunaviivan värin määrittäminen

Hakkeroinnin oppiminen alkaa tästä