CSS összefoglaló

A CSS (Cascading Style Sheets) egy nyelv, amely lehetővé teszi a weboldalak formázásának és megjelenésének szabályozását. A CSS segítségével megadhatjuk a szöveg méretét, betűtípusát, színét, háttérképet, elrendezést, és még sok más tulajdonságot. A CSS segítségével a weboldalakat egyedibbé, esztétikusabbá és könnyebben használhatóvá tehetjük.

A stílus elhelyezése

A CSS használatával elkülöníthetjük a weboldal tartalmát és formázását, így a kód olvashatóbbá és könnyebben karbantarthatóvá válik. A CSS-t többféleképpen is alkalmazhatjuk, például külön fájlban, amire a HTML fájlokból hivatkozunk, vagy beleépíthetjük az HTML fájlokba.

css fájlban:

Célszerű külön fájlban megadni, mert így több helyen is felhasználható, és sokkal könnyebb módosítani. A css fájl a html oldal fejlécében kell megadni:

<link rel="stylesheet" href="stilus.css">

1	<link rel="stylesheet" href="stilus.css">

Az oldal fejlécében: <style></style> tagok között.

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

<style>

p { color: blue; }

</style>

inline: Megadhatunk stílust inline is. Ebben az estben a html tag-be kell beírni a style attributumot.

<p style="color:red;">Piros szöveg</p>

1	<p style="color:red;">Piros szöveg</p>

A CSS-ben a szabályokat a html elemekre, osztályokra (class), vagy azonosítókra (id) alkalmazhatjuk.

Alapvető CSS szintaxis

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

szelektor {

tulajdonság: érték;

}

Szelektorok

html tag-re: tegyük fel, hogy szeretnénk minden bekezdést félkövérré tenni. Ebben az esetben a css fájlunkba ennyit írunk: (ez a html fájlban található összes <p> elemre érvényes lesz! A stílusokat lehet csoportosítani is. Ha például a H1, H2,H3 címeket egyszerre szeretnénk mondjuk zöld betúszínnel írni, akkor egyszerűen vesszővel fel lehet sorolni őket.

p{
  text-weight: bold;
}
h1,h2,h3{
  color: green;
}

text-weight: bold;

}

h1,h2,h3{

color: green;

}

id azaz egyedi elemek. Tegyük fel, hogy csak egyetlen bekezdést akarunk formázni, legyen zöld a szöveg színe. Ebben az esetben a html fájlban teszünk egy id-t a <p>-be. A css fájlban az id-ra #-tel tudunk hivatkozni. #bekezdesem.

<p id="bekezdes"> Ez itt egy mondat.</p>

1	<p id="bekezdes"> Ez itt egy mondat.</p>

p {
  color: green;
}

p {

color: green;

}

class azaz osztály Mi a helyzet akkor, ha pl. 10db bekezdésem van, de csak 4-et akarok megformázni azonos stílussal? Legyenek sorkizártak. Ilyenkor használom a class-t. A html tagnek adni kell egy osztályt, amire a css fájlban .osztalyneve névvel tudunk hivatkozni.

<p class="osztalyom">Ez egy formázott szöveg lesz.</p>

1	<p class="osztalyom">Ez egy formázott szöveg lesz.</p>

.osztalyom {
   text-align: justify;
}

.osztalyom {

text-align: justify;

}

Meg kell még említenem a * -ot, amivel az összes html tag-et egyszerre lehet formázni.

A CSS-ben a szabályokat a későbbiekben definiált szabályok felülírhatják, ezáltal az adott elemre vonatkozó szabályokat a „cascading” (láncolás) elve alapján állítjuk be.

CSS-ben lehetőség van responsive design-ra is, ami lehetővé teszi a weboldalak megjelenésének módosítását különböző képernyőméretek esetén, így biztosítva a weboldal megfelelő megjelenését minden eszköz.

Kommentek: /* */ között elhelyezhetőek.

CSS doboz modell

A CSS dobozmodell lehetővé teszi, hogy formázzuk és rendezzük az HTML elemeket a weboldalakon. A dobozmodell alapján minden HTML elem egy dobozként jelenik meg, amelynek van egy külső és belső margója, szegélye és kitöltése. A dobozmodell segítségével kontrollálhatjuk az elemek méretét, elhelyezését és megjelenését a weboldalakon.

content – maga a tartalom (szöveg, kép)
padding – belső margó(térköz) a tartalom és a keret között
border – keret
margin – külső margó, az adott elem és más elemek között

box-sizing – szabályozza, hogy a width és height tartalmazza-e a padding-ot és a border-t:

content-box (alapértelmezett): csak a tartalom mérete.
border-box: tartalom + padding + border együtt.

Bejárási sorrend (top → right → bottom → left)

Rövidítések használata (margin, padding, border)
Alapvetően van alsó,felső, király, ász… izé alsó, felső, bal, jobb margó/szegély/padding.
Tehát ezeket egyesével is tudjuk használni, és összevonva is.

felső margó: margin-top
alső margó: margin-bottom
bal margó: margin-left
jobb margó: margin-right

ugyanígy a padding és border esetében is…
Összevonva:
margin: 10px 15px 20px 25px; /* felső | jobb | alsó | bal */
margin: 10px; /* minden oldal */
margin: 10px 20px; /* felső-alsó | jobb-bal*/
margin: 10px 15px 20px; /* felső | jobb-bal | le */

Szegély: border: 2px solid black; /* vastagság | stílus | szín * ebben az esetben mind a 4 oldal egyforma/
Lekerekített szegély: border-radius

padding: 10px 20px 30px 40px;
/* 10px felül, 20px jobb, 30px alul, 40px bal */

1 2	padding: 10px 20px 30px 40px; /* 10px felül, 20px jobb, 30px alul, 40px bal */

Szöveg formázása

A CSS szövegformázási tulajdonságok (például color, font-size, text-align, stb.) alkalmazhatók mind blokkszintű, mind inline elemekre. DE! A text-align-ra figyelni kell!
Blokkszintű elem → text-align hatással van a benne lévő szövegre.
Inline elem → csak a saját szövegrészét formázza, nem igazítja a teljes sort.

Szöveg színe

Színeket többféle módon is meg lehet adni. Nevükkel, hexadecimális értékkel, RGB kóddal.

color: red; /* vagy #ff0000, rgb(255,0,0) */

1	color: red; /* vagy #ff0000, rgb(255,0,0) */

Betűtípus és méret

Betűtípus-családok (font-family)

Talpas (serif): betűk végén kis vonások vannak → hagyományos, nyomtatott stílus.
Talpatlan (sans-serif): egyszerű, letisztult betűk → modern, képernyőn jól olvasható.
Monospace: minden betű azonos szélességű → kódokhoz.
Cursive: kézírásos stílus.
Fantasy: dekoratív betűk.

Fontos: mindig adjunk meg tartalék betűtípust és egy általános családot!

font-family: Arial, sans-serif; /* betűtípus */
font-size: 16px; /* betűméret */

1 2	font-family: Arial, sans-serif; /* betűtípus / font-size: 16px; / betűméret */

Méretezési lehetőségek

px (pixel): fix méret
em: a szülő elem betűméretéhez viszonyított arány
rem: a gyökér (html) betűméretéhez viszonyított arány.
%: százalékos arány
kulcsszavak: small, medium, large, x-large.

Betűstílus és vastagság

font-style: italic; /* dőlt */

1	font-style: italic; /* dőlt */

normal: alapértelmezett, nem dőlt.
italic: dőlt betű (ha van külön italic változat a betűtípusban).
oblique:→ döntött betű (nem igazi italic, hanem mesterségesen döntött).

Betűvastagság – font-weight
A szöveg vastagságát (félkövérségét) szabályozza.
normal (400) → normál vastagság.
bold (700) → félkövér. Számértékek (100–900)

Szöveg igazítása

text-align: left;   /* balra */
text-align: center; /* középre */
text-align: right;  /* jobbra */
text-align: justify; /* sorkizárt */

text-align: left; /* balra */

text-align: center; /* középre */

text-align: right; /* jobbra */

text-align: justify; /* sorkizárt */

Szöveg dekoráció

text-decoration: underline; /* aláhúzás */
text-decoration: none;      /* linkek aláhúzásának eltüntetése */

1 2	text-decoration: underline; /* aláhúzás / text-decoration: none; / linkek aláhúzásának eltüntetése */

Szöveg átalakítása

text-transform: uppercase; /* NAGYBETŰS */
text-transform: lowercase; /* kisbetűs */
text-transform: capitalize; /* Minden Szó Nagybetűvel */

text-transform: uppercase; /* NAGYBETŰS */

text-transform: lowercase; /* kisbetűs */

text-transform: capitalize; /* Minden Szó Nagybetűvel */

Betűköz és sorköz

letter-spacing: 2px; /* betűk közötti tér */
line-height: 1.5;    /* sorköz */

1 2	letter-spacing: 2px; /* betűk közötti tér / line-height: 1.5; / sorköz */

Szöveg árnyék

text-shadow: 2px 2px 5px gray; /* x-eltolás | y-eltolás | elmosás | szín */

1	text-shadow: 2px 2px 5px gray; /* x-eltolás \| y-eltolás \| elmosás \| szín */

Példa bekezdés formázására:

p {
  color: #333;
  font-family: Verdana, sans-serif;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.6;
  text-shadow: 1px 1px 3px #aaa;
}
/* Összevonva is meg lehet adni őket: */
#pelda {font: italic bold 16px Arial, sans-serif;}
/* font-style | font-weight | font-size | font-family */

p {

color: #333;

font-family: Verdana, sans-serif;

font-size: 18px;

font-weight: bold;

text-align: center;

text-transform: uppercase;

letter-spacing: 1px;

line-height: 1.6;

text-shadow: 1px 1px 3px #aaa;

}

/* Összevonva is meg lehet adni őket: */

#pelda {font: italic bold 16px Arial, sans-serif;}

/* font-style | font-weight | font-size | font-family */

A háttér formázása

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

A background-color tulajdonsággal állíthatjuk be az elem háttérszínét.

Lehetséges értékek:

Színnév: red, blue, green
HEX kód: #ff0000
RGB: rgb(255, 0, 0)
RGBA (átlátszósággal): rgba(255, 0, 0, 0.5)

Például világoskék háttér az egész weboldalnak:

body {
  background-color: lightblue;
}

body {

background-color: lightblue;

}

Háttérkép beállítása

A background-image tulajdonsággal adhatunk képet az elem hátteréhez.

Kiegészítő tulajdonságok háttérképhez

background-repeat
background-position
background-size
background-attachment

body {
  background-image: url('hatter.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

body {

background-image: url('hatter.jpg');

background-repeat: no-repeat;

background-position: center;

background-size: cover;

}

Frissítve: 2025.11.11.