CSS méret: px, em, rem, %…

CSS méret: px, em, rem, %…

Szerző: | 2025. ápr. 04. | CSS

 

 Méretek: px, em, rem, %, vh  mi ez a fura nyelv?


A CSS-ben minden méret számít. De nem mindegy, hogyan adod meg. A pixel csak a kezdet – jönnek a relatív egységek, amiktől reszponzív leszel, mint egy ninja

 

🧱 Alapegység: px (pixel)

  • A px egy abszolút méret, semmi máshoz nem viszonyul.
  • Pontosan meghatároz egy méretet, függetlenül a képernyő méretétől vagy más elemtől.
  • Minden képernyőn más, mekkora egy pixel, de az arányai változatlanok maradnak.
  • Mindig egybeírjuk a számmal: 16px, 100px

📌 Fix méretezésre jó, de reszponzív (mobilbarát) elrendezéshez nem ideális.

<!DOCTYPE html>
<html lang=„hu”>
<head>
  <meta charset=„UTF-8”>
  <title>PX példa</title>
  <style>
    .px-box {
      font-size: 16px;
      padding: 10px;
      border: 2px solid #333;
      background-color: #fef9c3;
      width: 300px;
    }
  </style>
</head>
<body>
  <div class=„px-box”>Ez egy fix méretű (px) doboz.</div>
</body>
</html>

🔠 Relatív méretek: em, rem

em

  • A betűméretéhez viszonyított érték.

  • Ha 1 em = 1 sor magas, akkor 20 em = 20 sor magas.

  • Ha növeled a betűméretet, a hozzá kapcsolódó méret is változik. Próbáld ki a lenti kóddal

rem

  • A root (html) betűméretéhez viszonyított érték.

  • Ha a html-ben a font-size 16px akkor 1 rem = 16px, 2 rem = 32px

  • Akkor hasznos, ha több elem van egymás mellett különböző betűmérettel, de ugyanazt a méretarányt akarjuk tartani.

  • Változtasd a lenti kódban a html betűméretét, és nézd meg, mit csinál a rem dobozod

📌 Használj rem-et, ha biztos akarsz lenni abban, hogy az összes elem azonos alaphoz igazodik.

<!DOCTYPE html>
<html lang=„hu”>
<head>
  <meta charset=„UTF-8”>
  <title>EM vs REM</title>
  <style>
    html {
      font-size: 16px;
    }
    .box1 {
      font-size: 30px;
      width: 10em;
      background-color: #d1fae5;
      margin-bottom: 10px;
    }
    .box2 {
      font-size: 20px;
      width: 10rem;
      background-color: #bfdbfe;
    }
  </style>
</head>
<body>
  <div class=„box1”>Ez egy em-méretű doboz</div>
  <div class=„box2”>Ez egy rem-méretű doboz</div>
</body>
</html>

📐 Százalék (%)

 

  • A százalék mindig valamihez viszonyított mérték.

  • Általában a szülőelemhez (parent) viszonyítva értelmezzük.

  • Ha egy div a body-ban van, és a width: 50%, akkor az a body szélességének 50%-át foglalja el.

  • Jelenítsd meg az alábbi kódot és kicsinyítsd, illetve nagyítsd a képernyőd méretét. Figyeld meg, hogyan változik a szöveg és a háttér elrendezése.

📌 Szuper reszponzív elrendezésekhez – különösen, ha fontos, hogy a tartalom mindig arányosan jelenjen meg. 

<!DOCTYPE html>
<html lang=„hu”>
<head>
  <meta charset=„UTF-8”>
  <title>Százalékos méretek</title>
  <style>
    .container {
      width: 80%;
      margin: auto;
      background-color: #e0f2fe;
    }
    p {
      font-size: 1rem;
    }
  </style>
</head>
<body>
  <div class=„container”>
    <p>Ez a div a szülőelem (body) szélességének 80%-át foglalja el.</p>
  </div>
</body>
</html>

📱 vh, vw – a viewport barátaid

  • A vw (viewport width): a teljes böngészőablak szélességének 1 %-a

  • A vh (viewport height): a böngészőablak magasságának 1%-a

  • 100vw = teljes szélesség, 50vw = fele

  • Ha egy elem szélessége 66.66vw, akkor a képernyő 2/3-át fogja elfoglalni

📌 Ezek az egységek változnak, ha kicsinyíted vagy nagyítod a böngészőt.

<!DOCTYPE html>
<html lang=„hu”>
<head>
  <meta charset=„UTF-8”>
  <title>Viewport méretek</title>
  <style>
    .fullscreen-header {
      width: 100vw;
      height: 100vh;
      background-color: #e0f2fe;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    h1 {
      font-size: 5vw;
    }
  </style>
</head>
<body>
  <div class=„fullscreen-header”>
    <h1>Teljes képernyős fejléc</h1>
  </div>
</body>
</html>

📏 vmin, vmax – a legkisebb vagy legnagyobb értékhez igazodva

  • vmin: a kisebbik dimenzió (szélesség vagy magasság) 1%-a

  • vmax: a nagyobbik dimenzió 1%-a

Hasznos lehet dinamikus betűmérethez, hogy mindig olvasható maradjon, akár álló, akár fekvő nézetben nézi valaki a weboldalt.

<!DOCTYPE html>
<html lang=„hu”>
<head>
  <meta charset=„UTF-8”>
  <title>vmin és vmax</title>
  <style>
    .responsive-text {
      font-size: 5vmin;
      padding: 20px;
      background-color: #fde68a;
    }
  </style>
</head>
<body>
  <p class=„responsive-text”>Ez a szöveg mindig jól olvasható lesz!</p>
</body>
</html>

Feladat a leckéhez

 

🛠️ Írj egy HTML oldalt, ahol:

  • A cím 4vw méretű
  • A bekezdés 1.2rem
  • A tartalom doboza 60% szélességű
reszponzív méretpróba
Elakadtál?

Ha szeretnél látni egy lehetséges megoldást, nyísd le a lenti ablakot

Egy lehetséges megoldás
<!DOCTYPE html>
<html lang=„hu”>
<head>
  <meta charset=„UTF-8”>
  <title>Méret egységek</title>
  <style>
    html {
      font-size: 16px;
    }
    .doboz {
      width: 60%;
      margin: 0 auto;
    }
    h1 {
      font-size: 4vw;
    }
    p {
      font-size: 1.2rem;
    }
  </style>
</head>
<body>
  <div class=„doboz”>
    <h1>Responsive méretpróba</h1>
    <p>Ezzel a szöveggel kipróbálhatod, hogyan működnek az em, rem, %, vw és px egységek.</p>
  </div>
</body>
</html>

Készen állsz a következő leckére?

  • Keretezd be, de stílussal

Ha ez túl sok volt:

Box model – a CSS dobozai

Box model – a CSS dobozai

Szerző: | 2025. ápr. 04. | CSS

 

  Box model – a CSS dobozai


     Úgy képzeld el a weboldaladat, mintha minden elem egy doboz lenne. A CSS pedig pontosan megmondja, mekkora, hol van és mennyi helyet hagy maga körül

 

Box model

A box modell (dobozmodell) a CSS egyik legalapvetőbb fogalma. Minden HTML elem egy doboz a webteredben. Ez a doboz 4 részből áll

dobozmodell

Mit jelentenek ezek a rétegek?

Tartalom (Content néven és megtalálod): a doboz belseje. Lehet szöveg, kép, gomb, vagy bármilyen más HTML elem, amit meg akarsz jeleníteni-

Padding (belső térköz): ez a tartalom és a keret (border) közötti rész. Ha növeled a padding értékét, a doboz tartalma beljebb kerül, több „levegőt” kap. Ez növeli a doboz méretét

Border (keret): a doboz határa. Lehet színes, szaggaott, vastag, vékony, vagy teljesen átlátszó. A keret kivül helyezkedik el a paddingen, és hozzáadódik a doboz teljes méretéhez

Margin (külső térköz): ez a doboz külső szegélye és a többi elem között levő távolság. Nem látszik, de helyet foglal. Ezzel állítod be, hogy mekkora legyen a tér két különböző doboz között. 

Röviden:

  • Padding: belül, a tartalom és a keret között van

  • Border: látható keret a dobozon

  • Margin: kívül van, más elemektől választ el

Miért fontos ez?

  • Mert ettől lesz rendezett az oldalad

  • Mert a spacing (távolságok) nem csak szemre mennek – hanem ki kell számítani őket

  • Mert a padding és a margin nem ugyanaz, bár sokan összekeverik

HTML

<div class=”doboz”>
Ez itt egy doboz a CSS box model szerint.
</div>

CSS

.doboz {
    width: 300px;
    padding: 20px;
    border: 3px solid #2563eb;
    margin: 30px;
    background-color: #e0f2fe;
  }

Feladat a leckéhez

 

🛠️Készíts egy dobozt, amely

    • 400px széles,

    • 50px margó minden oldalon,

    • 10px vastag piros keret,

    • belső padding: 20px,

    • tartalma: „Ez egy doboz belseje!”

CSS doboz feladat
Elakadtál?

Ha szeretnél látni egy lehetséges megoldást, nyísd le a lenti ablakot

Egy lehetséges megoldás
<!DOCTYPE html>
<html lang=„hu”>
<head>
  <meta charset=„UTF-8”>
  <title>Box model példa</title>
  <style>
    .box-feladat {
      width: 400px;
      margin: 50px;
      padding: 20px;
      border: 10px solid red;
      background-color: #fef2f2;
      font-family: Arial, sans-serif;
    }
  </style>
</head>
<body>
  <div class=„box-feladat”>
    Ez egy doboz belseje!
  </div>
</body>
</html>

Készen állsz a következő leckére?

  • Lépj tovább a „Méretek: px, em, rem, %, vh … mi ez a fura nyelv?”-re

Elakadtál? 

HTML + CSS

HTML + CSS

Szerző: | 2025. ápr. 03. | CSS

 

  HTML + CSS


sosem voltak jobban egymásra kattanva

 

Mi az, amit a HTML tud – és mi az, amit a CSS tesz hozzá?

 

  • HTML: tartalom és szerkezet (pl. cím, bekezdés, kép, lista, űrlap)

  • CSS: kinézet és stílus (szín, méret, elrendezés, animáció)

A HTML megmondja, mi van az oldalon, a CSS pedig megmutatja, hogyan nézzen ki.

 

🛠️ Hogyan kattan össze a HTML és a CSS?

1. Inline stílus

➡️ Nem ajánljuk, de jó látni, hogy létezik.
✅ Gyors, de nehezen karbantartható. Inkább csak demókhoz.

<p style=”color: red;”>Ez egy piros bekezdés.</p>

2. Beágyazott stílus a <style> tagben

A HTML <head> részébe írod a CSS-t.

<head>
       <style>
              p {
                color: blue;
               }
         </style>
</head>

✅ Kis projekthez oké, de ha hosszabb a CSS, akkor…

3. Külső CSS fájl (ez az igazi match made in heaven)

➡️ A style.css fájlba kerül minden stílus – külön, tisztán, átláthatóan.

1. lépés: Hozz létre egy HTML fájlt. A neve legyen pl.: index.html
2. lépés: Mentsd el egy mappába

<!DOCTYPE html>
<html lang=”hu”>
<head>
       <meta charset=”UTF-8″>
       <title>Első saját stílusom</title>
       <link rel=”stylesheet” href=”style.css”>
</head>
<body>
        <p>Ez egy bekezdés, amit a CSS fájl fog megszépíteni.</p>
</body>
</html>

3. lépés: Hozz létre egy új fájlt: style.css

  • figyelj arra, hogy a kiterjesztése .css legyen
  • ugyanabba a mappába mentsd, mint ahol az index.html van

4. lépés: Nyisd meg a HTML fájlt a böngészőben

  • dupla katt vagy használd a Live Server bővítményt a VS Code-ban,
  • Ha látod a formázott szöveget – akkor sikerült!

Mikor használj mit?

Módszer Mikor használd?
Inline Csak gyors tesztekhez
<style> Kisebb példákhoz, egyoldalas projekteknél
Külső CSS Igazi projekteknél, tananyagoknál, weboldalakon mindig!

 

Feladat a leckéhez

 

🛠️Készíts egy HTML oldalt, amiben:

🟥 Az első bekezdés piros színt kap inline (style= „”) módon

🔵 A második bekezdés kékre színeződik a <style> tagben megadott CSS alapján

✅ A harmadik bekezdés formázása (pl. zöld szín + betűtípus) egy külső .css fájlból származik

🖋️ A teljes oldal betűtípusát is a külső CSS határozza meg

CSS megjegyzés feladat
Elakadtál?

Ha szeretnél látni egy lehetséges megoldást, nyísd le a lenti ablakot

Egy lehetséges megoldás
 <!DOCTYPE html>
<html lang=„hu”>
<head>
  <meta charset=„UTF-8”>
  <title>HTML + CSS gyakorlat</title>

 

  <!– 2. módszer: Beágyazott CSS a <style> tagben –>
  <style>
    .kek-bekezdes {
      color: blue;
    }
  </style>

 

  <!– 3. módszer: Külső CSS fájl hivatkozása –>
  <link rel=„stylesheet” href=„style.css”>
</head>
<body>

 

  <!– 1. módszer: Inline CSS –>
  <p style=„color: red;”>Ez a bekezdés inline stílust használ (piros).</p>

 

  <!– 2. módszer: Beágyazott stílus –>
  <p class=„kek-bekezdes”>Ez a bekezdés beágyazott stílussal kékre színezett.</p>

 

  <!– 3. módszer: Külső CSS-ből jövő stílus –>
  <p class=„kulso-css”>Ez a bekezdés a külső CSS fájlból veszi a stílust.</p>

 

</body>
</html>

 

style.css tartalma (külső fájl)

 

body {

       font-family: Arial, sans-serif;
}

.kulso-css {
     color: green;
     font-weight: bold;
}

Készen állsz a következő leckére?

Box modell – a CSS téglái

Szín + háttér, avagy a design alapjai

Szín + háttér, avagy a design alapjai

Szerző: | 2025. ápr. 03. | CSS

Szín+háttér, avagy a design alapjai


„Egy HTML-oldal CSS nélkül olyan, mint a pizza sajt nélkül – lehet enni, de minek?”

 

🎨 Miért fontos a szín?

A színek nem csak esztétikai elemként működnek, hanem kommunikálnak. Egy jól megválasztott szín:

  • vezeti a szemet,

  • kiemeli a lényeges elemeket,

  • érzelmeket képvisel,

  • és persze baromi menőn néz ki.

🌈 Betűszín beállítása

p {
color: #2c3e50; /*Sötétszürke, stílusos, letisztult */
}

Ha a világos betűszín jobban mutatna: 

h1 {
  color: #eee; /*Ugyanaz, mint #eeeeee, csak rövidebb formában
}

🌈 Háttérszín beállítása

Ha csak egy sornak szeretnél háttérszínt:

p {
   background-color: #fef3c7; /*Világossárga, mintha egy post-itet kapott volna a szöveg */
} 

De gyakran inkább div-eket vagy osztályokat formázunk:

bevezeto {

background-color: #d1fae5; /*Mentazöld  */
}
.lista {

background-color: #e0f2fe; /*Világoskék*/
}

Tipp: a background-color helyett írhatod azt is, hogy background. Elfogadja, és a backgroundhoz írhatunk más tulajdonságokat is, pl:

.hero {
    background: #111 url(‘kepek/hatter.jpg’}          no-repeat center center;
    background-size: cover;
}

💎 Pro tippek:

  • Próbáld ki az Adobe Color Wheel eszközt, hogy harmónikus színeket állíts össze.

  • A sötét háttérhez világos szöveg kell (kontraszt!).

  • Ne vigyél túl sok színt egy oldalra – a „szivárvány-katasztrófa” garantáltan elriasztja a felhasználókat.

Feladat a leckéhez

 

🛠️Csinálj egy kis blokkot a weboldaladon, ahol:

  • van címsor (#title),

  • egy rövid szöveg (class=”bevezeto”),

  • és egy lista (class=”lista”),

  • minden elem más háttérszínt kapjon.

Mutasd meg a színérzéked! Vagy legalábbis színezz ki mindent

    színes feladat
    Elakadtál?

    Ha szeretnél látni egy lehetséges megoldást, nyísd le a lenti ablakot

    Egy lehetséges megoldás
    <!DOCTYPE html>
    <html>
      <head>
        <style>
          #title {
      background-color: #f59e0b; /* narancs */
      color: white;
      padding: 10px;
      font-size: 1.5rem;
    }

    .bevezeto {
      background-color: #6ee7b7; /* mentazöld */
      padding: 10px;
      border-radius: 5px;
    }

    .lista li:nth-child(1) {
      background-color: #93c5fd; /* világoskék */
      padding: 8px;
    }

    .lista li:nth-child(2) {
      background-color: #fcd34d; /* napsárga */
      padding: 8px;
    }

    .lista li:nth-child(3) {
      background-color: #fca5a5; /* rózsaszín */
      padding: 8px;
    }
        </style>
      </head>
      <body>
        <div id=„title”>Kedvenc dolgok listája</div>

    <p class=„bevezeto”>Ez itt egy kis ízelítő a kedvenc dolgaimból. A lista alatt színkavalkád vár!</p>

    <ul class=„lista”>
      <li>Kávé</li>
      <li>CSS tanulás</li>
      <li>Macskás mémek</li>
    </ul>
      </body>
    </html>

    Ajánló

    🔗 Előző anyag: CSS színek 

    ➡️ Következő anyag: HTML+CSS

    Hogyan tanulj CSS-t?

    Hogyan tanulj CSS-t?

    Szerző: | 2025. ápr. 03. | CSS

     

      Hogyan tanulj CSS-t?


         egy kis kód, egy kis kreativitás – és már formázod is a netet

     

    Hogyan tanulj CSS-t?

    1. Először is: ne pánikolj.

    A CSS nem rakétatudomány – inkább olyan, mint egy kreatív nyelv, amivel megtanulsz stílusban beszélni a weboldalakkal. Persze az elején minden <div> és padding kicsit furcsa, de hidd el, hamar összeáll a kép.

    2. Kis adagokban tanulj – és mindig gyakorolj!

    A legjobb taktika:

    • nézd át a témát (pl. szelektorok),

    • próbáld ki magad egy példán,

    • és csak utána menj tovább.

    👉 A CSS leckéink ezért rövidek, gyakorlatorientáltak, és mindig tartalmaznak mini feladatot, amit azonnal kipróbálhatsz.

    3. Ne csak olvasd, kattints!

    A CSS nem elmélet – ez kézzelfogható anyag. A böngésző a barátod:

    • kísérletezz,

    • nézd meg, mit változtattál,

    • hibázz bátran! (Mert abból tanulsz igazán.)

    4. Nézz rá mobilon is!

    A CSS egyik szuperereje a reszponzív dizájn. Vagyis, hogy a weboldalad telefonon is jól nézzen ki. Már a tanulás közben szokj rá, hogy ne csak „asztali nézetben” dolgozz!

    5. Ne hagyd ki a mini projekteket!

    A leckék végén mindig találsz egy-egy mini kihívást. Ez nem extra – ez a lényeg! Ha magad is létrehozol egy dizájnt, azzal tanulsz a legtöbbet. Plusz: szuperül mutat az önéletrajzodban vagy a portfóliódban is.

    Extra tippek

    📌 Használj kódszerkesztőt, mint a CodePen vagy a VS Code + Live Server.

    📱 Nézd meg mobilon is a munkád.

    🎯 Nem kell tökéletesnek lennie – csak készülj el vele!

    🧩 Próbáld meg újratervezni a kedvenc appod egy részét CSS-ben.

    😂 Ha valami nem működik, ne stresszelj

    Készen állsz? 👉 Akkor irány az első lecke: Mi az a CSS?

     

    CSS színek

    CSS színek

    Szerző: | 2025. márc. 30. | CSS

     

      CSS színek


         avagy hogyan varázsolj színeket a weboldaladra

     

    🎨 CSS színek

    A színeket megadhatod szavakkal is (red, blue, yellow), de ha úgy akarsz dolgozni, mint egy profi, akkor érdemes számkódokkal dolgozni. Nézzük, mik ezek!

    🌈 1. Hexadecimális színkódok

    color: #ff0000;

    Ez így piros, de miért?

    A # után 3 vagy 6 karakter jön. Ezek a karakterek 16-os számrendszerben értelmezendőek:
    👉 0 1 2 3 4 5 6 7 8 9 A B C D E F
    (A = 10, F = 15)
    A színkód 3 részre oszlik:
    RR = red, azt mutatja meg, mennyi piros van benne
    GG = green, a zöld mennyisége
    BB = blue, mennyi kéket tartalmaz

    Például:
    #ff0000 – piros (teljes piros, nincs benne zöld vagy kék)
    #00ff00 – zöld
    #0000ff – kék
    #ffffff – fehér (minden maximum értéken van)
    #000000 – fekete

    ✨ Tipp: Használhatsz rövidített 3 karakteres formát is, pl. #f00 = #ff0000

     

    🌈 2. RGB színek – számok tizes számrendszerben

     

    color: rgb(255, 0, 0);

    Itt is három szám van, 0-tól 255-ig.

    • Az első a piros mennyisége

    • A második a zöld

    • A harmadik a kék

    Ez ugyanaz, mint #ff0000.

    🌈 3. RGBA – az A betű az „átlátszóság”

    background-color: rgba(255, 0, 0, 0.5)

    Az a = alpha érték, 0 és 1 között, ahol a
    0 = teljesen átlátszó
    1 = teljesen látható

     

    🌈 4. HSL

     

    color: hsl(0, 100%, 50%);

    Ez mit jelent?

    • h – hue (színárnyalat) – 0–360° a színkeréken (0 = piros, 120 = zöld, 240 = kék)

    • s – saturation (telítettség) – 0% = szürke, 100% = élénk

    • l – lightness (világosság) – 0% = fekete, 100% = fehér

    🔗 Hasznos eszköz: Adobe Color

    Adobe Color Wheel

    Ez egy zseniális eszköz arra, hogy színeket válassz, kombinálj és exportálj.
    Állítsd be a színkereket, nézd meg a HEX vagy RGB értékeket, és másold át a CSS-edbe!

    Adobe színkerék

    Feladat a leckéhez

     

    🛠️ Hozz létre egy HTML fájlt, amiben az alábbi elemek szerepelnek

    • egy címsor (h1)

    • egy bekezdés (p)

    • egy gomb (button)

      Adj mindegyiknek valamilyen háttér- vagy szövegszínt hex, rgb vagy hsl formátumban 
    színek feladat
    Elakadtál?

    Ha szeretnél látni egy lehetséges megoldást, nyísd le a lenti ablakot

    Egy lehetséges megoldás
    <!DOCTYPE html>
    <html>
      <head>
        <style>
          h1 {
            color: #3498db;
          }
          p {
            background-color: rgb(255, 255, 204);
          }
          button {
            background-color: hsl(120, 60%, 50%);
            color: white;
          }
        </style>
      </head>
      <body>
        <h1>Színes világ</h1>
        <p>Egy halványabb sárgás hátterű bekezdés</p>
        <button>Kattints rám!</button>
      </body>
    </html>

    Készen állsz egy feladatra?

    • Készítsd el egy fiktív zenekar egyszerű bemutatkozó oldalát. Formázd meg a szövegeket, színezd ki az elemeket, használj szelektorokat, osztályokat, ID-ket és megjegyzéseket! Ha bizonytalan vagy, lapozz vissza az előző leckékhez. Ha kiváncsi vagy egy lehetséges megoldásra, kattints ide.