CSS tulajdonságok és értékek

CSS tulajdonságok és értékek

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

 

  CSS tulajdonságok és értékek


     mi a tulajdonság és érték, és miért számít?

 

CSS tulajdonságok és értékek

Képzeld el, hogy egy karakterlapot töltesz ki egy videojátékhoz. A karakterednek van haja (tulajdonság), és beállítod, hogy kék legyen (érték). A CSS-ben ugyanez a helyzet: megmondod, milyen tulajdonságot akarsz módosítani, és milyen értékre állítod be.

h1 {
      color: blue;
}

Itt a color a tulajdonság (megmondja, mit állítunk), a blue pedig az érték (megmondja, mire állítjuk).

De nézzük bővebben!

A CSS szabály így épül fel:

szelektor {
     tulajdonság: érték;
}

Minden stílusblokk zárójelek {} között van.
A tulajdonságot kettőspont : választja el az értéktől, és
minden utasítás pontosvesszővel ; zárul.
Ha nem teszel oda pontosvesszőt, lehet, hogy a böngésző nem fogja tudni értelmezni.

p {
         font-size: 18px;
         color: blue;
         text-align: justify;
}

Ez azt mondja:
👉 minden <p> elem legyen 18px betűméretű, kék színű, és legyen sorkizárt.

Miért fontos?

A böngésző egy kicsit olyan, mint egy szigorú tanár – ha nem pontosan írsz, nem fogja értelmezni.
A text-align center nem jó. A helyes forma: text-align: center;
A kettőspont kötelező, a pontosvessző ajánlott (ha több szabályt írsz, kötelező).

Feladat a leckéhez

 

🛠️ Írj egy HTML oldalt, amiben van:

  • egy címsor (h1)

  • egy bekezdés (p)

  • egy gomb (button)

  • <style> tagek között formázd:

  • A címsor legyen piros, 32px betűméretű

  • A bekezdés legyen sötétszürke és sorkizárt

  • A gomb legyen világoskék, fehér szöveggel
feladat CSS tulajdonság és érték
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>Tulajdonság és érték</title>
      <style>
            h1 {
               color: red;
               font-size: 32px;
             }
            p {
              color: #292929;
              text-align: justify;
              }
             button {
                background-color: lightblue;
                color: white;
              }
         </style>
</head>
<body>
          <h1>Ez egy főcím</h1>
          <p>Ez egy bekezdés, amely sorkizárt és sötétszürke betűszínű.</p>
          <button>Kattints rám!</button>
</body>
</html>

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

  • Lépj tovább a CSS színekre

CSS megjegyzés

CSS megjegyzés

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

 

  CSS megjegyzés


     beszéljünk a kódban … magunkhoz!

 

💬 CSS megjegyzés

A CSS nem csak utasításokból állhat. Néha beszélnünk kell a jövőbeli önmagunkhoz vagy a többi fejlesztőhöz is. Például: „Miért formáztam pirosra a címsort?” vagy „Ne töröld ezt a sort, fontos!” – de ezeket nem akarjuk, hogy a böngésző megjelenítse.

Erre szolgálnak a CSS megjegyzések.

Hogy néz ki egy CSS megjegyzés?

/* Ez egy megjegyzés */

A /* és */ közé írt szöveget a böngésző figyelmen kívül hagyja – nem jelenik meg, és nem is fut le. Csak nekünk (vagy más fejlesztőknek) szól.

Mire jó egy CSS megjegyzés?

1. Leírhatod, hogy éppen mit formázol:

/* Navigáció színezése */

nav {
      background-color: black;
}

2. Ráírhatsz valamilyen emlékeztetőt: 

/* Ez ideiglenesen sárga, majd át kell írni kékre! */

h1 {
     color: yellow;
}

3. Tesztelésnél kikommentelhetsz egy részt:

/*
button {
      display: none;
}
*/

Amíg le nem zárod */ jellel, addig mindent kikapcsol, ami utána következik, ezért figyelj nagyon a lezárásra.

👀 Amire még figyelj!

  • A megjegyzések nyilvánosak – bárki láthatja, ha megnézi az oldalt a böngészőben az „Inspect element” funkcióval.
  • Ne írj bele jelszót, személyes adatot, vagy egyéb olyan dolgot, amit nem szeretnél másokkal megosztani

Feladat a leckéhez

🛠️ Hozz létre egy új HTML-oldalt css-feladat.html néven, benne egy <style> résszel.

 

Használj:

  • legalább 3 HTML elemet (h1, p, ul)

  • egy class-t

  • egy ID-t

  • egyszerre több elemre vonatkozó szabályt

  • legalább 2 CSS megjegyzést

    Formázása:

  • A főcím legyen zöld

  • Az első bekezdés félkövér (ID alapján)

  • A „kiemelt” osztályú bekezdés legyen világoskék hátterű
  • A listaelemek legyenek dőlt betűsek
  • Legyenek megjegyzések a CSS-ben, amik elmagyarázzák, mit csináltál

 

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>CSS megjegyzés feladat</title>
     <style>

/* Főcím formázása */
       h1 {
          color: green;
       }

/* Az első bekezdés kiemelése ID alapján */
      #elso {
           font-weight: bold;
       }

/* A kiemelt osztályhoz tartozó bekezdés */
      .kiemelt {
            background-color: lightblue;
        }

/* Listaelemek dőlt betűvel */
       ul, li {
           font-style: italic;
        }

/* Teszt célból kikapcsolt gomb stílus
        button {
            display: none;
         }
*/

        </style>
</head>
<body>

       <h1>Ez a főcím</h1>

       <p id=”elso”>Ez az első bekezdés.</p>

       <p class=”kiemelt”>Ez egy fontos, kiemelt rész.</p>

      <ul>
          <li>Pont egy</li>
         <li>Pont kettő</li>
      </ul>

</body>
</html>

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

  • Lépj tovább a CSS tulajdonságok és értékek leckéhez!

Mi az a CSS szelektor?

Mi az a CSS szelektor?

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

 

Mi az a CSS szelektor?


 CSS szabályok: így épül fel a varázslat szelektorokból, tulajdonságból és értékből

 

Mi az a CSS szelektor és miért kell rá hallgatni? 

A CSS szelektor olyan, mint a címzés egy levélen. Megmondod, hogy kinek szól az üzenet, aztán mellé rakod, hogy mit akarsz vele közölni. Ha nem írod rá a címet, a levél mehet a kukába. A böngésző is így működik: ha nem tudja, melyik elemre vonatkozik a stílus, nem fog történni semmi.

📩 Na de kiknek akarunk egyáltalán üzenni a stílusainkkal? Ehhez először ismerned kell a HTML elemek világát!

Mi az a HTML elem?

Gondolj a HTML-re úgy, mint egy bulira, ahol mindenki egy szerepet játszik. Van, aki címsor (pl. <h1>), van, aki bekezdés (<p>), lista (<ul>), listaelem (<li>), kép (<img>) vagy éppen gomb (<button>).

Ezeket az elemeket lehet „öltöztetni” a CSS-sel — és hogy kit akarsz felöltöztetni, azt a szelektorral mondod meg.

Alapszintű szelektorok

<p> {
      color: blue;
}

Ez azt jelenti, hogy minden <p> elem (bekezdés) kék színű lesz. Ugyanez működik minden HTML elemre: h1, ul, a, button stb.

body {
       background: blue;
}

Az egész oldal háttérszínét kékre állítja, mivel a body az egész HTML-dokumentum teste

 

ID és class – különbségek és példák

Ahhoz, hogy egy elemre konkrétan hivatkozz, adnod kell neki egy azonosítót vagy osztályt.

ID – egyedi névjegy

HTML
<p id=”bevezeto”>Ez itt az első bekezdés,</p>
       
CSS
#bevezeto {
           font-weight: bold;

}

🔖 Az ID mindig egyedi, és # jellel hivatkozunk rá. Ez a bekezdés vastag lesz, de csak ez az egy, mivel az ID nem ismétlődhet.

 

Class — a csoportos stílus

💡 A class olyan, mint amikor több dolgot is egyszerre emelsz ki egy szövegkiemelővel.

HTML
<p class=”kiemelt”>Ez itt az első bekezdés. </p>
<p class=”kiemelt”>Ez is fontos.</p>

CSS
.kiemelt {
           background-color: yellow;

}

Kombinált szelektorok

Elem+class

Itt csak azokat a p-ket színezi pirosra, amik a kiemelt class-t kapták meg. Ha div.kiemelt lenne, akkor csak a kiemelt div elemeket formázná.

HTML
<p class=”kiemelt”>Ez itt az első bekezdés. </p>
<p class=”kiemelt”>Ez is fontos.</p>

CSS
p.kiemelt {
           color: red;

}

Több elem egyszerre

Ezzel egyszerre formázhatsz bekezdést, listát és listaelemet is

 CSS
p, ul, li {
           font-size: 18px;

}

Minden elem egyszerre

Ez a csillag szelektor. Mindent egyszerre alakíthatsz vele, bánj vele óvatosan

 CSS
* {
           margin: 0;;
           padding: 0;

}

Feladat a leckéhez

 

🛠️Hozz létre egy selector.html nevű HTML-oldalt, és próbáld ki az alábbiakat:

  • Írj egy h1 címsort és legalább két bekezdést.
  • Adj az egyik bekezdésnek id="elso" nevet.
  • A másik bekezdésnek add meg a class="kiemelt" osztályt.
  • Írj egy CSS blokkot a <style> tagek közé:

 

Szelektor feladat megjelenítése
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>Szelektorok gyakorlása</title>
             <style>
                  #elso {
                        color: purple;
                       font-weight: bold;
                }

                  .kiemelt {
                        background-color: lightyellow;
                        padding: 5px;
                  }

                  p.kiemelt {
                         font-style: italic;
                  }

                  ul, li {
                          color: darkgreen;
                  }

                   * {
                          font-family: Arial, sans-serif;
                  }
          </style>
</head>

 

<body>

<h1>Ez egy címsor</h1>

<p id=”elso”>Ez az első bekezdés, aminek van ID-je</p>

<p class=”kiemelt”>Ez egy kiemelt bekezdés, ami egy osztályhoz tartozik.</p>

<ul>
           <li>Egy listaelem</li>
           <li>Még egy listaelem</li>
</ul>

<div id=”fontos”>Ez egy fontos rész, amit ID alapján formázunk.</div>

</body>
</html>

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

Mi az a CSS szintaktika?

Mi az a CSS szintaktika?

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

 

Mi az a CSS szintaktika?


 CSS szabályok: így épül fel a varázslat szelektorokból, tulajdonságból és értékből

 

Mi az a CSS szintaktika? 

A CSS olyan, mint egy prezentáció: ha nem stimmelnek a színek, a betűtípus vagy az elrendezés, az egész amatőrnek hat – még akkor is, ha a tartalom ütős.
Ahogy egy prezentációhoz dizájnelveket használunk, a CSS-ben szabályokkal kommunikálunk a böngészővel. A szintaktika pedig megmondja, hogyan kell ezeket a szabályokat jól megfogalmazni.

 

A 3 fő elem, amit meg kell jegyezned

  • szelektor – megmondja, mit akarsz formázni (pl.: címsor, bekezdés, gomb)
  • tulajdonság – megmondja, milyen stílust akarsz rá
  • érték – megmondja, pontosan hogyan nézzen ki

h1 {
      color: blue;
}

Ez így olvasva annyit jelent: A címsor (h1) legyen kék színű (blue)

De mi van, ha több dolgot akarsz?

A CSS imádja a listákat. Ha a bekezdéseidre (p) többféle stílust akarsz, simán mehetnek egymás alá. 

✅ Fontos szabályok, amiket mindig tarts be:

  • A tulajdonságokat új sorba írd, hogy átlátható maradjon

  • Minden tulajdonság után jön egy pontosvessző (;) – ezt nem szabad elfelejteni!

  • A nyitó kapcsos zárójelet { közvetlenül a szelektor után írd

  • A záró kapcsos zárójel } zárja le a stílusblokkot

h1 {
       color: red;
       text-align: center;
       font-size: 28px;
}

A legfontosabb karakterek a CSS-ben

 

Jel Jelentés
{ } kapcsos zárójelek közé írjuk a stílusokat
: elválasztja a tulajdonságot és az értéket
; minden stílus végére kell (kivéve az utolsóra – de szokás oda is írni)

TIPP:

Használj rendezett, jól olvasható kódot – nem a gépnek, hanem a jövendőbeli önmagadnak. Most még ezt lehet, átlátod, de később ettől bonyolultabb kódokat fogsz használni.

Feladat a leckéhez

 

  • Írj egy html oldalt, amiben van egy <h1> és egy <p>

  • Írj hozzá belső CSS-t a <style> tag segítségével
  • Formázd meg a tanultak alapján!
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>CSS példa</title>
          <style>
                body {
                    background-color: #f0f0f0;
                    font-family: Arial, sans-serif;
                  }

                  h1 {
                      color: darkblue;
                     font-size: 36px;
                   }

                  p {
                      color: #333333;
                      font-size: 18px;
                      text-align: justify;
                    }
                   ul {
                     color: darkgreen;
                     font-size: 16px;
                   }
         </style>
</head>
<body>

       <h1>Ez egy címsor</h1>
        <p>Ez egy bekezdés, amit már formáztunk CSS segítségével.</p>
       <ul>
             <li>Első elem</li>
             <li>Második elem</li>
             <li>Harmadik elem</li>
         </ul>
</body>
</html>

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

Linkajánló

Mi a CSS?

Mi a CSS?

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

Mi a CSS?

A CSS az, ami a Hello World-öt menővé varázsolja. Színezz, mozgass, alkoss!

Vissza a kezdőlapra

Mi a CSS, és miért  nem elég a HTML?

A HTML olyan, mint egy LEGO ház váza – megmondod, hogy hová kerül az ajtó, hol legyen az ablak, meg hogy hol van a konyha. De a CSS? Az a festék, a bútor, a menő LED világítás, meg az IKEA-s párna a kanapén.

A CSS (Cascading Style Sheets – magyarul: lépcsőzetes stíluslapok) arra való, hogy a weboldalad kinézetét meghatározd: színek, betűtípusok, elrendezések, animációk – minden, ami látvány.

🤔 De tényleg kell ez nekem?

Igen. Ha azt akarod, hogy a látogatók ne meneküljenek el 2 másodperc alatt, hanem azt mondják: „Wow, ez jól néz ki!”, akkor CSS nélkül esélytelen vagy. A HTML önmagában… nos, csúnyácska.

Oké, de hogyan működik?

A CSS „szabályokat” ír, amik megmondják: ezt az elemet így kell megjeleníteni. Pl.:

h1 {
color: darkblue;
font-size: 36px;
}

Ez azt mondja: „Az összes h1 címsor legyen sötétkék és 36 pixeles.”

📦 Három módja van, hogy CSS-t adj a HTML-hez:

1. Inline: közvetlenül az elembe írod (nem ajánlott, rendetlenséget okoz)
2. <style> tag a HTML fejében
3. külön .css fájba írod és linkeled (profi szint)

Példa a belső CSS-re

<head>
       <style>
            body {
                background-color: #f5f5f5;
                font-family: Arial, sans-serif;
            }
       </style>
</head>

Tipp

A CSS olyan, mint smink. A jó smink kiemel, egyedivé tesz, és észrevétlenül teszi szebbé a dolgokat. De ha túlzásba viszed, bohócot csinál az oldaladból 😅

Feladat a leckéhez

  • Hozz létre egy új HTML oldalt style.html néven.

  • Írj bele egy címsort (<h1>), egy bekezdést (<p>) és egy listát (<ul><li>).

  • A <head> részben használj <style> taget, és változtasd meg a betűszínt, háttérszínt, és a címsor méretét.

  • Próbálkozz! Tegyél bele saját színeket, próbáld ki a font-family-t.

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>CSS példa</title>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}

h1 {
color: darkblue;
font-size: 36px;
}

p {
color: #333;
}

ul {
color: #555;
}
</style>
</head>
<body>
<h1>Ez egy címsor</h1>
<p>Ez egy bekezdés, ahol gyakorlom a CSS-t.</p>
<ul>
<li>Első elem</li>
<li>Második elem</li>
<li>Harmadik elem</li>
</ul>
</body>
</html>

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

Ha igen, fedezd fel ezeket is:

CSS szintaktika

Megmutatjuk, hogyan épül fel egy CSS szabály, és mit jelent a szelektor, tulajdonság, érték

CSS szelektorok

Megtanulod, hogyan célozhatsz meg HTML elemeket a stílusokhoz: címkék, osztályok, azonosítók