CSS-sisennykset (padding) tarkoittaa sisätilan lisäämistä HTML-elementin ympärille. Paddingia käytetään yleensä antamaan tilaa elementin sisältämälle sisällölle. CSS-paddingia voidaan käyttää esimerkiksi painikkeiden, kuvien ja tekstilaatikoiden suunnittelussa.

Sisennys voidaan määrittää käyttämällä padding -ominaisuutta. Voit määrittää sisätilan ylä-, ala-, oikealle ja vasemmalle puolelle erikseen, tai voit määrittää sisätilan kaikille puolille kerralla. Esimerkiksi, jos haluat lisätä 10 pikselin paddingin vasemmalle puolelle, voit kirjoittaa seuraavan säännön:

Voit myös määrittää sisätilan kaikille puolille kerralla käyttämällä seuraavaa sääntöä:

CSS-paddingin käyttöä on tärkeä harkita suunnitellessasi sivustoa, sillä liiallinen padding voi tehdä sivusta epäselvän ja hankalasti luettavan. Toisaalta, liian vähäinen padding voi tehdä sivusta ahtaan ja epämiellyttävän katsella.

CSS-paddingin lisäksi voit käyttää myös margin-ominaisuutta, joka määrittää elementin ulkopuolisen tilan. Marginia käytetään yleensä antamaan tilaa elementin ympärille, kun taas paddingia käytetään antamaan tilaa elementin sisälle.

CSS Sisennykset (padding)

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ä

Mikä on HTML?

HTML-Tagit, Elementit ja Attribuutit

HTML-Dokumentin Rakenne

HTML ja Tekstin Muotoilu

HTML Linkit

HTML Kuvat

HTML Taulukot

HTML-perusteet

Mikä on CSS?

CSS Tyylitiedoston Käyttö

CSS Luokat

CSS Valitsimet

CSS Sisennykset (padding)

Harjoittele

Valmis ryhtymään eettiseksi hakkeriksi?
Aloita jo tänään.

CSS Sisennykset (padding)

Harjoittele

Valmis ryhtymään eettiseksi hakkeriksi?Aloita jo tänään.

Valmis ryhtymään eettiseksi hakkeriksi?
Aloita jo tänään.