Gyakorlatias webfejlesztés 2. - CSS

[2024. március 03.] [ christo161 ]

Ebben a tananyagrészben a CSS-ről lesz szó, amivel a html tageket, illetve azok tartalmát tudjuk formázni. Például CSS-ben oldjuk meg a szövegek, linkek, képek, listák, táblázatok, űrlapok formázását, az oldal részekre bontását (pl. fejléc, tartalom, lábléc), a reszponzív (mobiltelefon, tablet, asztali számítógép esetén különböző) megjelenést.

Amelyik példakódban van <html></html> nyitó- és záró tag, azt lementhetjük egy html fájlba (pl. something.html), és egy fájlkezelőben dupla kattintással megnyithatjuk a böngészőben, és megnézhetjük hogy néz ki a kód eredménye.
Illetve ha bemásoljuk erre az oldalra: https://codepen.io/pen a html részhez, akkor is megnézhetjük hogy néz ki a kód eredménye.

A gyakorlatban jobb, ha a CSS kódot külön fájlba mentjük, itt ebben a tananyagrészben meg is nézzük, hogy ezt hogyan kell megoldani, de a tananyag példakódjainak egyszerűsítése érdekében a html kódba ágyazzuk be a CSS kódot is.

Ebben a tananyagrészben a CSS formázás működését mutatjuk be, és nem a szép designon lesz a hangsúly.

előző tananyagrész: HTML
következő tananyagrész: Javascript

kép forrása: geeksforgeeks.org

Tartalomjegyzék

Hova írhatunk CSS kódot? inline, <style></style>, külön css fájlba
CSS kódok prioritása
CSS szelektorok: tagname, id attribute, class attribute, attribute, listed, mixed, nested, direct child
pszeudo CSS szelektorok: :first-child, :last-child, :nth-child(), :hover, :visited, :focus, :not(), ::first-letter
alapvető szövegformázás: font-family, font-size, text-align, line-height, text-indent, bold, italic, underline, color, opacity, background-color
szövegközi formázás (<span class="class_example"></span>)
képek
képgaléria
linkek
navbar
listák
táblázatok
form elemek alapvető formázása
box modell
box modell példák: az oldal felosztása dobozokra, gombok formázása
display CSS property, flex, grid
position CSS property

Hova írhatunk CSS kódot?

Az első példákban még nem a CSS formázási lehetőségeket részletezzük, ezért csak egyszerű CSS példákkal mutatjuk be ezeket a lehetőségeket.

HTML tagek style attribútumaként (inline)

Az adott html tagnek, amire azt szeretnénk, hogy érvényes legyen egy adott CSS formázás, a style="" attribútumban az idézőjelek között megadjuk a CSS kódot, akár többet is egyszerre, amiket pontosvesszővel választhatunk el.

Egyértelmű hátrányai:

Egy html fájlra érvényes.
Ha több egyforma html tagnek akarunk egyforma formázást megadni ezzel a módszerrel, akkor ismételten le kell írni ugyanazt a kódot, és ha esetleg az összeset módosítani szeretnénk (pl. aláhúzás helyett dőlt betűsek legyenek a címsorok), akkor minden egyes helyen külön-külön át kell írnunk.
Egy hosszú kódból álló oldalban nehéz megtalálni egy ilyen kódot. Jobb az, hogyha a CSS formázás egy helyre van összegyűjtve (részesítsük előnyben az alábbi két másik módszert).

Fontos tudni róla:

Alapvetően felülírja a többi módszert, ha a többi módszerrel adtunk meg ugyanezekre a html tagekre vonatkozó CSS formázást, akkor a böngésző ezt a módszert részesíti előnyben.
Ez még akkor is érvényes, ha a <style></style> tagek közti formázást a </body> tag elé helyezzük (vagyis a kód későbbi részébe, mint ahol az inline CSS kód található).

Tanács:

Csak akkor használjuk ezt a módszert ha az egész honlapunkon belül egy adott html tagre nézve valami speciális formázást szeretnénk beállítani... vagy még akkor sem :)

<!-- inline CSS example -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>inline CSS example</title>
  </head>
  <body>
    <h1 style="text-decoration:underline;">inline CSS example</h1>
    <p style="color:red;">inline CSS example</p>
  </body>
</html>

<style></style> html tagek közé a <head></head> tagek között

Mint ahogy az a példakódban is jól látható, a html kód <head></head> tagei között adhatjuk meg <style></style> tagek között. Akár máshová is írhatnánk a <style></style> tageket, de így talán könnyebben megtalálható egy hosszú html fájl esetén is.

Egyértelmű hátránya:

Csak egy adott html fájlra vonatkozik.

Csak akkor írja felül az eggyel ezalatti módszert, amikor külön fájlban adunk meg CSS formázást, ha a <style></style> tagek között megadott formázás a <link> tag után helyezkedik el.

Itt ebben a tananyagban ezt a módszert alkalmazzuk a legtöbb példában, vagyis a CSS kódot html fájlba írjuk <style></style> tagek közé, azért, mert a példák, amiket írunk 1-1 html fájlnak feleltethetőek meg, illetve ezt a módszert könnyebb kipróbálni, akkor is, ha html fájlba mentjük le a kódot (nem kell 2 fájlt létrehozni), illetve akkor is, ha a codepen.io/pen oldalra (vagy hasonló oldalakra) másoljuk be a kódot (elég csak a html részbe bemásolni az egész kódot).

Tanács:

Ha egy több html fájlból álló honlapunk van, ahol a html fájloknak ugyanolyan formázást szeretnénk megadni, akkor ne ezt a módszert használjuk, hanem tegyük a CSS-t külön fájlba, amit linkeljünk be az egyes html fájlokban.

<!-- CSS example between <style></style> tags -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CSS example between &lt;style&gt;&lt;/style&gt; tags</title>
    <style>
      h1 { text-decoration: underline; }
      p { color: red; }
    </style>
  </head>
  <body>
    <h1>CSS example between &lt;style&gt;&lt;/style&gt; tags</h1>
    <p>CSS example between &lt;style&gt;&lt;/style&gt; tags</p>
    <h1>CSS example between &lt;style&gt;&lt;/style&gt; tags</h1>
    <p>CSS example between &lt;style&gt;&lt;/style&gt; tags</p>
  </body>
</html>

Az is előfordulhat, hogy egyesek a </body> tag elé írják a <style></style> tageket és azok tartalmát.

Külön CSS fájlba

Ha egy honlapon belül több html fájlnak szeretnénk ugyanazt a CSS formázást megadni, mindenképp ezt a módszert használjuk.

A html fájl <head></head> tagei között <link> taggel adjuk meg a href="" attribútumban azt a fájlt, amiben a CSS formázások találhatóak.

Előnye:

Több fájlra alkalmazható kódismétlés nélkül
Egy helyre van összegyűjtve minden CSS formázás. Mindenki, aki a kódot írja, olvassa, tudja, hogy hol kell keresni a CSS formázásokat.

Ez a példa csak akkor működik, ha az example.html és az example.css fájlok azonos könyvtárban helyezkednek el.

Ha mondjuk vannak olyan html fájljaink, amik más könyvtárban találhatóak (pl. alkönyvtárakban), akkor a <link> tag href="" attribútumában a CSS fájl elérési útját tanácsos abszolút útvonallal megadni, például: href="/style/example.css", amely esetben a honlap gyökérkönyvtárában lévő style könyvtáron belül fogja keresni a böngésző az example.css nevű fájlt.
Az abszolút útvonal mindig /-el kezdődik, és a honlap gyökérkönyvtárához képest kell megadni.

Az abszolút útvonal jó eséllyel csak akkor működik megfelelően, ha feltöltjük a honlapunkat webtárhelyre, illetve ha például VSCode esetén a Live Server extensionnel (kiegészítővel) nyitjuk meg a honlapot.
Ha dupla kattintással nyitunk meg egy html fájlt (pl. something.html), akkor az abszolút útvonallal megadott CSS fájlt jó eséllyel a háttértárolónk gyökérkönyvtárához képest fogja keresni a webböngésző.

Csak akkor írja felül az eggyel feljebb lévő módszert (amikor <style></style> tagek között adunk meg formázást), ha a <link> tag a <style></style> tagek után helyezkedik el a html fájlban.
Ez általában nem célszerű. Ha már mindkét módszert használjuk, célszerű a <link> taget előbbre rakni, és a <style></style> tageket utána.

<!-- example.html file contents -->
<!-- external CSS example -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>external CSS example</title>
    <link rel="stylesheet" type="text/css" href="example.css">
  </head>
  <body>
    <h1>external CSS example</h1>
    <p>external CSS example</p>
    <h1>external CSS example</h1>
    <p>external CSS example</p>
  </body>
</html>

CSS-ben a /* és */ jelek között adhatunk meg kommenteket, hasonlóképp, mint a C nyelvben. A , illetve a // jelölések nem működnek CSS-ben.

Fontos: a CSS fájlba ne írjunk <style></style> html tageket, illetve a <link> taget se ágyazzuk be <style></style> tagek közé.

/* example.css file contents */

h1 { text-decoration: underline; }

p { color: red; }

Egyéb:

Ebben az esetben például a codepen.io/pen oldalon (és hasonló oldalakon) nem kell <link> taget megadni a <head></head> között, hanem a CSS kódot elég bemásolni a CSS részhez.

CSS kódok prioritása

Ha a fenti módszereket vegyesen használjuk

Ha a fenti módszereket vegyesen használjuk, és van bennük olyan formázás, ami ugyanannak a html tagnek ugyanarra a formázási beállítására vonatkozik (pl. egy <h1></h1> aláhúzott legyen vagy ne), akkor ebben a sorrendben lesznek érvényesek a formázások (minél kisebb szám minél nagyobb prioritást jelent):

inline
<style></style> tagek között megadott
külön fájlban megadott (ha több fájl van, mindig a későbbi sorban megadott fájlban lévő formázás lesz az érvényes)

Tehát ha inline adunk meg CSS formázást, az mindkét másik módszert felülírja, ha <style></style> tagek között adunk meg CSS formázást az pedig csak a külön fájlban megadott formázást írja felül, kivétel akkor, hogyha a <style></style> tagek a <link> taget megelőző sorban szerepelnek (ez utóbbi a codepen.io/pen oldalon és hasonló oldalakon lehet, hogy fordítva van).

Fontos: csak akkor tudja felülírni az egyik formázás a másikat, hogyha a formázási beállítás ugyanarra a dologra vonatkozik.

Például ha az egyik módszerrel megadjuk, hogy a h1 tagek aláhúzottak legyenek:

h1 { text-decoration: underline; }

... a másik módszerrel pedig azt adjuk meg, hogy a h1 tagek ne legyenek aláhúzottak:

h1 { text-decoration: none; }

Ellenpélda: ha az egyik módszerrel betűszínt adunk meg, a másik módszerrel pedig aláhúzást, akkor mindkettő érvényes lesz (a megfelelő html tagre), nem írja felül egyik sem a másikat.

Ha használjuk az !important kulcsszót

Ha használjuk az !important kulcsszót, azzal a fenti fontossági sorrendet definiáljuk felül.

Például ha inline megadtuk az egyik h1 html tagnek, hogy ne legyen aláhúzott, de <style></style> tagek között megadtuk, hogy aláhúzott legyen, !important kulcsszóval, akkor az is aláhúzott lesz, aminek inline megadtuk, hogy ne legyen aláhúzott (pedig ha nem használnánk !important kulcsszót, ez ellenkezőleg lenne).

<!-- !important keyword example -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>!important keyword example</title>
    <style>
      h1 { text-decoration: underline !important; }
    </style>
  </head>
  <body>
    <h1 style="text-decoration:none;">!important keyword example</h1>
  </body>
</html>

Ha esetleg mindhárom módszert használnánk, és mindhárom helyen megadnánk !important kulcsszót, akkor a helyzet nem változna az eredetihez képest, ugyanaz lenne a fontossági sorrend mint eredetileg. Bár gyakorlatilag jellemzően kevés az esélye, hogy az !important kulcsszót egyáltalán 2 különböző módszerben is megadjunk ugyanarra a formázási beállításra vonatkozóan.

Ami egy adott módszeren belül később lett megadva (és ugyanarra a formázási beállításra vonatkozik), az lesz az érvényes

Itt most az inline-al ne foglalkozzunk, mert ilyesmit borítékolhatóan senki nem ír, mert ez túl szembetűnő:

De pédául <style></style> tagek között megadott formázások esetén, ha sok formázást adunk meg, előfordulhat, hogy véletlenül 2 egymásnak ellentmondót is megadunk, jó eséllyel nem egymást követően, hanem egymástól messze.

<!-- CSS formatting conflicts -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CSS formatting conflicts</title>
    <style>
      h1 { text-decoration: underline; }
      /* imagine 100 lines of CSS code here*/
      h1 { text-decoration: none; }
    </style>
  </head>
  <body>
    <h1>CSS formatting conflicts</h1>
  </body>
</html>

Ebben a (fenti) példában a text-decoration: none; lesz az érvényes a h1 tagre, mert az lett később megadva.

Tanácsok a különböző módszerekhez és a prioritásokhoz

Lehetőség szerint csak egy módszert használjunk. Ha több html fájlból áll a honlapunk, akkor külön CSS fájlt, ha csak egy html fájllal dolgozunk, akkor <style></style> tagek közöttit (vagy akár akkor is külön CSS fájlt).
inline módszert csak akkor használjunk, ha 1 darab html fájllal dolgozunk, ami nem áll sok sorból (mondjuk 100 sornál kevesebb), és ebben a html fájlban nem a CSS formázáson van a hangsúly, hanem például a Javascript kódon.
!important kulcsszót lehetőség szerint csak akkor használjunk, ha olyan honlappal van dolgunk, amiben van olyan CSS formázás, amihez nekünk nincs hozzáférésünk (pl. blogmotorok esetén).

Hogyan hivatkozhatunk a CSS kódban egy HTML tagre? (CSS selectorok)

A kép az itt lentebb leírt lehetőségeket szemlélteti.

html tag típusa alapján

A fentebbi példákban is ezt a módszert alkalmaztuk.

Ebben az esetben egy adott html tag összes előfordulása esetén az adott html tagnek adunk meg CSS formázást. Ha tehát pl a h1 tagnek adunk meg CSS formázást, akkor az összes h1 tag ugyanúgy lesz formázva (hacsak felül nem definiáljuk valahol).

<!-- CSS selector example: html tags -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CSS selector example: html tags</title>
    <style>
      h1 { text-decoration: underline; }
      p { color: red; }
    </style>
  </head>
  <body>
    <h1>CSS selector example: html tags</h1>
    <p>CSS selector example: html tags</p>
    <h1>CSS selector example: html tags</h1>
    <p>CSS selector example: html tags</p>
  </body>
</html>

html tag id attribútuma alapján

Abban az esetben használjuk, ha egy általunk kiválasztott konkrét (1 darab) html tagnek szeretnénk formázást meghatározni.

id attribútumból nem lehet egy html fájlon belül több azonos értékű, akkor sem, ha különböző típusú html tagekről van szó.

Ebben a példában az egyik h2 html tagnak adunk meg "aláhúzott szöveg" formázást.

Ez persze nem túl gyakorlatias példa, inkább akkor szoktuk ezt a módszert használni, amikor a html oldalt részekre bontjuk (dobozokba foglaljuk az egyes részeit), és az egyes dobozokra (jellemzően <div></div> tagekre) szoktunk id attribútum alapján hivatkozni.

<!-- CSS selector example: id attribute of a html tag -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CSS selector example: id attribute of a html tag</title>
    <style>
      #id_example { text-decoration: underline; }
    </style>
  </head>
  <body>
    <h1>main title</h1>
    <h2 id="id_example">subtitle1</h2>
    <p>paragraph</p>
    <h2>subtitle2</h2>
    <p>paragraph</p>
  </body>
</html>

html tag class attribútuma alapján

Abban az esetben használjuk, ha általunk kiválasztott több html tagnek szeretnénk azonos formázást meghatározni, akár abban az esetben, ha ezek a kiválasztott html tagek különböző típusúak (pl. van köztük h1 és h2 is), vagy egy adott típusú html tagből nem az összeset választjuk ki, hanem csak egyeseket (pl. nem az összes h2-t választjuk ki, hanem csak néhányat).

Ebben a példában piros színt adunk meg a h1 tagnek, az egyik h2 tagnek, és az egyik p tagnek.

<!-- CSS selector example: class attribute of a html tag -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CSS selector example: class attribute of a html tag</title>
    <style>
      .class_example { color: red; }
    </style>
  </head>
  <body>
    <h1 class="class_example">main title</h1>
    <h2 class="class_example">subtitle1</h2>
    <p class="class_example">paragraph</p>
    <h2>subtitle2</h2>
    <p>paragraph</p>
  </body>
</html>

Osztályból egyszerre többet is megadhatunk egy html tagnek szóközzel elválasztva. Ekkor mindkét osztályra vonatkozó formázások egyszerre lesznek érvényesek az adott html tagre. Például:

<p class="red_color fsize120">paragraph</p>

html tag egyéb attribútuma alapján

Ezt a CSS selectort akkor szoktuk használni, ha html tageket egy egy attribútum értéke alapján szeretnénk kiválasztani.

Ebben a példában például más színű keretet adunk meg egy szöveg típusú input mezőnek, illetve egy szám típusú szöveg mezőnek.

Az input, label { display: block; } CSS rule csak mellékes ebben a példában. Arra való, hogy az input és label html tagek külön sorba legyenek megjelenítve.

<!-- CSS selector example: attribute of a html tag -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CSS selector example: attribute of a html tag</title>
    <style>
      input, label { display: block; }
      input[type="text"] { border: 1px dashed red; }
      input[type="number"] { border: 1px dotted blue; }
    </style>
  </head>
  <body>
    <label for="input_text">input text:</label>
    <input type="text" id="input_text">
    <label for="input_number">input number:</label>
    <input type="number" id="input_number">
  </body>
</html>

Az attribútum alapú CSS szelektorok esetén számtalan egyéb módszer van (pl. szerepel benne egy adott szó, egy adott szóval kezdődik, egy adott szóval végződik), ezekről én nem írok példát, de ezen a linken található néhány ilyen példa:

developer.mozilla.org - attribute selectors

Fontos: a sorrend ezeknél az eseteknél is számít. Például ha előbb megadjuk azt, hogy egy id-val ellátott h1 tag legyen aláhúzott, aztán pedig megadjuk, hogy az összes h1 tag ne legyen aláhúzott, akkor az id-val ellátott h1 tag sem lesz aláhúzott. Viszont ha előbb adjuk meg az összesre vonatkozó formázást, utána pedig az id-val ellátottra, akkor az id-val ellátott aláhúzott lesz.

Tanács: a legáltalánosabbakat vegyük előre. Nagyjából ilyen sorrendben:

html tag típusa alapján kiválasztott tagekre vonatkozó formázások
html tag class attribútuma alapján kiválasztott tagekre vonatkozó formázások
html tag egyéb attribútuma alapján kiválasztott tagekre vonatkozó formázások
html tag id attribútuma alapján kiválasztott tagekre vonatkozó formázások

felsorolás (listed CSS selectors)

Egy CSS selectorban vesszővel elválasztva több elemet is felsorolhatunk, ha azt szeretnénk, hogy egy adott formázás több elemre is érvényes legyen.

Pl. a display: block; formázással adhatjuk meg azt, hogy valami külön sorba legyen írva. Tipikusan például a label, input mezők, gombok, linkek, képek alapbeállítás szerint nincsenek külön sorba írva.

Ebben a példában külön sorba írjuk az input mezőket és a hozzájuk tartozó labeleket, anélkül, hogy <br> vagy <p></p> html tageket használnánk. Ez kifejezetten hasznos lehet, ha sok input mezőnk és sok labelünk van.

Ügyeljünk arra, hogy a rádiógombokat és a checkboxokat és azok labeljeit nem szoktuk külön sorba írni. Ezt például úgy tehetjük meg, ha egy külön-külön <div></div> html tagen belül helyezzük el a rádiógombokat és a checkboxokat, valamint azok labeljeit, és a CSS kódban a display: block; után a divben lévő input mezőknek és a labeleknek display: inline; CSS rulet adunk meg.

<!-- CSS selector example: bunch of elements -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CSS selector example: bunch of elements</title>
    <style>
      input, label, button { display: block; }
      div input, div label { display: inline; }
    </style>
  </head>
  <body>
    <label for="input_text">input text:</label>
    <input type="text" id="input_text">
    <label for="input_number">input number:</label>
    <input type="number" id="input_number">
    <div>
      <label for="radio1">radio1</label>
      <input type="radio" id="radio1" name="radio_group" value="radio1" checked>
      <label for="radio2">radio2</label>
      <input type="radio" id="radio2" name="radio_group" value="radio2">
    </div>
    <div>
      <label for="checkbox1">checkbox1</label>
      <input type="checkbox" id="checkbox1" name="checkbox1">
      <label for="checkbox2">checkbox2</label>
      <input type="checkbox" id="checkbox2" name="checkbox2">
    </div>
    <button>Submit</button>
  </body>
</html>

kombinálás (mixed CSS selectors)

tag_name#id_name

Mivel az id-ból egy html fájlon belül csak egy lehet, ezért ez teljesen ugyanazt eredményezi, mint az #id_name szelektor. Mégis, vannak, akik így szeretik írni: tag_name#id_name

tag_name.class_name

Ez a szelektor a class attribútum alapján választ ki tageket, de csak bizonyos típusú html tageken belül.

Ebben a példában látható, hogy noha több tagnek is szerepel a class attribútumában a "class_example" érték, a formázás (piros betűszín) mégis csak azokra fog vonatkozni, amik p html tagek (és "class_example" classba tartoznak).

<!-- CSS selector example: tagname + class attribute -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CSS selector example: tagname + class attribute</title>
    <style>
      p.class_example { color: red; }
    </style>
  </head>
  <body>
    <h1 class="class_example">main title</h1>
    <h2 class="class_example">subtitle1</h2>
    <p class="class_example">paragraph</p>
    <h2>subtitle2</h2>
    <p>paragraph</p>
  </body>
</html>

Az eddig, és ezután felsorolt módszerek szinte bármelyikét bármelyikkel kombinálhatjuk, néhány kivétellel.

egymásba ágyazott (nested CSS selectors)

Abban az esetben is tudunk külön formázást meghatározni, ha CSS selectoron belül szerepel egy másik CSS selector.

Ebben a példában két egymásba ágyazott listát formázunk különböző módon, de például egymásba ágyazott <div></div> tageket is lehet ezzel a módszerrel formázni.

<!-- CSS nested selectors -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CSS nested selectors</title>
    <style>
      ol { list-style-type: decimal; }
      ol ol { list-style-type: lower-alpha; }
    </style>
  </head>
  <body>
    <h1>CSS nested selectors</h1>
    <ol>
      <li>list element 1</li>
      <li>list element 2</li>
      <ol>
        <li>list element 2a</li>
        <li>list element 2b</li>
        <li>list element 2c</li>
      </ol>
      <li>list element 4</li>
    </ol>
  </body>
</html>

Azt a html taget, amibe be van ágyazva az adott html tag azt szülőnek (parent), ami be van ágyazva azt pedig gyereknek (child).

Ha esetleg azt szeretnénk, hogy a beágyazott lista elemei ne legyenek beljebb igazítva akkor a margin-left: 0px; CSS rulet használjuk:

ol ol { list-style-type: lower-alpha; margin-left: 0px; }

> (közvetlen gyerek, direct child)

Csak abban az esetben alkalmazza a formázást, ha a két egymásba ágyazott CSS selector esetén a gyerek közvetlen gyerek.

Tekintsük az alábbi példát. A div#content-en belül két darab h2 html tag van, viszont ha div#content h2 helyett div#content > h2 CSS szelektort használunk, akkor csak az első h2 tagra fog vonatkozni a megadott formázás (piros szövegszín), mivel a második h2 a div#content-nek már nem a közvetlen gyereke.

Azért, hogy szemléltessük a div#content-et és a benne lévő div#inner_content-et, különböző háttérszínt, különböző szegélyt és belső margót adtunk meg nekik CSS formázásként.

Ebben a példában tehát a pirossal kiszínezett h2 tag a lényeg, a többi csak szemléltetés.

<!-- CSS direct child selector -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CSS direct child selector</title>
    <style>
      div#content > h2 { color: red; }
      div#content {
        background: yellow;
        padding: 5px;
        border: 2px dashed black;
      }
      div#inner_content {
        background: green;
        padding: 5px;
        border: 2px dotted black;
      }
    </style>
  </head>
  <body>
    <h1>CSS direct child selector</h1>
    <div id="content">
      <h1>h1 title</h1>
      <p>paragraph</p>
      <h2>first h2 title</h2>
      <p>paragraph</p>
      <div id="inner_content">
        <h2>second h2 title</h2>
        <p>paragraph</p>
      </div>
    </div>
  </body>
</html>

Egyéb CSS szelektorok:

wikipedia.org - summary of CSS selector syntax

Pseudo CSS selectorok

:first-child, :last-child, :nth-child()

Első gyerek, utolsó gyerek, valahanyadik gyerek.

Például listák, táblázatok esetén könnyű rá példát mutatni.

Fontos, hogy ne arra a html tagre vonatkozóan írjuk, aminek a gyereke (ebben a példában ul), hanem arra, ami a gyerek (ebben a példában li).

<!-- CSS pseudo selectors: :first-child, :last-child, :nth-child(5) -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CSS pseudo selectors: :first-child, :last-child, :nth-child(5)</title>
    <style>
      ul li:first-child { color: red; }
      ul li:last-child { color: blue; }
      ul li:nth-child(5) { color: green; }
    </style>
  </head>
  <body>
    <h1>CSS pseudo selectors: :first-child, :last-child, :nth-child(5)</h1>
    <ul>
      <li>list element 1</li>
      <li>list element 2</li>
      <li>list element 3</li>
      <li>list element 4</li>
      <li>list element 5</li>
      <li>list element 6</li>
      <li>list element 7</li>
      <li>list element 8</li>
    </ul>
  </body>
</html>

:nth-child(odd), :nth-child(even)

Minden páratlanadik és párosadik gyerekelem formázása.

Szintén listáknál, táblázatoknál mutatható be szemléletesen.

Ebben a példában a páratlanadik listaelemeknek piros, a párosadik listaelemeknek kék betűszínt adunk meg.

<!-- CSS pseudo selectors: :nth-child(odd), :nth-child(even) -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CSS pseudo selectors: :nth-child(odd), :nth-child(even)</title>
    <style>
      ul li:nth-child(odd) { color: red; }
      ul li:nth-child(even) { color: blue; }
    </style>
  </head>
  <body>
    <h1>CSS pseudo selectors: :nth-child(odd), :nth-child(even)</h1>
    <ul>
      <li>list element 1</li>
      <li>list element 2</li>
      <li>list element 3</li>
      <li>list element 4</li>
      <li>list element 5</li>
      <li>list element 6</li>
      <li>list element 7</li>
      <li>list element 8</li>
    </ul>
  </body>
</html>

Az :nth-child() pseudo CSS szelektorral más egyéb módon is formázhatunk elemeket, pl. minden harmadikat, vagy akár képletet is megadhatunk. Nem fogok minden ilyenre példát mutatni, de ezen a linken olvashatunk róluk:

developer.mozilla.org - :nth-child()

Hasonlóan működik az :nth-of-type pseudo CSS szelektor is, amiről itt olvashatunk:

developer.mozilla.org - :nth-of-type()

A kettő közti különbség ebben a példában van bemutatva:

developer.mozilla.org - :nth-child(), detailed example

:hover

A :hover pszeudo CSS szelektor bármilyen elemre akkor alkalmaz formázást, ha fölé visszük az egeret.

Jellemzően gombokra, linkekre, esetleg táblázatok sorára, input mezőkre szoktuk alkalmazni.

<!-- CSS pseudo selectors: :hover -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CSS pseudo selectors: :hover</title>
    <style>
      a:hover { background-color: silver; }
      button:hover { background-color: yellow; }
    </style>
  </head>
  <body>
    <h1>CSS pseudo selectors: :hover</h1>
    <ul>
      <li><a
        href="https://en.wikipedia.org/wiki/CSS_box_model" target="_blank"
        alt="Wikipedia, CSS box model" title="Wikipedia, CSS box model">
        Link example
      </a></li>
    </ul>
    <button>Button example</button>
  </body>
</html>

:visited

A már megtekintett linkekre vonatkozóan lehet vele formázást megadni. A háttérszín csak akkor működik, ha az alap linknek is adunk meg háttérszínt az a:link CSS szelektorral.

A linkeknél is lesz róla szó.

Ha töröljük a böngészési előzményeket, akkor a megtekintett linkek visszaállnak alapállapotba.

<!-- CSS pseudo selectors: :visited -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CSS pseudo selectors: :visited</title>
    <style>
      a:link { background-color: azure; }
      a:visited { background-color: lightgrey; }
    </style>
  </head>
  <body>
    <h1>CSS pseudo selectors: :visited</h1>
    <ul>
      <li><a
        href="https://en.wikipedia.org/wiki/CSS_box_model" target="_blank"
        alt="Wikipedia, CSS box model" title="Wikipedia, CSS box model">
        Link example
      </a></li>
    </ul>
  </body>
</html>

:focus

Form elemek közül arra vonatkozó formázást lehet vele megadni, amelyik form elem ki van jelölve vagy "bele van kattintva".

<!-- CSS pseudo selectors: :focus -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CSS pseudo selectors: :focus</title>
    <style>
      input, label, button { display: block; }
      input[type="text"]:focus, input[type="number"]:focus {
        background-color: silver;
      }
    </style>
  </head>
  <body>
    <h1>Click in the input fields</h1>
    <label for="input_text">input text:</label>
    <input type="text" id="input_text">
    <label for="input_number">input number:</label>
    <input type="number" id="input_number">
  </body>
</html>

:not

Lásd formok.

developer.mozilla.org - :not()

::first-letter

Az első betű formázására használható. Például nagyobb méretet vagy más színt adunk meg az első betűnek minden bekezdésben.

<!-- CSS pseudo selector: ::first-letter -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CSS pseudo selector: ::first-letter</title>
    <style>
      p::first-letter {
        font-size: 120%;
      }
    </style>
  </head>
  <body>
    <h1>CSS pseudo selector: ::first-letter</h1>
    <p>Paragraph example.</p>
  </body>
</html>

Egyéb pszeudo CSS szelektorok:

Alapvető szövegformázás

Alapvető tanács a szövegformázáshoz: címekhez mindig a h1, h2, h3, h4 html tageket használjuk, és ezeket formázzuk meg (pl. adhatunk nekik különböző háttérszínt), ahelyett, hogy mondjuk p tageknek adunk nagyobb betűméretet. A p taget mindig az oldal általános szövegéhez használjuk, ne pedig címekhez.

Betűtípus (font-family)

Betűtípust meg lehet adni az egész html oldalra vonatkozóan (ekkor a body-t, esetleg a *-ot (angolul asterisk) használjuk CSS szelektornak), vagy esetleg az egyes html tagekre (h1, h2, p, satöbbi), vagy az oldal egyes részeire (fejléc menü, oldalsáv, satöbbi).
Ha az oldalt több részre bontjuk, és ezeken belül a részeken belül különböző betűtípust akarunk adni, akkor például egy oldalsávon belül külön meg szoktuk adni a h1, h2, p, satöbbi tagek betűtípusát, ilyesmi CSS szelektorokkal: div#sidebar h1 { font-family: Arial, Helvetica, sans-serif; }

Én mondjuk mindig azt preferáltam, hogy az egész oldalnak azonos betűtípusa legyen.

A font-family CSS property használható arra, hogy egyszerre több betűtípust is megadjunk, ami azért jó, mert ha az egyik nem lenne meg az általunk használt böngészőben vagy operációs rendszeren, akkor az azután következő lesz az érvényes.

<!-- CSS font-family -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CSS font-family</title>
    <style>
      body {
        font-family: Arial, Helvetica, sans-serif;
      }
    </style>
  </head>
  <body>
    <h1>CSS font-family</h1>
    <p>CSS font-family</p>
  </body>
</html>

Betűtípusnak mindig érdemes úgynevezett safe fontokat megadni, amik bármilyen ma használatos böngészőkben és operációs rendszereken biztosan működnek.

w3schools.com - safe fonts

Betűméret

Manapság a betűméret megadásához tanácsos reszponzív mértékegységeket használni. Például: %, em, rem, vw.

Én a % használatát javaslom, azt könnyű megérteni. Bár az em sem nehéz, 1.5 em = 150%.

<!-- CSS font-size -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CSS font-size</title>
    <style>
      .fsize120 {
        font-size: 120%;
      }
      .fsize150 {
        font-size: 150%;
      }
      .fsize170 {
        font-size: 170%;
      }
    </style>
  </head>
  <body>
    <h1>CSS font-size</h1>
    <p class="fsize120">120% font-size</p>
    <p class="fsize150">150% font-size</p>
    <p class="fsize170">170% font-size</p>
  </body>
</html>

Néhány megjegyzés a betűméretekhez.

A mértékegységeket mindig egybe kell írni az előttük szereplő számértékkel.

Ha a body-nak megadunk mondjuk 1.5em-et, vagy 150%-ot, akkor minden betűméret az eddigi méretéhez képest 150%-al nagyobb lesz.

De ha például a h1-nek megadunk 1em-et vagy 100%-ot, akkor az ugyanakkora lesz, mint a p default betűmérete (tehát kisebb lesz, mint alapbeállítás szerint a h1).

Érdemes áttekinteni ezen az oldalon a h1, h2, h3, h4 méretét:

w3schools.com - default browser values

Láthatjuk, hogy a h1 mérete alapbeállítás szerint 2 em, ami 200%-ot jelent a p alapbeállítás szerinti betűmretéhez képest.

Azt is érdemes észrevenni, hogy a h5 és a h6 betűmérete alapbeállítás szerint kisebb, mint a p betűmérete. <h5></h5> és <h6></h6> html tageket nem szoktunk használni.

A mértékegységekről külön szó lesz egy kicsit lentebb.

Szöveg igazítása (text-align)

Szöveg igazításánál általában a címsorokat középre szoktuk igazítani (nem mindig, sokszor jó a balra igazítás), a <p></p> tagek között elhelyezett szövegeket pedig sorkizártként (justify).

Megjegyzés: láthatjuk, hogy a szöveg kötilti a rendelkezésre álló teret. Ezért szoktunk a honlapunkat <div></div> tagekkel felosztani, behatárolni, és azoknak megadni szélességet vagy maximális szélességet.

<!-- CSS text-align -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CSS text-align</title>
    <style>
      h1 {
        text-align: center;
      }
      p {
        text-align: justify;
      }
    </style>
  </head>
  <body>
    <h1>CSS text-align</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc auctor turpis augue, non molestie ligula porttitor id. Maecenas tempor est at enim euismod luctus. Nam pretium ligula at ullamcorper accumsan. Curabitur consectetur ac nunc id pretium. Nam dapibus accumsan libero ac porttitor. Etiam iaculis quis dui ut molestie. Praesent semper rutrum dui, in faucibus arcu posuere sed. Praesent id efficitur tortor. Aenean cursus imperdiet nunc, sit amet ultrices tortor tincidunt quis. Sed varius, augue efficitur dapibus venenatis, justo ante dictum lacus, in placerat eros tellus a lacus. Aliquam porttitor sapien augue, eget laoreet felis fringilla sit amet. Maecenas condimentum malesuada turpis at finibus. Phasellus leo leo, pulvinar sollicitudin nisl vitae, rhoncus dictum dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nullam mattis a mauris pellentesque imperdiet.</p>
  </body>
</html>

Sorköz (line-height)

A sorközt a line-height CSS propertyvel tudjuk beállítani. Érdemes %-ot használni mértékegységként.

<!-- CSS line-height -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CSS line-height</title>
    <style>
      p {
        text-align: justify;
      }
      .lineheigh_example {
        line-height: 130%;
      }
    </style>
  </head>
  <body>
    <h1>CSS line-height default</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc auctor turpis augue, non molestie ligula porttitor id. Maecenas tempor est at enim euismod luctus. Nam pretium ligula at ullamcorper accumsan. Curabitur consectetur ac nunc id pretium. Nam dapibus accumsan libero ac porttitor. Etiam iaculis quis dui ut molestie. Praesent semper rutrum dui, in faucibus arcu posuere sed. Praesent id efficitur tortor. Aenean cursus imperdiet nunc, sit amet ultrices tortor tincidunt quis. Sed varius, augue efficitur dapibus venenatis, justo ante dictum lacus, in placerat eros tellus a lacus. Aliquam porttitor sapien augue, eget laoreet felis fringilla sit amet. Maecenas condimentum malesuada turpis at finibus. Phasellus leo leo, pulvinar sollicitudin nisl vitae, rhoncus dictum dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nullam mattis a mauris pellentesque imperdiet.</p>
    <h1>CSS line-height 130%</h1>
    <p class="lineheigh_example">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc auctor turpis augue, non molestie ligula porttitor id. Maecenas tempor est at enim euismod luctus. Nam pretium ligula at ullamcorper accumsan. Curabitur consectetur ac nunc id pretium. Nam dapibus accumsan libero ac porttitor. Etiam iaculis quis dui ut molestie. Praesent semper rutrum dui, in faucibus arcu posuere sed. Praesent id efficitur tortor. Aenean cursus imperdiet nunc, sit amet ultrices tortor tincidunt quis. Sed varius, augue efficitur dapibus venenatis, justo ante dictum lacus, in placerat eros tellus a lacus. Aliquam porttitor sapien augue, eget laoreet felis fringilla sit amet. Maecenas condimentum malesuada turpis at finibus. Phasellus leo leo, pulvinar sollicitudin nisl vitae, rhoncus dictum dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nullam mattis a mauris pellentesque imperdiet.</p>
  </body>
</html>

Szöveg első sorának beljebb kezdése

Szöveg első sorának beljebb kezdését vagy a text-indent CSS propertyvel vagy pedig a ::first-letter pszeudo CSS szelektorral tudjuk megoldani, például az alábbi módokon.

Általában nem szoktak classokat használni ehhez, hanem az összes p taget így formázzák meg.

<!-- CSS text-indent -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CSS text-indent</title>
    <style>
      h1 {
        text-align: center;
      }
      p {
        text-align: justify;
        text-indent: 1.5em;
      }
    </style>
  </head>
  <body>
    <h1>CSS text-indent</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc auctor turpis augue, non molestie ligula porttitor id. Maecenas tempor est at enim euismod luctus. Nam pretium ligula at ullamcorper accumsan. Curabitur consectetur ac nunc id pretium. Nam dapibus accumsan libero ac porttitor. Etiam iaculis quis dui ut molestie. Praesent semper rutrum dui, in faucibus arcu posuere sed. Praesent id efficitur tortor. Aenean cursus imperdiet nunc, sit amet ultrices tortor tincidunt quis. Sed varius, augue efficitur dapibus venenatis, justo ante dictum lacus, in placerat eros tellus a lacus. Aliquam porttitor sapien augue, eget laoreet felis fringilla sit amet. Maecenas condimentum malesuada turpis at finibus. Phasellus leo leo, pulvinar sollicitudin nisl vitae, rhoncus dictum dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nullam mattis a mauris pellentesque imperdiet.</p>
  </body>
</html>

<!-- CSS ::first-letter -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CSS ::first-letter</title>
    <style>
      h1 {
        text-align: center;
      }
      p {
        text-align: justify;
      }
      p::first-letter {
        margin-left: 1.5em;
      }
    </style>
  </head>
  <body>
    <h1>CSS p::first-letter</h1>
    <p class="first_letter_indent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc auctor turpis augue, non molestie ligula porttitor id. Maecenas tempor est at enim euismod luctus. Nam pretium ligula at ullamcorper accumsan. Curabitur consectetur ac nunc id pretium. Nam dapibus accumsan libero ac porttitor. Etiam iaculis quis dui ut molestie. Praesent semper rutrum dui, in faucibus arcu posuere sed. Praesent id efficitur tortor. Aenean cursus imperdiet nunc, sit amet ultrices tortor tincidunt quis. Sed varius, augue efficitur dapibus venenatis, justo ante dictum lacus, in placerat eros tellus a lacus. Aliquam porttitor sapien augue, eget laoreet felis fringilla sit amet. Maecenas condimentum malesuada turpis at finibus. Phasellus leo leo, pulvinar sollicitudin nisl vitae, rhoncus dictum dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nullam mattis a mauris pellentesque imperdiet.</p>
  </body>
</html>

Betűstílus (félkövér, dőlt, aláhúzott)

Elsőre szokatlan lehet, hogy a zárójelben felsoroltaknak különböző CSS propertyjük van: font-weight, font-style, text-decoration. Bár ezekre internetes keresőkben bármikor rákereshetünk (pl. css bold vagy css italic vagy css underline), de azért érdemes megjegyezni melyik melyik.

<!-- CSS font style -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CSS font style</title>
    <style>
      .fstyle_bold {
        font-weight: bold;
      }
      .fstyle_italic {
        font-style: italic;
      }
      .fstyle_underline {
        text-decoration: underline;
      }
      .fstyle_underline_dashed {
        text-decoration: underline dashed;
      }
      .fstyle_underline_dotted {
        text-decoration: underline dotted;
      }
      .fstyle_underline_colored {
        text-decoration: underline red;
      }
    </style>
  </head>
  <body>
    <h1>CSS font style</h1>
    <p class="fstyle_bold">bold</p>
    <p class="fstyle_italic">italic</p>
    <p class="fstyle_underline">underline</p>
    <p class="fstyle_underline_dashed">underline dashed</p>
    <p class="fstyle_underline_dotted">underline dotted</p>
    <p class="fstyle_underline_colored">underline colored</p>
  </body>
</html>

Default értékek:

font-weight: normal;

font-style: normal;

text-decoration: none;

Betűszín

A betűszínt a color CSS property-vel adhatjuk meg. A gyakran használt színeknek van nevük, pl. blue, aqua, navy. Ezen kívül főként kétféleképp adhatjuk meg a színeket, rgb kóddal, illetve 16-os számrendszerben.

Az rgb kódban az első szám a pirost, a második szám a zöldet, a harmadik szám a kéket jelenti. Mindegyik szám 0-tól 255-ig terjedhet. Érdekesség, hogy a zöld nem rgb(0, 255, 0), hanem rgb(0, 128, 0).

Például: .fcolor_red { color: rgb(255,0,0); }

Ha egy színt 16-os számrendszerben adunk meg, akkor fontos, hogy hasmark jelet tegyünk a számérték elé. Például: .fcolor_red { color: #ff0000; }

Szerény véleményem szerint nem érdemes megtanulni, hogy hogyan keverjük ki ebből számértékek alapján a színeket (legfeljebb azt, hogy rgb kód esetén az első, 16-os számrendszer esetén az első kettő jelenti a pirosat, satöbbi). Ehelyett használjunk valamilyen color pickert. Szerintem a w3schools color pickerei a legjobbak:

<!-- CSS font color -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CSS font color</title>
    <style>
      .fcolor_red {
        color: red;
      }
      .fcolor_green {
        color: rgb(0,128,0);
      }
      .fcolor_blue {
        color: #0000ff;
      }
    </style>
  </head>
  <body>
    <h1>CSS font color</h1>
    <p class="fcolor_red">red</p>
    <p class="fcolor_green">green</p>
    <p class="fcolor_blue">blue</p>
  </body>
</html>

Bár alapbeállítás szerint a szöveg színe fekete, ez nem a black értéknek felel meg, hanem az automatic-nak, amit bizonyos böngészőkben át lehet állítani. Ez csak akkor baj, ha esetleg a háttérszín és a betűszín is sötétre vagy világosra van állítva ily módon. Ezért mindig érdemes konkrét háttérszínt és konkrét betűszínt megadni.

Átlátszóság

Átlátszóságot megadhatnuk opacity CSS propertyvel vagy színkód esetén rgb helyett az rgba negyedik paramétereként.

Az opacity CSS propertyt nem csak betűk, hanem bármilyen html tag esetén használhatjuk, aminek van olyan tartalma, ami látszik a honlapon.

<!-- CSS font opacity -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CSS font opacity</title>
    <style>
      .fcolor_red_opacity {
        color: red;
        opacity: 0.5;
      }
      .fcolor_green_rgba {
        color: rgba(0,128,0,0.5);
      }
    </style>
  </head>
  <body>
    <h1>CSS font opacity</h1>
    <p class="fcolor_red_opacity">red</p>
    <p class="fcolor_green_rgba">green</p>
  </body>
</html>

Háttérszín

A háttérszínt a background-color CSS propertyvel adhatjuk meg.

<!-- CSS font background-color -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CSS font background-color</title>
    <style>
      .fbcolor_skyblue {
        background-color: skyblue;
      }
    </style>
  </head>
  <body>
    <h1>CSS font background-color</h1>
    <p class="fbcolor_skyblue">skyblue background-color</p>
  </body>
</html>

Háttérképet, gradientet szövegek esetén ritkán használunk. Talán ha dobozokra osztjuk az oldalunkat, akkor a címsorok esetén szoktunk, de akkor is inkább gradientet.

background-image: url("/img/image_name.jpg");

background-image: linear-gradient(red, yellow);

Szövegközi formázás (<span></span> html tagek)

A <span></span> html tagekkel egy szövegen (pl. egy bekezdésen belül) megadhatunk formázást egy adott szövegrésznek, esetleg mondatoknak, szavaknak. Jellemzően class attribútumot használunk a span html tagekhez.

<!-- HTML <span>/<span> tags + CSS class -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>HTML <span>/<span> tags + CSS class</title>
    <style>
      .fcolor_red {
        color: red;
      }
      .fbcolor_skyblue {
        background-color: skyblue;
      }
    </style>
  </head>
  <body>
    <h1>HTML &lt;span&gt;&lt;/span&gt; tags + CSS class</h1>
    <h2>Title text <span class="fbcolor_skyblue">formatted title text</span> title text</h2>
    <p>Text example <span class="fcolor_red">formatted text example</span> text example</p>
  </body>
</html>

Képek, képgaléria

A képekkel kapcsolatban nagyon fontos tudni, hogy egy honlapra sose illesszünk be <img> html taggel teljes méretű képet. Manapság a teljes méretű képek szélessége kb. 3000 pixel vagy akár 5000 pixel is lehet. Ezek nagyon lelassíthatják a honlap betöltődését (akár 2-3 ilyen kép is), hiába méretezzük át őket CSS-el.

A megoldás: valamilyen képátméretező programmal (Adobe Photoshop, Gimp vagy akár Microsoft Paint) méretezzük át az eredeti képet, és az átméretezett képet illesszük be a html kódba <img> taggel, és a kisebb méretű képet tegyük <a></a> html tagek közé, és linkeljük be a nagy képet, hogy a kis képre rákattintva töltődjön be a nagy kép.

(Ha sok képet kell átméretezni, azt a fent említett programokkal lehet, hogy sok idő vagy kényelmetlen lehet (bár talán már a tömeges átméretezéshez is vannak megoldások ezekben a programokban), de akár egy internetes keresővel is találhatunk tömeges képátméretezőt.)

Érdemes már akkor odafigyelni, amikor a képeket átméretezzük, és a kisképeket (úgynevezett thumbnaileket) létrehozzuk belőlük, akkor a végeredményben azonos szélességű és azonos magasságú képek legyenek, ha több kis képet szeretnénk egymás mellé helyezni (pl. képgalériák sorai esetén). Ezt például úgy tudjuk elérni, hogy bizonyos képekből levágunk valamennyit (vízszintesen vagy függőlegesen), a kisképek (thumbnailek) esetén.

Ha képeket szeretnénk beilleszteni egy html oldalra, általában 2 eset van: vagy egy nagyobb képet szeretnénk beilleszteni az oldalra (mármint ami az átméretezés után is nagyobb marad), vagy több kisebbet.
A nagy képet kb 800-1000 pixel szélességűre méretezzük át, a kisebbeket pedig attól függ, hogy mennyit szeretnénk belőlük egy sorba tenni. Mondjuk ha 4-et szeretnénk egy sorba tenni, akkor osszuk el 4-el a honlapunk desktop szélességének a méretét 4-el (ezek jellemzően 160-300 pixel szélességű kisképek).

Egy kép (reszponzivitással)

Ezt a kódot html fájlba lementve és böngészővel megnyitva próbáljuk ki, mert ehhez hasonló oldalakon: https://codepen.io/pen nem biztos, hogy fog látszódni a lényeg.

A lényeg, amit próbáljunk ki, hogy próbáljuk az böngésző ablakának a méretét csökkenteni, és nézzük meg, hogy a kép akkor sem fog kilógni a böngésző ablakából, hanem a kép mérete arányosan lecsökken (ez a reszponzivitás lényege a képek esetén.

Azért használtam wikipédiás képet a példához, mert a wikipédia automatikusan elkészít egy 800 pixel széles thumbnailt a képről. Az eredeti képet pedig a képre kattintva nyithatjuk meg.

Miért kell két <div></div> tag?

A class="content" attribútummal ellátott div tag jelképezi a honlap főablakát, a class="img_row" attribútummal ellátott div tag pedig azt a helyet, ahová a képet beszúrjuk (az utóbbiból több is lehetne, ha több ilyen nagy képet szeretnénk egymás alá helyezni).

Fontos, hogy a képnek százalékban adjuk meg a méretét, mert ekkor lesz az oldal reszponzív.

Az alapvető középre helyezésért a margin-left: auto; margin-right: auto; CSS rule-ok felelnek. Ezt a honlap legkülső div tagjére is alkalmazzuk, illetve a képre is.

Ha egy képet elhelyezünk egy linkben (<a></a> tagek között), akkor a linknek és a képnek is érdemes alt és title attribútumakat megadni.

<!-- one image in a html file -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>one image in a html file</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      div.gallery_content {
        margin-left: auto;
        margin-right: auto;
        max-with: 1560px;
        width: 90%;
        background-color:blue;
      }
      h1 {
        text-align: center;
        background-color: skyblue;
      }
      div.img_row {
      	padding: 5px;
        background-color: azure;
      }
      .img_row img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width:100%;
        max-width:800px;
      }
    </style>
  </head>
  <body>
    <div class="gallery_content">
      <h1>Picture of Vígadó in Budapest</h1>
      <div class="img_row">
        <a
target="_blank"
alt="Link to Vígadó in Budapest"
title="Link to Vígadó in Budapest"
href="https://upload.wikimedia.org/wikipedia/commons/8/87/Budapest%2C_V%C3%ADgad%C3%B3%2C_3.jpg">
          <img 
src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/87/Budapest%2C_V%C3%ADgad%C3%B3%2C_3.jpg/800px-Budapest%2C_V%C3%ADgad%C3%B3%2C_3.jpg"
alt="Picture of Vígadó in Budapest"
title="Picture of Vígadó in Budapest"
        ></a>
      </div>
    </div>
  </body>
</html>

Képgaléria (reszponzivitással)

Egy képgaléria egy sorában általában több thumbnailt (kisképet) helyezünk el, amikre kattintva új ablakban megnyílnak a nagyképek. Itt az egyszerűség kedvéért a linkeket lespóroltuk, aki szeretné, gyakorlásképpen hozzáteheti őket.

Érdemes az egész galériát (akkor is, ha több sorból áll) egy divbe tenni, a margin: 0 auto; CSS rule-al középre helyezni, illetve érdemes a képgaléria egy sorát szintén egy divbe tenni <div class="gallery_row"></div>, illetve azon belül az egyes galériaelemeket szintén egy-egy divbe tenni <div class="gallery_cell"></div>.
Ezeknek a diveknek is adjunk margin: 0 auto; CSS formázást, sőt, text-align: center;-t is, még akkor is, ha nincs benne szöveg.

A <div class="gallery_cell"></div> width-jét nem 25%-nak adtuk meg, pedig ha 100%-ot 4 részre osztunk az 25%, de a margók és belső margók (padding) miatt érdemes kevesebbre megadni (a példában 20%).

A reszponzivitásért (tablet és mobiltelefonon eltérő megjelenésért) ezek a részek felfelnek:

@media screen and (max-width: 768px) {

...valamint...

@media screen and (max-width: 480px) {

Itt se 50%-ot és 100%-ot használjunk a margók és a belső margók (padding) miatt, hanem valamivel kevesebbet.

Ha a képek magasságban térnek el, akkor a magasságot érdemes egyenlő méretre beállítani, a példában:

height: 8em;

A példát úgy próbáljuk ki, hogy lementjük a kódot egy html fájlba, amit megnyitunk egy böngészővel, és a böngésző ablakát méretezzük át egyre kisebbre.

<!-- responsive image gallery -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>responsive image gallery</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      div.gallery_content {
        margin: 0 auto;
        max-width: 1560px;
        width: 90%;
        background-color:azure;
      }
      h1 {
        text-align: center;
        background-color: skyblue;
      }
      div.gallery_row {
        margin: 0 auto;
        text-align: center;
        background-color: orange;
      }
      div.gallery_cell {
        width:23%;
        display: inline-block;
      	padding: 5px;
        text-align: center;
        background-color: yellow;
      }
      .gallery_cell img {
        display:block;
        margin-left: auto;
        margin-right: auto;
        height:8em;
      }
      @media screen and (max-width: 768px) {
        div.gallery_cell {
          width:45%;
        }
      }
      @media screen and (max-width: 480px) {
        div.gallery_cell {
          width:95%;
        }
      }
    </style>
  </head>
  <body>
    <div class="gallery_content">
      <h1>responsive image gallery</h1>
      <div class="gallery_row">
        <div class="gallery_cell">
          <img 
src="https://upload.wikimedia.org/wikipedia/commons/7/7b/Ubuntu-logo-no-wordmark-solid-o-2022.svg"
alt="Ubuntu logo"
title="Ubuntu logo">
          <p>Ubuntu logo</p>
        </div>
        <div class="gallery_cell">
          <img 
src="https://upload.wikimedia.org/wikipedia/commons/6/66/Openlogo-debianV2.svg"
alt="Debian logo"
title="Debian logo">
          <p>Debian logo</p>
        </div>
        <div class="gallery_cell">
          <img 
src="https://upload.wikimedia.org/wikipedia/commons/a/ae/Fedora-logo-eexpss.svg"
alt="Fedora logo"
title="Fedora logo">
          <p>Fedora logo</p>
        </div>
        <div class="gallery_cell">
          <img 
src="https://upload.wikimedia.org/wikipedia/commons/6/63/CentOS_color_logo.svg"
alt="CentOS logo"
title="CentOS logo">
          <p>CentOS logo</p>
        </div>
      </div>
    </div>
  </body>
</html>

Ez persze csak egy tömör példa, a gyakorlatban egy képgaléria sok ilyen sorból állhat, akár külön címsorokkal.

Háttérképek

Háttérképet megadhatunk az egész html oldalnak (ezt úgy szoktuk, hogy egy container divbe belerakjuk az oldal teljes tartalmát, ami nem fedi le a teljes látható oldalt, és a körülütte lévő háttérnek adunk háttérképet.

Erre egy példa:

https://harmonikusreinkarnacio.blog.hu/

Példakód:

<!-- simple background image -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>simple background image</title>
    <style>
      body {
      	background-image: url(https://m.blog.hu/it/itkezdoknek/image/background_repeat_example.jpg);
      }
      div#container {
        width: 90%;
        min-height: 1000px;
        margin: auto;
        background-color: white;
        color: black;
      }
    </style>
  </head>
  <body>
    <div id="container">

    </div>
  </body>
</html>

parallax háttérkép

A background-attachment: fixed; CSS rule-al megadhatjuk, hogy a háttérkép úgynevezett parallax legyen, vagyis amikor görgetünk az oldalon, akkor a háttérkép a helyén maradjon és ne görgetődjön az oldallal együtt.

<!-- parallax background image -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>parallax background image</title>
    <style>
      body {
      	background-image: url(https://m.blog.hu/it/itkezdoknek/image/background_repeat_example.jpg);
      }
      background-attachment: fixed;
      div#container {
        width: 90%;
        min-height: 1000px;
        margin: auto;
        background-color: white;
        color: black;
      }
    </style>
  </head>
  <body>
    <div id="container">

    </div>
  </body>
</html>

egyéb CSS rule-ok a háttérképekkel kapcsolatban:

A háttérkép középre legyen helyezve:

background-position: center;

A háttérkép ne ismétlődjön:

background-repeat: no-repeat;

A háttérkép a teljes rendelkezésre álló teret kitölti:

background-size: cover;

Linkek

A linkeket az a:link, a:visited, a:hover, a:active CSS szelektorokkal tudjuk formázni. Ezek jelentése:

a:link: a meg nem tekintett link, amire nem vittük fölé az egeret és nem kattintottunk rá
a:visited a megtekintett link, amire nem vittük fölé az egeret és nem kattintottunk rá
a:hover amikor link ami fölé vittük az egeret (mindegy, hogy megtekintett vagy meg nem tekintett)
a:active amikor rákattintunk a linkre (mindegy, hogy megtekintett vagy meg nem tekintett)

Fontos, hogy ezeket ilyen sorrendben adjuk meg, mert például ha előbb írjuk le a hover-t, mint a visited-et, akkor ha már megtekintettük a linket, a hiába visszük fölé az egeret, ugyanúgy fog kinézni, mint a megtekintett link.

<!-- CSS links -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CSS links</title>
    <style>
      a:link {
        color: red;
        background-color: azure;
        text-decoration: none;
      }
      a:visited {
        color: black;
        background-color: lime;
        text-decoration: underline;
      }
      a:hover {
        color: green;
        background-color: skyblue;
        text-decoration: underline;
      }
      a:active {
        color: magenta;
        background-color: orchid;
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <a target="_blank"
href="https://en.wikipedia.org/wiki/CSS#Summary_of_selector_syntax"
alt="Link to css selector syntax"
title="Link to css selector syntax">
Link to CSS selector syntax</a>
  </body>
</html>

navbar

Egy navbar jellemzően a honlap minden html fájljánának tetején, a honlap logója alatt, esetleg a slider (váltakozó képek) alatt megjelenő, a honlap főbb linkjeinek (kezdőlap, hírek, cikkek, képgaléria, kapcsolat, satöbbi) gyűjteménye.

Ha ezt html-ben írjuk meg, akkor minden html fájlba be kell illesztenünk (leszámítva a CSS kódot). Szokás php-ban megírni, mondjuk egy header.php nevű fájlba, és minden fájlban az adott helyen <php include("header.php"); ?> utasítással beilleszteni az adott fájlba, bár ekkor annak a fájlnak is php kiterjesztése kell, hogy legyen, amibe beillesztjük.
A php-s megoldás azért jó, mert ha módosítani akarjuk a headert, vagy a navbart, akkor nem kell minden fájlban módosítanunk, csak a header.php-ban.

Elsőre furcsa lehet, hogy <ul></ul> és <li></li> html tageket alakítunk át div-szerűvé, de ez a bevett szokás navbarok készítése esetén, és a keresőmotorok is ezt részesítik előnyben. Ügyeljünk arra, hogy az ul és a li alapbeállítás szerint nem tölti ki vízszintesen a rendelkezésre álló helyet, mint a div, ezért használjuk a flex-basis: 100%; CSS rule-t.

Képgalériához, navbarhoz, vagy az oldal feldarabolásához szinte mindig display: flex; CSS rule-t használjunk, mert egyrészt azzal a legkönnyebb függőlegesen középre helyezni mondjuk egy div tartalmát, illetve vízszintesen is könnyen állítgathatjuk például egy divben lévő elemeket (például úgy, hogy azonos távolság legyen közöttük). Lásd még display: flex;

Ez csak egy szemléltető példa, nem design.

<!-- CSS navbar -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CSS navbar</title>
    <style>
      div#header {
      	width: 90%;
        margin: auto;
        padding: 0.5em;
        background-color: orange; 
      }
      div#site_logo_line {
        padding: 0.5em;
      	height: 1em;
        background-color: red;
      }
      div#slider {
        display: flex;
        justify-content: center; /*horizontal*/
        align-items: center; /*vertical*/
        padding: 0.5em;
        height: 10em;
        background-color: yellow;
      }
      div#navbar {
        background-color: azure;
      }
      div#navbar ul {
        display: flex;
      	list-style-type: none;
        margin: 0;
        padding: 0;
      }
      div#navbar li { flex-basis: 100%; }
      div#navbar li a {
        display: block;
        margin: 0.5em;
        padding: 0.5em;
        text-align: center;
        text-decoration: none;
        color: black;
        background-color: skyblue;
      }
    </style>
  </head>
  <body>
    <div id="header">
      <div id="site_logo_line">header logo</div>
      <div id="slider">slider pictures</div>
      <div id="navbar">
        <ul>
          <li>
            <a href="/index.html" alt="Link to start page" title=" Link to start page">Start page</a>
          </li>
          <li>
            <a href="/articles.html" alt="Link to articles" title="Link to articles">Articles</a>
          </li>
          <li>
            <a href="/gallery.html" alt="Link to gallery" title="Link to gallery">Gallery</a>
          </li>
          <li>
            <a href="/contact.html" alt="Link to contact" title="Link to contact">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </body>
</html>

A reszponzív navbarról a display: flex; CSS rulenál lesz szó. Mobil nézetből a slidert érdemes kihagyni (display: none;), esetleg a honlap tetején található logót hagyjuk meg mobil nézetben, vagy még akár azt sem. A logó helyett bevett szokás hamburger menüt használni mobil nézetben.

Listák

A listák elemei előtti jeleket CSS-ben érdemes formázni

Rendezett listák (<ol></ol>) esetén a list-style-type CSS property főbb értékei, amiket használhatunk:

none (semmi)
decimal (számok)
lower-alpha (kisbetűk)
upper-alpha (nagybetűk)
lower-roman (római számok kisbetűvel)
upper-roman (római számok nagybetűvel)

Rendezetlen listák (<ul></ul>) esetén a list-style-type főbb értékei, amiket használhatunk:

disc (teli kör)
circle (üres kör)
square (négyzet)
"-" (kötőjel stringként megadva)
'\20AC' (euró szimbólum)

Képek:

list-style-image: url('https://upload.wikimedia.org/wikipedia/commons/0/08/Circle-icons-rocket.svg');

További lista formázási lehetőségek:

A saját szimbólumos listák padding-leftjét külön be kell állítani, különben a szimbólum egybe lesz írva a listaelemek szövegével.

Ha képet használunk a listaelemek előtt megjelenítendő szimbólumnak, akkor ha a list-style-image CSS propertyt használjuk, a kép méretét nehezen fogjuk tudni átállítani.

<!-- CSS lists -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CSS lists</title>
    <style>
      .numeric_list { list-style-type: decimal; }
      .alphabetical_list { list-style-type: lower-alpha; }
      .upper_roman_list { list-style-type: upper-roman; }
      
      .circle_list { list-style-type: circle; }
      .square_list { list-style-type: square; }
      .string_list { list-style-type: ">"; }
      .string_list li { padding-left:0.5em; }
      .symbol_list { list-style-type: "\20AC"; }
      .symbol_list li { padding-left:0.5em; }
      .gradient_list { list-style-image: linear-gradient(to left bottom, red, blue); }
      .image_symbol_list {
        list-style-type: none;
        list-style-image: url('https://upload.wikimedia.org/wikipedia/commons/c/cd/Button_recycler.png');
       }
    </style>
  </head>
  <body>
    <h1>CSS lists</h1>
    <ol class="numeric_list">
      <li>list element 1</li>
      <li>list element 2</li>
    </ol>
    <ol class="alphabetical_list">
      <li>list element 1</li>
      <li>list element 2</li>
    </ol>
    <ol class="upper_roman_list">
      <li>list element 1</li>
      <li>list element 2</li>
    </ol>
    <ul class="circle_list">
      <li>list element 1</li>
      <li>list element 2</li>
    </ul>
    <ul class="string_list">
      <li>list element 1</li>
      <li>list element 2</li>
    </ul>
    <ul class="symbol_list">
      <li>list element 1</li>
      <li>list element 2</li>
    </ul>
    <ul class="gradient_list">
      <li>list element 1</li>
      <li>list element 2</li>
    </ul>
    <ul class="image_symbol_list">
      <li>list element 1</li>
      <li>list element 2</li>
    </ul>
  </body>
</html>

Egy kis mókolással meg lehet oldani, hogy a listaelemek előtti képek mérete állítható legyen. Viszont eltérő betűméret esetén ez sem fog jól kizénzni.

Esetleg még lehet tovább próbálgatni background-size, background-position és background-position-y propertykkel.

<!-- CSS image symbol list -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CSS image symbol list</title>
    <style>
      .image_symbol_list { list-style-type: none; }
      .image_symbol_list li::before {
        content:'';
        display:inline-block;
        width:1.5em;
        height:1.5em;
        padding-left:0.5em;
        text-align:center;
        background-image: url('https://upload.wikimedia.org/wikipedia/commons/c/cd/Button_recycler.png');
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <h1>CSS image symbol list</h1>
    <ul class="image_symbol_list">
      <li>list element 1</li>
      <li>list element 2</li>
    </ul>
  </body>
</html>

Táblázatok

Táblázatok esetén a reszponzivitást megvalósítani legalább könnyű :)
A táblázatot be kell ágyazni <div></div> tagek közé, és ezeknek a div tageknek meg kell adni az overflow-x: auto; CSS rulet, melynek köszönhetően, ha nem fér ki a táblázat a böngésző ablakába, akkor a táblázat alatt meg fog jelenni egy csúszka.
Ugyebár táblázatok esetén nem jó, ha az oszlopokat egymás alá helyezzük, mert akkor nehéz átlátni, hogy az oszlopokon belül melyik cella tartozik egy másik oszlop megfelelő cellájához.

A border-collapse: collapse; CSS rule felel azért, hogy a táblázat borderei között ne legyen belső margó.

A tbody tr:nth-child(odd) és a tbody tr:nth-child(even) CSS szelektorokkal tudunk a táblázat páros és páratlan sorainak különböző háttérszínt adni.

A thead tr:hover, tbody tr:hover CSS szelektorral tudjuk megoldani, ha a táblázat egy sora fölé visszük az egeret, akkor annak más háttérszíne legyen.

<!-- responsive table with CSS -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>responsive table with CSS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      h1 {
        text-align: center;
      }
      div.responsive_table {
        overflow-x: auto;
      }
      table {
        width: 90%;
      }
      table, th, td {
        margin: 0 auto;
        border: 1px solid black;
        border-collapse: collapse;
      }
      td, caption {
        padding: 0.5em;
      }
      caption {
        background-color:azure;
      }
      tbody tr:nth-child(odd) {
        background-color: mintcream;
      }
      tbody tr:nth-child(even) {
        background-color: whitesmoke;
      }
      thead tr:hover, tbody tr:hover {
        background-color: lightblue;
      }
    </style>
  </head>
  <body>
    <h1>responsive table with CSS</h1>
    <div class="responsive_table">
      <table>
        <caption>Table example</caption>
        <thead>
          <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
            <th>Header 4</th>
            <th>Header 5</th>
            <th>Header 6</th>
            <th>Header 7</th>
            <th>Header 8</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Row 1, Cell 1</td>
            <td>Row 1, Cell 2</td>
            <td>Row 1, Cell 3</td>
            <td>Row 1, Cell 4</td>
            <td>Row 1, Cell 5</td>
            <td>Row 1, Cell 6</td>
            <td>Row 1, Cell 7</td>
            <td>Row 1, Cell 8</td>
          </tr>
          <tr>
            <td>Row 2, Cell 1</td>
            <td>Row 2, Cell 2</td>
            <td>Row 2, Cell 3</td>
            <td>Row 2, Cell 4</td>
            <td>Row 2, Cell 5</td>
            <td>Row 2, Cell 6</td>
            <td>Row 2, Cell 7</td>
            <td>Row 2, Cell 8</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>

Formok, form elemek

Ebben a példában alapvető formázást valósítunk meg formelemekre.

Az első 3 CSS rule azért felel, hogy az elemek egymás alatt vagy egymás mellett jelenjenek meg. Ha a <div class="radio"></div> vagy a <div class="checkbox"></div> tagek között vannak, akkor egymás mellett (display: inline;), egyébként egymás alatt (display: block;).

A többi CSS rule a kinézetükért felel. Az összesnek ugyanakkora alsó margót adunk meg.

Ezt a CSS szelektort úgy kell értelmezni, hogy az összes input html tag, kivéve a type="radio" és type="checkbox" attribútummal rendelkezők:

input:not([type="radio"], [type="checkbox"])

Ezeknek és a select html tageknek azonos hosszúságot adunk meg (ezt a margók és belső margók (padding) valamelyest módosíthatják).

Azoknak az input mezőknek, amiknek a típusa nem submit, radio vagy checkbox, alsó körvonalat adunk meg, illetve ha egy ilyen input mezőbe belekattintunk (:focus pszeudo szelektor), akkor piros alsó körvonalat adunk meg.

Az elküldés gombnak más színt és 2 pixeles körvonalat adunk meg.

<!-- form basic styling with CSS -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>form basic styling with CSS</title>
    <style>
      input, label, select { display: block; }
      div.radio label, input { display: inline; }
      div.checkbox label, input { display: inline; }
      
      input, select { margin-bottom: 0.5em; padding: 0; }
      input:not([type="radio"], [type="checkbox"]), select { width: 15em; }
      input:not([type="submit"], [type="radio"], [type="checkbox"]) { border: none; border-bottom: 2px solid black; }
      input:not([type="submit"], [type="radio"], [type="checkbox"]):focus { outline: none; border-bottom: 2px solid red; }
      input[type="submit"] { background-color: azure; border: 2px solid black; }
      input[type="submit"]:hover { background-color: yellow; }
    </style>
  </head>
  <body>
    <h1>form basic styling with CSS</h1>
    <form action="something.php">
      <fieldset>
        <legend>Personal data</legend>

        <label for="p_name">Person name:</label>
        <input type="text" id="p_name" name="p_name">

        <label for="p_email">Person email:</label>
        <input type="email" id="p_email" name="p_email">

        <label for="p_birtdate">Person birthdate:</label>
        <input type="date" id="p_birtdate" name="p_birtdate">
        
        <label for="p_language_skills">Language skills:</label>
        <select id="p_language_skills">
          <option value="" selected disabled>Please select...</option>
          <option value="none">None</option>
          <option value="english_basic">English basic</option>
          <option value="english_intermediate">English intermediate</option>
          <option value="english_expert">English expert</option>
          <option value="other">Other</option>
        </select>

        <label for="p_children">Person's children:</label>
        <input type="number" value="0" min="0" max="20" id="p_children" name="p_children">

        <div class="radio">
          <label for="p_male">Male</label>
          <input type="radio" id="p_male" name="gender" value="male" checked>
          <label for="p_female">Female</label>
          <input type="radio" id="p_female" name="gender" value="female">
        </div>

        <div class="checkbox">
          <label for="p_house">House</label>
          <input type="checkbox" id="p_house" name="p_house">
          <label for="p_car">Car</label>
          <input type="checkbox" id="p_car" name="p_car">
        </div>
        
        <input type="submit" id="btn_submit" value="Submit">
      </fieldset>
    </form>
  </body>
</html>

Box modell (belső margó, körvonal, külső margó)

1: ha egy divnek nincs tartalma, és nincs neki height vagy padding CSS property megadva, akkor nem fog látszódni.

2, 3: ha egy divnek van tartalma, vagy van height vagy padding CSS property megadva, akkor szélességet tekintve kitölti a rendelkezésre álló teret.

4: ha egy tartalommal vagy heighttel rendelkező divnek van paddingje, akkor a több teret tölt ki a háttérszínével együtt.

5: ha egy látszódó divnek adunk bordert, akkor a border a padding szélén fog látszódni, vagy ha nincs padding, akkor a tartalom vagy magasság szélén.

6: ha ezen felül margót is adunk a divnek, akkor a margója olyan színű lesz, mint az őt befoglaló html tag (jelen példában fehér).

7: a zöld hátterű divet beleraktuk egy narancssárga hátterű divbe, a narancssárga hátterű divnek viszont nem adtunk meg tartalmat vagy magasságot vagy paddinget.
Ekkor a zöld div jobb és bal szélén narancssárán látszik a margó, az alján és a tetején viszont fehéren, mivel a narancssárga hátterű divnek nincs a zöld hátterű diven kívül tartalma, vagy nagyobb magassága, paddingje. Ettől persze a zöld divnek még van alsó és felső margója, csak nem narancssárgán látszik.

8: ha a narancssárga hátterű divnek is adunk paddinget, vagy nagyobb magasságot, akkor szemléletesebben látszódni fog, hogy két div van egymásba helyezve.

A margót csak akkor láthatjuk, ha jobb egér gombbal rákattintunk a vizsgálandó divre, kiválasztjuk az inspect element menüpontot, és a jobb oldalt megjelenő menüben rávisszük az egeret a margó részre.

<!-- box model in CSS -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>box model in CSS</title>
    <style>
      div { background-color: lime; }
      #div1, #div2 {}
      #div3 { height:1em; }
      #div4 { height:1em; padding: 1em; }
      #div5 { height:1em; padding: 1em; border: 1px dashed black; }
      #div6 { height:1em; padding: 1em; border: 1px dashed black; margin: 0.5em; }
      #div7 { background-color: orange; }
      #div8 { height:1em; padding: 1em; border: 1px dashed black; margin: 0.5em; }
      #div9 { background-color: orange; padding: 0.5em; }
      #div10 { height:1em; padding: 1em; border: 1px dashed black; margin: 0.5em; }
    </style>
  </head>
  <body>
    <h1>box model in CSS</h1>
    <h2>1. div without content, without height:</h2>
    <div id="div1"></div>
    <h2>2. div with content, without height:</h2>
    <div id="div2">text example</div>
    <h2>3. div with height, without content:</h2>
    <div id="div3"></div>
    <h2>4. div with height, with padding:</h2>
    <div id="div4"></div>
    <h2>5. div with height, with padding, with border:</h2>
    <div id="div5"></div>
    <h2>6. div with height, with padding, with border, with margin:</h2>
    <div id="div6"></div>
    <h2>7. div with height, with padding, with border, with margin inside a div:</h2>
    <div id="div7">
      <div id="div8"></div>
    </div>
    <h2>8. div with height, with padding, with border, with margin inside a div with padding:</h2>
    <div id="div9">
      <div id="div10"></div>
    </div>
  </body>
</html>

Egy kép a CSS box model szemléltetésére. Általában ezeken a képeken a border kicsit széles, azért, hogy elférjen benne a magyarázó szöveg, persze a gyakorlatban nem szoktunk ilyen vastag bordert megadni.

kép forrása: https://iq.opengenus.org/css-box-model/

Megjegyzés: az outline nem a box model része. outline például alapbeállítás szerint egy input type="text" mező körül jelenik meg, ha belekattintunk egy input mezőbe.

box modell gyakorlati példák

A html oldal felosztása dobozokra

A box modell ismerete tipikusan például az oldal felosztásához hasznos. A navbaros példában már csináltunk hasonlót, de szerepeljen itt egy még egy példa. Ezt úgy képzeljük el, hogy ami itt látszik, az a header alatt szerepel, a bal oldalán mondjuk egy menü szerepel, a jobb oldalán pedig az aktuális oldal tartalma (cikkek, képek, satöbbi).

Amikor az oldalt több részre osztjuk fel %-os mérték megadásával, ügyeljünk a margókra és a belső margókra (padding, eltartás), mert azok is helyet foglalnak, ezért ne adjunk meg összesen 100%-ot, hanem jellemzően 90-et vagy 95-öt.

<!-- CSS page divs example -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CSS page divs example</title>
    <style>
      div#header {
      	width: 90%;
        padding: 0.5em;
        background-color: orange; 
        margin: auto;
      }
      div#page_content {
        display: flex;
        justify-content: space-around;
        width: 90%;
        padding: 0.5em;
        background-color: red;
        margin: auto;
      }
      div#page_menu {
        display:inline-block;
        width: 28%;
        height: 20em;
        background-color: azure;
      }
      div#page_container {
        display:inline-block;
        width: 70%;
        height: 20em;
        background-color: skyblue;
      }
      div#footer {
        width: 90%;
        padding: 0.5em;
        background-color: orange; 
        margin: auto;
      }
    </style>
  </head>
  <body>
    <div id="header">header</div>
    <div id="page_content">
      <div id="page_menu">
    
      </div>
      <div id="page_container">
    
      </div>
    </div>
    <div id="footer">footer</div>
  </body>
</html>

Gombok formázása

Másik tipikus box modell példa a gombok formázása, mivel jó eséllyel használjuk a bordert és a paddingot, esetleg a margint is.

Ezek a gombok a különféle bordereket szemléltetik, nem arra készültek, hogy valaki pontosan ilyen dizájnú gombokat használjon a honlapján, egyszerűen csak egyes CSS propertyk bemutatásához.

Két másik CSS property ami a box modell kapcsán gyakran elő szokott kerülni, a border-radius, aminek segítségével lekerekíthetjük például egy gomb, vagy akár egy div sarkait, illetve a box-shadow, aminek a segítségével árnyékot adhatunk meg gomboknak vagy akár diveknek.

Ha azt szeretnénk, hogy egy elemnek az árnyéka (box-shadow) a teljes elem körül jelenjen meg, akkor az első két paraméterenek 0-t adjunk meg, például: box-shadow: 0 0 10px black;

<!-- CSS buttons example -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CSS buttons example</title>
    <style>
      button#button1 {
      	border: 0.5em solid black;
        border-radius: 1em;
        background-image: linear-gradient(red, yellow);
        padding: 2em;
        margin-right: 2em;
        box-shadow: 5px 5px 5px silver;
      }
      button#button2 {
      	border: 0.5em dashed black;
        border-radius: 1em;
        background-image: linear-gradient(to right, red , blue);
        padding: 2em;
        margin-right: 2em;
        box-shadow: 5px 5px 5px silver;
      }
      button#button3 {
      	border: 0.5em dotted black;
        border-radius: 1em;
        background-image: linear-gradient(to bottom right, green, yellow);
        padding: 2em;
        box-shadow: 5px 5px 5px silver;
      }
      button:hover {
        opacity: 0.5;
      }
    </style>
  </head>
  <body>
    <button id="button1">button1</button>
    <button id="button2">button2</button>
    <button id="button3">button3</button>
  </body>
</html>

display CSS property

A display CSS property legalapvetőbb beállításaival azt tudjuk beállítani, hogy bizonyos elemek egymás alatt (display:block;) vagy egymás mellett (display:inline; vagy display:inline-block;) jelenjenek meg.

Ezeket általában akkkor használjuk, ha az alapbeállítástól el szeretnénk térni.

Tipikusan például a form elemek alapbeállítás szerint display:inline; azaz egymás mellett jelennek meg. Persze be lehet rakni őkete egy-egy <p></p> tagek közé, de ha sok van belőlük, akkor érdemes átállítani display:block;-ra, kivéve persze a rádiógombokat és a checkboxokat, amik jobb, ha egymás mellett jelennek meg. Erre fentebb a form elemeknél néztünk is példát.

A linkek és a képek is display:inline; azaz egymás mellett jelennek meg alapbeállítás szerint. Bár a képeket inkább <div></div> tagek közé szoktuk beilleszteni, mint ahogy egy fentebbi képgaléria példában is láthattuk.

Olyan is előfordul, amikor display:block; az alapbeállítás, és display:inline;-ra vagy display:inline-block;-ra szeretnénk átállítani, például ha <li></li> elemekből szeretnénk navbart készíteni, erre a linkeknél láthattunk példát.

Ezeken kívül az alapok közt van még a display:none; amit két esetlben szoktunk jellemzően használni: az egyik ha mobil vagy desktop nézetben azt szeretnénk, hogy valami ne jelenjen meg, a másik, ha Javascripttel szeretnénk megoldani, hogy megjelenjen (pl. egy legördülő menü).

display: block; a html tagek tartalma egymás alatt jelenik meg

display: inline; a html tagek tartalma egymás mellett jelenik meg

display: inline-block; a html tagek tartalma egymás mellett jelenik meg, de az összes egymás mellé helyezett elem külön sorban a többi html taghez képest

display: none; a html tag nem jelenik meg alapbeállítás szerint

display: flex;

Ha a display: flex; CSS rulet alkalmazzuk egy szülőelemre, akkor a benne lévő gyerekelemeket tudjuk vízszintesen (justify-content) és függőlegesen (align-items) is középre helyezni, elég választékos módon. Fontos, hogy a vízszintes vagy függőleges igazításra vonatkozó CSS ruleokat is a szülőelemre alkalmazzuk.

Ez jól jöhet például képgalériák, navbarok készítésénél.

<!-- CSS flex examples -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CSS flex examples</title>
    <style>
      div#flex_horizontal1 {
      	display:flex;
        padding: 0.5em;
        background-color: orange; 
        justify-content: center;
      }
      div#flex_horizontal2 {
      	display:flex;
        padding: 0.5em;
        background-color: orange; 
        justify-content: space-between;
      }
      div#flex_horizontal3 {
      	display:flex;
        padding: 0.5em;
        background-color: orange; 
        justify-content: space-around;
      }
      div#flex_vertical {
      	display:flex;
        height: 10em;
        background-color: orange; 
        justify-content: space-around;
        align-items: center;
      }
      div.flex_element {
        width: 3em;
        height:3em;
        background-color: purple;
        margin: 0.5em;
      }
    </style>
  </head>
  <body>
    <h1>justify-content: center;</h1>
    <div id="flex_horizontal1">
    	<div class="flex_element"></div>
        <div class="flex_element"></div>
        <div class="flex_element"></div>
    </div>
    <h1>justify-content:space-between;</h1>
    <div id="flex_horizontal2">
    	<div class="flex_element"></div>
        <div class="flex_element"></div>
        <div class="flex_element"></div>
    </div>
    <h1>justify-content:space-around;</h1>
    <div id="flex_horizontal3">
    	<div class="flex_element"></div>
        <div class="flex_element"></div>
        <div class="flex_element"></div>
    </div>
    <h1>justify-content:space-between; align-items: center;</h1>
    <div id="flex_vertical">
    	<div class="flex_element"></div>
        <div class="flex_element"></div>
        <div class="flex_element"></div>
    </div>
  </body>
</html>

display: flex; (reszponzív navbar)

A display: flex; CSS rule esetén alapbeállítás szerint balról jobbra rendeződnek el az elemek (flex-direction: row;). Be lehet állítani, hogy mobilnézet esetén az elemek fentről lefelé helyezkedjenek el, például mondjuk egy navbar esetén. Ezt a flex-direction: column; CSS rule-al állíthatjuk be.

Egy ilyen navbaros példa:

<!-- CSS flex responsive navbar -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CSS flex responsive navbar</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      div#navbar {
        background-color: azure;
      }
      div#navbar ul {
        display: flex;
        flex-direction: row;
        margin: 0; padding: 0;
        list-style-type: none;
        text-align: center;
      }
      div#navbar li {
        margin: 0.5em;
        flex-basis: 100%;
      }
      div#navbar li a {
        display:block;
        padding: 0.5em;
        color: black;
        background-color: skyblue;
        text-decoration: none;
      }
      @media screen and (max-width: 600px) {
        div#navbar ul {
          flex-direction: column;
          margin: auto;
          width: 80%;
        }
      }
    </style>
  </head>
  <body>
    <div id="navbar">
      <ul>
        <li>
          <a href="/index.html" alt="Link to start page" title=" Link to start page">Start page</a>
        </li>
        <li>
          <a href="/articles.html" alt="Link to articles" title="Link to articles">Articles</a>
        </li>
        <li>
          <a href="/gallery.html" alt="Link to gallery" title="Link to gallery">Gallery</a>
        </li>
        <li>
          <a href="/contact.html" alt="Link to contact" title="Link to contact">Contact</a>
        </li>
      </ul>
    </div>
  </body>
</html>

display: grid;

display: grid; CSS rulet jellemzően akkor használunk, ha a honlapunkon belül egy html oldalt fel akarunk osztani sok részre, jellemzően úgy, hogy ezek a részek soronként vagy oszloponként eltérőek.

Ha a sorok és az oszlopok azonosan vannak felosztva, akkor inkább használjunk display: flex;-et

Ezt persze meg lehetne tenni úgy is, hogy az egymásba ágyazott diveknek megadunk pl. width: 30%;-ot és hasonló értékeket, de sokat kellene vele mókolni, és a margókat és a belső margókat is bele kellene számolni.

Tegyük az egész felosztani kívánt területet egy divbe (aminek a példában az id-ja grid_container)
Ennek a grid_container-nek adjunk meg display: grid; CSS rulet
Adjunk neki magasságot (a 100vh a böngészőablak teljes méretét jelenti eszköztárak nélkül)
A grid-template-columns CSS propertyben adjuk meg, hogy hány oszlopot szeretnénk, és azok mérete hogy aránylik egymáshoz. Az fr mértékegység a fractional unit rövidítése. 4 darab 1fr egymás után azt jelenti, hogy az oszlopok 4 egyenlő részre osztják fel azt a területet, amit a grid_container kitölt.
A grid-template-rows CSS propertyben adjuk meg azt, hogy hány darab sort szeretnénk és azok mérete hogyan aránylik egymáshoz.
Ezt követően a grid-template-areas CSS propertyben adjuk meg soronként, hogy az adott sort a grid_containerben lévő divek közül melyik hogyan tölti ki. Fontos, hogy itt nem div id-kat adunk meg, hanem egyedi elnevezést.
Például az első sort teljes egészében a header tölti ki.
A következő sort pedig úgy osztjuk fel, hogy 1fr-nyi terület jut a sidebarnak, 3fr-nyi terület pedig a content1-nek, amit úgy fejezünk ki, hogy egyszer leírjuk a sidebart, háromszor pedig a content1-et.
Hasonlóan járjunk el a többi sorral is.
A grid-gap CSS property tulajdonképpen külső margót ad a grid_container-en belül lévő diveknek.
Azokat a neveket, amiket a grid-template-areas CSS propertyben használtunk, a grid_containeren belül lévő divekhez rendeljük hozzá a grid-area CSS propertyvel. Például: div#header { grid-area: header; }
Mobil nézetben érdemes mindent egymás alá helyeznünk. Ez azt jelenti, hogy oszlopból 1 darab lesz, sorból pedig annyi darab, ahány div van a grid_containeren belül. A sorok méretét adjuk meg úgy, hogy megfelelően kiférjen a bennük lévő tartalom.

Mivel ez elsőre elég bonyolultnak tűnhet, érdemes lehet megnézni róla egy-két videót, amiknek a linkjét a példakód alatt láthatjuk.

<!-- CSS grid dashboard example -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CSS grid dashboard example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      div#grid_container {
        display: grid;
        height: 100vh;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: 0.3fr 1.5fr 1.5fr 0.2fr;
        grid-template-areas:
        "header header header header"
        "sidebar content1 content1 content1"
        "sidebar content2 content2 content3"
        "footer footer footer footer";
        grid-gap: 0.5em;
      }
      div#header {
        grid-area: header;
        background-color: yellow;
      }
      div#sidebar {

        grid-area: sidebar;
        background-color: silver;
      }
      div#content1 {
        grid-area: content1;
        background-color: tomato;
      }
      div#content2 {
        grid-area: content2;
        background-color: skyblue;
      }
      div#content3 {
        grid-area: content3;
        background-color: violet;
      }
      div#footer {
        grid-area: footer;
        background-color: orange;
      }
      div#grid_container div {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0.5em;
        border-radius: 0.5em;
      }

      @media screen and (max-width: 600px) {
        div#grid_container {
          grid-template-columns: 1fr;
          grid-template-rows: 0.3fr 0.5fr 1.5fr 1fr 0.5fr 0.2fr;
          grid-template-areas:
          "header"
          "sidebar"
          "content1"
          "content2"
          "content3"
          "footer";
        }
      }
    </style>
  </head>
  <body>
    <div id="grid_container">
      <div id="header">Header</div>
      <div id="sidebar">Sidebar</div>
      <div id="content1">Content1</div>
      <div id="content2">Content2</div>
      <div id="content3">Content3</div>
      <div id="footer">Footer</div>
    </div>
  </body>
</html>

joshwcomeau.com - grid
Gremmédia - grid
Responsive CSS Grid Tutorial (videó)
Responsive Dashboard Layouts with CSS Grid (videó)
Flexbox or grid - How to decide? (videó)

position CSS property

A position CSS propertyvel egy html tag tartalmának a helyét módosíthatjuk egy html oldalon. Tipikusan divekre, esetleg képekre szokták alkalmazni.

Ezen a három linken, illetve az alattuk látható képen szemléletesen meg vannak mutatva a position CSS property egyes értékei.

forrás: több oldalon is megtalálható ugyanez a kép

position: static;

Ez az alapbeállítás, ha nem adunk meg semmit a position CSS propertyre vonatkozóan. Ebben az esetben a display CSS property adja meg az adott html tag tartalmának a helyét az oldalon, vagy ha azt sem adtuk meg, akkor pedig a browser default értékek (pl. linkek, képek esetén display: inline; divek, p-k esetén display: block;).

Például akkor használjuk, ha desktop nézetben más beállítást adtunk meg, de mobil nézetben position: static;-ot szeretnénk.

position: absolute;

Ha ezt a beállítást alkalmazzuk egy html tagre, akkor annak a tartalmát a html oldal látható széleihez képest (az úgynevezett viewporthoz képest) helyezhetjük el a left, top, right, bottom CSS propertykkel.
Ez például egy dokumentumszerkesztőben (Microsoft Word, LibreOffice Writer) a szövegdobozhoz hasonlít.

Ahhoz, hogy ne a html oldal látható széleihez képest, hanem mondjuk a html elem parantjéhez képest (az a html tag, amin belül a szóban forgó html tag közvetlenül elhelyezkedik) pozícionálhassuk az adott html taget, a parentjének meg kell adnunk position: relative; CSS rule-t.

Gyakorlatban például akkor használjuk, ha mondjuk játékokban úgynevezett draggable html tageket szeretnénk, amire ha rákattintunk és lenyomva tartjuk az egérgombot, akkor drag&drop-szerűen tudjuk áthelyezni az oldalon belül valahová. Ezt viszont Javascripttel valósítjuk meg, így ebben a tananyagrészben nem lesz róla szó.

position: relative;

Ha ezt a beállítást alkalmazzuk egy html tagre, akkor azt a html taget az eredeti helyéhez képest tudjuk elmozdítani a left, top, right, bottom CSS propertyk segítségével.

position: fixed;

Ha ezt a beállítást alkalmazzuk egy html tagre, akkor annak a html tagnek a tartalma az oldalon akkor is ugyanott marad, ha görgetünk le/fel.

Jó példa rá például egy webshopnál a kosár, vagy például reklámok, vagy a cookie használatról való értesítők, bár ez utóbbi kettő eltüntethető Javascript segítségével.

position: sticky;

Ha ezt a beállítást alkalmazzuk egy html tagre, akkor amikor lefele görgetünk, ahogy eléri az oldal tetejét, akkor az oldal tetején marad (vagyis onnantól kezdve úgy viselkedik mintha position: fixed; lenne).

Tipikusan navbarokra szokták alkalmazni.

<!-- CSS responsive sticky navbar -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CSS responsive sticky navbar</title>
    <style>
      div#header, div#navbar, div#container {
      	width: 90%;
        margin: auto;
        padding: 0.5em;
      }
      div#header {
        background-color: orange; 
      }
      div#site_logo_line {
        padding: 0.5em;
      	height: 1em;
        background-color: red;
      }
      div#slider {
        display: flex;
        justify-content: center; /*horizontal*/
        align-items: center; /*vertical*/
        padding: 0.5em;
        height: 10em;
        background-color: yellow;
      }
      div#navbar {
        position: sticky;
        top: 0px;
        background-color: azure;
      }
      div#navbar ul {
        display: flex;
        flex-direction: row;
        gap: 0.5em;
        margin: 0; padding: 0;
        list-style-type: none;
        text-align: center;
      }
      div#navbar li {
        flex-basis: 100%;
      }
      div#navbar li a {
        display:block;
        padding: 0.5em;
        color: black;
        background-color: skyblue;
        text-decoration: none;
      }
      div#container {
        background-color: tomato;
      }
      div#container h1 {
        margin: 0;
        background-color: red;
      }
      div#content {
        min-height: 1000px;
      }
      @media screen and (max-width: 600px) {
        div#slider {
          display: none;
        }
        div#navbar {
          position: static;
        }
        div#navbar ul {

          flex-direction: column;
          margin: auto;
        }
      }
    </style>
  </head>
  <body>
    <div id="header">
      <div id="site_logo_line">header logo</div>
      <div id="slider">slider pictures</div>
    </div>
    <div id="navbar">
      <ul>
        <li>
          <a href="/index.html" alt="Link to start page" title=" Link to start page">Start page</a>
        </li>
        <li>
          <a href="/articles.html" alt="Link to articles" title="Link to articles">Articles</a>
        </li>
        <li>
          <a href="/gallery.html" alt="Link to gallery" title="Link to gallery">Gallery</a>
        </li>
        <li>
          <a href="/contact.html" alt="Link to contact" title="Link to contact">Contact</a>
        </li>
      </ul>
    </div>
    <div id="container">
      <h1>Title</h1>
      <div id="content">

      </div>
    </div>
  </body>
</html>

z-index CSS property

z-index CSS propertyt akkor használunk, ha position: absolute; illetve position: relative; esetén az egymást eltakaró tartalmak közül meg szeretnénk határozni, hogy melyik legyen felül, illetve alul.

A legalsó elem esetén z-index: -1; CSS rulet szoktunk használni.

mértékegységek

A reszponzivitás (mobiltelefonon, tableten, desktop számítógépen való megfelelő megjelenítés) érdekében érdemes rem, em, %, vw, vh mértékegységeket használnunk, amiknek a leírását itt találhatjuk meg:

default értékek

Bizonyos html elemeknek van alapbeállítás szerint CSS formázása, akkor is, ha nem állítunk be rájuk CSS formázást. Ezekkel jó tisztában lenni. Például itt találhatjuk ezeket az értékeket:

w3schools.com - broswer default CSS values

Vannak olyan honlapok, ahol CSS kódokat találhatunk arra vonatkozóan, hogy ezeket a default értkeket kinullázzák. Például egy ilyen honlap:

meyerweb.com - CSS reset

Kezdőként nem biztos, hogy javasolt ilyet használni, de jó, ha valaki tud róla, hogy ilyen is létezik.

Egyéb CSS tananyagok: