Az oldal tetejére
Stíluslapok (CSS) használata
CSS = Cascading Style Sheets = Egymásba ágyazott stíluslapok
FONTOS! A CSS-t akkor kezd tanulni, ha már ismered a HTML nyelvet!

Tartalom

  1. Mire jók a stíluslapok?
  2. Hogyan kezdjünk hozzá?
  3. CSS kód szintaxisa (leírási szabályai)
  4. CSS kód rendszerezése
  5. Mértékegységek
  6. Tulajdonságok I. - háttér, szöveg, betű
  7. Tulajdonságok II. - keret, margó, kitöltés
  8. Tulajdonságok III. - listák, böngésző görgetősáv
  9. Látszólagos osztályok / dinamikus CSS
  10. Egyéb tulajdonságok
  11. Dobozszerű formázási modell
  12. Professzionális elrendezések CSS-el
  13. Megjelenítési rangsor
  14. Példák
  15. Források, linkek

0. Mire jók a stíluslapok?

HTML gyengeségei

Alapfogalmak

Formázás, stílusok: a weboldal elrendezése és a megjelenítéshez használt beállítások (színek, elválasztó vonalak, betűk… stb.) összessége

Szabály, sablon: stílusok összessége

Stíluslap: szabályok összessége

Stíluslapok haszna

Egy külön fájlban létrehozunk stílusokat (formázási tulajdonságok összessége, pl. betűszín, betűméret, térköz... stb.) adott névvel (a név a szabály neve), és ahol használni szeretnénk, ott csak a stílus nevét adjuk meg. Nem szükséges újra minden formátumot megadni. Előnyök:

Először készítsük el az oldal szerkezetét és tartalmát, majd utána egy stíluslappal formázzuk.
Erre egy példa - bal oldalt a HTML kód eredménye formázás nélkül; jobb oldalt a külön fájlban megadott CSS-el együtt.

CSS nélkül CSS stíluslapokkal

1. Hogyan kezdjünk hozzá?

Most is mindössze egy jegyzettömbre / tetszőleges más szerkesztő programra lesz szükségünk. Nem tudjuk még, hogy mit tartalmazhat egy CSS kódrészlet, egyelőre nézzük meg csak azt, hogy melyik 3 helyre kerülhet CSS kód:

Külön CSS fájl

Előnye:

Hátránya:

<html>
<head>
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body></body>
</html>
stíluslap hivatkozása (importálása) a HTML fájl HEAD részében

másik lehetőség ugyanerre (ezt kevésbé használják):

<html>
<head>
<title></title>
<style type="text/css">
@import url(style.css);
</style>

</head>
<body></body>
</html>
stíluslap hivatkozása (importálása) a HTML fájl HEAD részében
A fenti <head>-be írt CSS-nél szoktak a <style> után egy <!-- , míg a </style> előtt egy --> részt megadni. Ezt azért érdemes használni, mert a közte lévő kód rejtve (kommentezve) lesz, ezáltal a régebbi böngészők sem zavarodnak bele.

Közvetlenül a formázandó egységbe írt CSS

Hátránya:

Előnye:

<html>
<head>
<title></title>
<style type="text/css">
...Ide kerül a CSS kód...
</style>

</head>
<body></body>
</html>
CSS kód a HTML fájl HEAD részében

HTML leírás adott pontjába írt CSS

Hátránya:

Előnye:

<p style="color: green">
közvetlenül az adott elemhez írva

2. CSS kód szintaxisa (leírási szabályai)

Mit írhatunk a CSS kódba?

Kisebb blokkokat (szabályokat, sablonokat) fogunk definiálni, melyek formázási stílusokból állnak.
3 féle blokkot definiálhatunk:

Mindhárom sablontípusnak ugyanaz a formátuma, így először adjuk meg ezt általánosan.

Sablonok formátuma

szelektor {
    tulajdonság1: érték1;
    tulajdonság2: érték2;
}
Egy CSS sablon általános formátuma
Először az elem nevét (szelektor, kiválasztó), majd kapcsos zárójel között a tulajdonságát, és a tulajdonság után kettőspontot írva a definícióját adhatjuk meg, melyet pontosvesszővel választunk el a következő tulajdonságától.
Egy CSS utasítás két részből áll, a szelektor (vagyis megnevező), és a deklaráció (formázása).

Az említett 3 típus csak és kizárólag a szelektor megadásában tér el, ezeket nézzük most meg.
Az alábbi példában 16 pixel méretű, piros betűszínű sablont definiálunk

Sablontípusok

Adott HTML elemre érvényes sablon
h1 {
    color: red;
    font-size: 14px;
}
Ebben az esetben szelektornak a h1-es HTML elemet választottuk (<h1>).
Használható pl. a body szelektor is, mely a teljes oldalra érvényesíti a tulajdonságokat.

Amelyik HTML oldalon szerepel ez a CSS kód (akár importálva, akár a HEAD-ben), ott az összes h1-es címsor 14px méretű, piros színű lesz
Az olyan tulajdonságoknál, ahol több szóból áll a tulajdonság neve, mindig kötőjelet teszünk közé (pl.: font-size)
Egyedi névvel ellátott sablon
.kicsi_piros {
    color: red;
    font-size: 14px;
}
Szelektornak tetszőleges, egyedi nevet használunk. A név elé egy PONTOT kell írnunk.
Ez csak és kizárólag ott lesz érvényes, ahol a HTML kódban a nevével hivatkozunk rá.

Az egyedi névvel ellátott sablonra való hivatkozás (HTML kódban):

<p class="kicsi_piros">Ez lesz a kicsi piros szöveg</p>
a hivatkozás a class tulajdonsággal lehetséges, értékül adva az adott sablon nevét
a class tagot beírhatjuk <p>, <div>, <span>, <table>, <tr>, <td>, <ol>, <ul>, <li> ... stb.… tagokba
Azonosító alapú kiválasztás

Hasonlít az egyedi névvel ellátottra, de ez egy HTML oldalon mindösszesen 1 db elemre lesz érvényes, mégpedig arra, aminek az azonosítója a CSS sablon szelektora.

#kiemelt {
    color: red;
    font-size: 14px;
}
Szelektornak tetszőleges, egyedi nevet használunk. A név elé egy KETTŐSKERESZTET kell írnunk.
Ez csak és kizárólag ott lesz érvényes, ahol a HTML kódban ugyanezt az azonosítót használjuk. Egy HTML oldalon csak egyetlen helyen!
Tipikus felhasználás: fejléc, lábléc, oldal szerkezeti formázások (amiből tipikusan 1 van 1 oldalon).

Az egyedi névvel ellátott sablonra való hivatkozás (HTML kódban):

<p id="kiemelt">Ez lesz a kiemelt szöveg</p>
az azonosító alapú kiválasztás az id tulajdonsággal lehetséges, értékül adva az adott sablon nevét

3. CSS kód rendszerezése

Stílusok keverése

<td class="proba">
Ez a normál szöveg<span class="mas_szoveg">Más féle szöveg</span>újra normál szöveg
</td>
hogyha pl. egy szöveg egy táblázat cellájában van, és beállítasz neki valamilyen sablont, de azt szeretnéd, hogy a szöveg egy része máshogy nézzen ki, mint a többi, tehát más sablont beállítani, akkor <span>-t használj

Példa: proba2.html

Csoportosítás

Azonos stílussal rendelkező sablonokat egyben megadhatjuk:

h1 {font-size: 20px; color: #00000;}
h2 {font-size: 20px; color: #00000;}
h3 {font-size: 20px; color: #00000;}

HELYETT
h1, h2, h3 {font-size: 20px; color: #00000;}
csoportosíthatóság: a szelektornál vesszővel elválasztva felsoroljuk a kívánt sablonneveket (bármelyik típusú lehet)

Eltérő tulajdonságok csoportosítása:

border-left-width: 2px;
border-style: solid;
border-color: green;

HELYETT
border: 2px solid green;
csoportosíthatóság: a tulajdonság speciális tagjait a tulajdonság nevéből elhagyjuk, majd felsoroljuk az értékeket
általában érdemes tisztán leírni, nem csoportosítva, a border egy tipikus kivétel, ahol használjuk bátran az összevont alakot

Helyzetérzékeny kiválasztás

Előfordulhat olyan eset, amikor pl. a következőt fogalmazzuk meg: "olyan szövegre legyen érvényes ez a sablon, ami egy táblázatban szerepel és félkövér".

Ilyenkor a CSS leírás szelektorát a következő módon kell megadnunk: table b { ...}
Másik példa (a "nagybetus" nevű sablon akkor kerül alkalmazásra, ha egy táblázatcellában van): td .nagybetus { ... }

Példa: proba3.html (keresd a "table b" kódot)

4. Mértékegységek

A betűméret alapértelmezése: 16px
4-es betűméretnek kb. 16px-es vastag / 18px-es normál betűtípus felel meg
5-ös betűméretnek kb. 24px-es normál betűtipus felel meg

font-size: 2em; /-szoros, az elem betűméret-magasságához képest/

Használhatóak egyéb mértékegységek is, pl.: 24pt (pt = pont)

Példa: proba8.html

5. Tulajdonságok I. - háttér, szöveg, betű

Itt már csak a tulajdonságokat illetve lehetséges példaértékeket adunk meg. Ezeket kell elhelyezni a CSS sablon formátum kapcsoszárójelek közé eső részébe.

Háttér tulajdonságok

background-color: skyblue;
background-image: url(hatter.jpg);
background-position: top left;
background-attachment: fixed; / scroll;
background-repeat: repeat; / no-repeat; / repeat-x; / repeat-y;

EGYBE ÍRVA IS LEHET (külön talán átláthatóbb):
background: skyblue url(hatter.jpg) no-repeat fixed center center;
háttérszín (background-color), értéke a HTML-hez hasonlóan (pl. black, #FFFFFF)
háttérkép (background-image)
háttér igazítása (background-position), értékei: top/center/bottom illetve left/center/right
háttér rögzítése (background-attachment)
-->fixed: görgetéskor is mindig ugyanazt látom
-->scroll: lefelé görgetéskor felfelé kimegy a háttérkép
háttér ismétlése (background-repeat), értékei:
-->repeat (ismétel vizszintesen és függőlegesen)
-->no-repeat (nem ismétel)
-->repeat-x (vízszintes ismétlés)
-->repeat-y (függőleges ismétlés)

Szöveg tulajdonságok

Alaptulajdonságok

color: #000000;
font-family: "Times New Roman"; / "Verdana"; / "Georgia"; / "Courier"; ...stb.
font-style: italic; / normal; / oblique;
font-weight: lighter; / normal; / bold; / bolder;
font-size: 20px; / 20pt; / 5%; / xx-small; / x-small; / small; / medium; / large; / x-large; / xx-large; / smaller; / larger;
text-decoration: none; / underline; / overline; / line-through; / blink;
betűszín (color) betűtípus (font-family)
dőlt betű (font-style)
férkövér betű (font-weight)
betűméret (font-size), px-ben érdemes megadni!
dekoráció (text-decoration), értékei: nincs / aláhúzás / föléhúzás / áthúzás / villogás
-->egyszerre több is megadható: {text-decoration: underline overline;}

További tulajdonságok

letter-spacing: 10px;
word-spacing: 10px;
line-height: 20px;
vertical-align: sub; / super; / baseline; / text-top; / text-bottom; / middle; / top; / bottom;
text-align: center; / right; / left; / justify;
text-indent: 40px;
text-transform: none; / capitalize; / uppercase; / lowercase;
betűtávolság (letter-spacing)
szótávolság (word-spacing)
sormagasság (line-height)
függőleges igazítás (vertical-align), nem mindenre működik!
vízszintes igazítás (text-align), szövegre!
behúzás (text-indent), paragrafusok esetén (<p>)!
transzformáció (text-transform), értékei: nincs / minden szó kezdőbetű nagy / nagybetűs / kisbetűs

Bonyolultabb tulajdonságok

p: first-line {font-variant: small-caps;}
p: first-letter {font-size: 200%; float: left;}
nagybetűs 1. sor (p: first-line): proba4.html
nagy kezdőbetű (p: first-letter): proba5.html

6. Tulajdonságok II. - keret, margó, kitöltés

HTML-ben kétféle elemtípus létezik. Az egyik a sorközi (ún. inline) elem, ilyen például amikor egy sima szöveget írunk le. A másik pedig a dobozszerű elem, melyre példák a p,div,span,table,tr,td,h1..h6 elemek.

Ennek alapján beszélhetünk az ún. dobozszerű formázási modellről. Lényege, hogy a dobozszerű egységeknek van kerete. A keret és a dobozban lévő tartalom közti helyet kitöltésnek (padding), míg a kerettől kifelé, az őt magába foglaló szülőelem és a keret közti távolságot margónak (margin) nevezzük.

Részletesebben még lesz erről szó egy külön fejezetben, most csak a hozzájuk tartozó tulajdonságokat nézzük meg.

Keretek

border: 2px solid blue;

KÜLÖN IS ÁLLÍTHATÓ MIND A 4 OLDALRA:
border-top: 1px solid blue;
border-right: 1px solid blue;
border-bottom: 1px solid blue;
border-left: 1px solid blue;

TULAJDONSÁGONKÉNT IS TOVÁBB BONTHATÓ (de nem érdemes!)
border-left-width: 2px;
border-style: solid;
border-color: green;

PÉLDA:
.pelda {
    border-left: 1px solid red;
    border-top: 3px double blue;
    border-right: 3px dotted green;
    border-bottom: 3px dashed black;
}
keret (border), értékei: vastagság (2px), stílus (sima vonal = solid), szín (blue)
felső keret (border-top) | jobb keret (border-right) | alsó keret (border-bottom) | bal keret (border-left)

Keret stílusok: none / hidden / dotted / dashed / solid / double / groove / ridge / inset / outset

Margók

margin: 3px;

A 4 OLDALRA KÜLÖN MEGADVA CSOPORTOSÍTÁSSAL
margin: 3px 2px 3px 2px;

KÜLÖN ÍRVA:
margin-top: 3px;
margin-right: 3px;
margin-bottom: 3px;
margin-left: 3px;
margó (margin), minden oldalra ugyanazt állítjuk be
margó (margin), külön állítva oldalanként (felső-jobb-alsó-bal sorrendben)
felső margó (margin-top) | jobb margó (margin-right) | alsó margó (margin-bottom) | bal margó (margin-left)

Kitöltés

padding: 3px;
padding: 3px 2px 3px 2px
padding-left: 2px; padding-right: 4px; padding-top: 3px; padding-bottom: 1px;
kitöltés (padding), minden oldalra ugyanazt állítjuk be
kitöltés (padding), külön állítva oldalanként (felső-jobb-alsó-bal sorrendben)
felső kitöltés (padding-top) | jobb kitöltés (padding-right) | alsó kitöltés (padding-bottom) | bal kitöltés (padding-left)

7. Tulajdonságok III. - listák, böngésző görgetősáv

Listák

ul {list-style: square inside url(pont.gif);}
számozatlan listák esetén a pont.gif kép lesz a listaelem jelölője

square a listaelem jele (ez egy négyzetet rak a lista elé)
inside egy kép behúzását jelenti / outside azt, hogy ne legyen behúzva
van egy hivatkozás egy képre, melyet az előbb definiált négyzet listajel helyére rak be, de meg kell adni a listaelem jelét is, mert különben nem jelenik meg a kép

Csoportosítás nélkül (ritkán használt)

ul {
    list-style-position: inside;
    list-style-type: disc;
    list-style-image: url(pont.gif);
}
jel behúzásának szabályozása (list-style-position)
jelölés (list-style-type)
képre cserélés (list-style-image)

Jelek lehetőségei (nem mindet támogatja minden böngésző):

none / disc / circle / square / decimal / decimal-leading-zero / lower-roman / upper-roman / lower-alpha / upper-alpha / lower-greek / lower-latin / upper-latin / hebrew / armenian / georgian / cjk-ideographic / hiragana / katakana / hiragana-iroha / katakana-iroha

Példa: proba6.html

Böngésző görgetősáv

body {
    scrollbar-base-color: #cb9763;
    scrollbar-track-color:#eaeada;
    scrollbar-highlight-color:#eaeada;
    scrollbar-3d-light-color:#cb9763;
    scrollbar-dark-shadow-color:#cb9763;
    scrollbar-shadow-color:#000000;
    scrollbar-arrow-color:#000000;
}
görgetősáv alapszín (scrollbar-base-color)
tolóka színe (scrollbar-track-color)
tolóka színe (aktívan) (scrollbar-highlight-color)
3d-s szín (scrollbar-3d-light-color)
tolóka árnyéka (scrollbar-dark-shadow-color)
árnyékszín (scrollbar-shadow-color)
nyilak színe (scrollbar-arrow-color)

8. Látszólagos osztályok / dinamikus CSS

Látszólagos elemekkel már találkozhattunk a szövegformázásnál is (first-letter / first-line). Ezek tipikusan valamilyen állapot változás esetén érvényesülnek. Így például egy linknek lehet alapállapota, jelenleg aktív, már látogatott és éppen kijelölt állapota is. Az utolsó eset alatt azt értjük, amikor az egeret a link fölé húzzuk. Az egyes állapotok nevét egy kettőspont után adjuk meg, ahogy a következő példákban is láthatjuk majd.

Linkek

a { color: #0000FF; text-decoration: underline; }
a:link {text-decoration: none;}
a:active {font-size: 20px;}
a:visited {font-style: italic;}
a:hover {color: cc0000;}
alapstílus (a {...})
link (a:link {...})
aktív link (a:active {...})
már látott link (a:visited {...})
ha az egeret föléviszed, ilyenre változik (a:hover {...})

Tipikusan az a:link, a:active és a:visited-nek ugyanazt a stílust szokták adni, az a:hover különbözik.

Lehet használni más tagokkal együtt is.
pl. a minta sablonra lesz érvényes:
.minta a {}
.minta a:hover {}

Hivatkozással ellátott képekre - a:link img {border: solid blue;}

Űrlapelemek

input {font-size: 12px; border: 1px solid #000000; background: #ffffff;}
input:hover {border: 1px solid #0000FF;}
input:active {font-style: bold;}
input:focus {background: #dddddd;}
beviteli mező alapstílus (input)
egér fölévitelekor (input:hover)
aktív elem stílusa (input:active)
kiválasztáskor (input:focus)

9. Egyéb tulajdonságok

Megjelenítés vs. láthatóság

display: block; / inline; / list-item / none;



display: megjelenítés szabályozása
--> none: nem látszik, a helye sincs kihagyva
--> block: blokkszintű elemként jelenik meg (lásd dobozmodell)
--> inline: sorközi elemként jelenik meg (lásd dobozmodell)
--> list-item: hasonló a blokkhoz, de listajelölővel rendelkezik

A "display" tulajdonsághoz hasonló a láthatóság szabályozása, melyre a "visibility" tulajdonság alkalmas.

visibility: visible; / hidden; / collapse;
visibility: láthatóság szabályozása
--> visible: látszik az adott elem (alapértelmezés)
--> hidden: az adott elem, és minden gyermekeleme rejtett - az általa elfoglalt terület üresen látható a képernyőn (ebben tér el a display-től, ahol nem marad meg az elfoglalt terület sem)
--> collapse: csak táblázat elemeire - sor/oszlop elrejtése (más sor/oszlop felhasználhatja a felszabaduló területet, de az elrendezés nem változik). Nem táblázatra alkalmazva a 'hidden' értékkel azonosan viselkedik.

Középre igazítás

Szövegre

text-align: center;
Ez a módszer csak blokkszintű (lásd 10. fejezet) elemeknél működik. Sorközi elemeknél tegyük még bele a "display:block;" beállítást is!

Elrendezésre

.layout {
    margin: 0 auto;
    width: 500px;
}
Elrendezések esetében a margó ("margin") automatikusra állítása szükséges. Ekkor a szülőelem két szélétől egyenlő távolságra, tehát középre kerül az adott doboz. Fontos, hogy meg kell adnunk az adott elrendezés szélességét ("width") is.
Képek esetén a szélesség helyett a "display:block;" tulajdonságot kell megadni.

10. Dobozszerű formázási modell

A CSS egy egyszerű, dobozszerű formázási modellt használ, ahol minden elemformázás eredménye egy, vagy több négyszögletes dobozként képzelhető el. Minden doboznak van egy 'magja', az őt körülvevő 'kitöltéssel' (padding), szegéllyel (border) és margóval (margin). Kitöltésnek a mag és a szegély, míg margónak a szegély és a külső, az adott elemet körülvevő doboz (szülő HTML elem) közti területet értük.

Példa: ha azt szeretnénk, hogy a látható szegély távolabb kerüljön a szomszédos HTML elemektől, akkor a margin tulajdonságot használjuk. Amennyiben a szegélyt magától az elemtől (kép, szöveg... stb.) szereténk távolabb helyezni, akkor a padding tulajdonságot kell módosítanunk.

A margó, a szegély és a kitöltés mérete oldalanként külön meghatározható (fent/jobbra/lent/balra - top/right/bottom/left). A kitöltőterület hátérszíne megegyezik az elemével, amelyet a background tulajdonság határoz meg. A szegély színe és stílusa szintén a border tulajdonság beállításával határozható meg, míg a margó mindig átlátszó, így a szülő elem állandóan látható marad.

A doboz szélessége az elem, a kitöltés, a szegély és a margó területének összege. A dobozmodell az egyik böngészőben (na vajon melyikben? hát csak nem az IE? :)) nem minden esetben működik rendesen.

A formázások szempontjából két elemtípus különböztethető meg: a blokkszintű elem és a sorközi elem. A blokkszintű elemek doboza elfoglalja vízszintesen a rendelkezésre álló területet, vagyis elfoglalja akár a teljes sort. Erre példa egy <p> bekezdés elem:

Ez egy bekezdésben lévő szöveg, a doboza elfoglalja a teljes sort, így blokkszintű elem

Egy példa sorközi elemre egy sima, nem bekezdésbe helyezett szöveg:

Ez egy sima szöveg, melynek doboza csak a szöveg hosszáig tart, így sorközi elem.

Dobozmodell részletező ábra

A körvonalat sokszor használjuk a weboldal egyes részeinek tagolására vagy díszítőelemként, míg a kitöltés és a margó a szövegek tagolását, jobb áttekinthetőséget, térközök beállítását segíti.

Keretek, margók, igazítás használatára egy példa: proba10.html

11. Professzionális elrendezések CSS-el

Elrendezéseket HTML illetve CSS nyelvekkel ismerkedőknek a legegyszerűbb táblázatokkal létrehozni. Miután már biztosan mozgunk a két nyelvben, próbálkozzunk meg ennek a fejezetnek az elsajátításával is. Itt bemutatjuk, hogy manapság milyen módon készítik el a weblapok elrendezését táblázatok nélkül. Ezzel elérhetővé válik, hogy nem csak a formázás, hanem az elrendezések is CSS-ből, egyetlen helyről központilag lesznek szabályozva.

HTML <div> elemek

A <div> HTML elem egy szakaszt jelöl. Ha egymás után elhelyezünk belőle többet, akkor részben hasonló tulajdonságokkal bír, mint a bekezdés (<p>) elem, mivel egy új <div> új sorba kezdődik, és blokkszintű elemről van szó, vagyis kitölti a teljes sort. Egy főbb különbség van: két egymás után megadott <div> elem közt alapértelmezetten nincs térköz, míg a bekezdés attól bekezdés, hogy közte a szöveg olvashatóságáért egy kis térköz is megtalálható.

Ezeket a <div> elemeket használjuk fel a weblapok elrendezésének kialakításához. Három egymás után megadott <div> elemre példa:

<div>Első</div>
<div>Második </div>
<div>Harmadik </div>

Elrendezésekhez szükséges tulajdonságok

width: 500px;
height: 600px;
float: left / right / none;
clear: left / right / both;
width: doboz szélességének beállítására való
height: doboz magasságának beállítása (kevésbé használjuk, a legtöbb esetben a tartalom mérete automatikusan megszabja)
float: dobozok egymás mellé helyezése (úsztatása). Azt adja meg, hogy az őt befoglaló szülőelem melyik oldalához úsztassuk a dobozt.
clear: azt adja meg, hogy melyik oldalon nem engedett az úsztatás használata. Így úsztatás vége után ha megadjuk, hogy egyiken se, akkor újra egymás alá fognak kerülni a <div>-jeink, ahogy alapértelmezetten kerülnének.
Teszt: proba7.html

Tipikus elrendezések

Kéthasábos oldal (menü és tartalom)

HTML
<div id="wrapper">
    <div id="content"> ... </div>
    <div id="mainNav"> ... </div>
    <div id="footer"> ... </div>
</div>
A HTML kódban azonosító alapú kiválasztással adjuk meg a <div>-eket. Egy külső <div> kell ahhoz, hogy abban a "float" tulajdonság segítségével bal illetve jobb oldalra el tudjunk helyezni 1-1 dobozt, majd a "clear" tulajdonsággal megtisztítjuk az úsztatásoktól a doboz további részét.
CSS
#wrapper {
  width: 640px;
}
#content {
  width: 520px;
  float: right;
}
#mainNav {
  width: 180px;
  float: left;
}
#footer {
  clear: both;
}
A CSS kódban arra figyeljünk, hogy az egyes dobozoknak megfelelő szélességet állítsunk be, hogy egymás mellett jól elférjenek. Ezen kívül a már említett "float" tulajdonsággal állítjuk be, hogy melyik oldalra kerüljön az adott doboz, a "clear" segítségével pedig visszatérünk az alapértelmezéshez, így a lábléc (footer) kitölti a körülvevő 640px széles doboz teljes szélességét.
Érdemes lehet kitöltést és margót is beállítani, ha megvagyunk az elrendezéssel, hogy a dobozok ne egymás nyakán legyenek.

Kéthasábos tartalom

Ebben az esetben az előző kódunkat csak minimálisan kell kiegészítenünk, és az ábrán látható módon a #content dobozon belül úsztatnunk a két tartalomért felelős hasábot. Próbáljuk is megírni segítség nélkül!

Megjegyzés: több dobozt úsztathatunk ugyanarra az oldalra is, a fenti példában ugyanazt az eredményt kapnánk akkor is, ha a második dobozt nem jobbra, hanem balra úsztatjuk, mivel a két doboz mérete az pontosan az őket körbevevő (szülő) doboz méretével egyezik. Természetesen ha a szülő doboz nagyobb lenne, akkor bal/jobb igazításnál térköz maradna közte, bal/bal igazításnál pedig jobb oldalt maradna üres hely (térközt viszont nem így csinálunk! - lásd dobozmodell).

Példa

Amennyiben egy <div>-ben lévő szöveg mellé jobb oldalra egy képet szeretnénk beúsztatni, nem elég csak a képre megmondani, hogy "float:right;", mert így a szöveg előbb kitölti a teljes sort, és a kép a szöveg alatti sorban lesz jobbra úsztatva. Ez kétféleképpen oldható meg:

Pozícionálás

position: relative / absolute / fixed / static;
top: 200px;
right: 25px;
bottom: 50px;
left: 25px;
A megfelelő pozícionáláshoz adjuk meg a "position" tulajdonságot (értékek részletezése alább), valamint állítsuk be, hogy milyen koordináták szerint legyen elhelyezve az adott elem. Ebben segítenek a top/right/bottom/left tulajdonságok, melyek közül természetesen nem kell mindet egyszerre használni.
A "position" tulajdonság alapértlemezése a "static".

A "position" tulajdonság lehetséges értékei, és azok jelentése:

Static: egyszerűen a HTML elemek érkezési sorrendjében legyenek azok megjelenítve (ez az alapértelmezett viselkedés)

Relative: azt adhatjuk meg vele, hogy egy elem pozíciója mennyivel legyen eltolva az EREDETI HELYÉHEZ képest, vagyis ahhoz képest, mintha a pozícionálás STATIC értéket venne fel.

Absolute: a legelső RELATIVE-ra állított szülőeleméhez képest való pozícionálást jelent. Ha nem volt ilyen szülőeleme, akkor a BODY-hoz képest (tehát a böngészőben látható oldal széleitől számítva). Ezt a tulajdonságot ritkán érdemes használni, mert kisebb képernyőn (pl. mobil) az oldal széteshet tőle.

Fixed: segítségével egy adott helyre szögezhetünk egy elemet, ami még görgetéskor sem tűnik el. Tipikusan kis pixel értékeket szoktak ilyenkor megadni, hiszen pl. egy "top:3000px" beállításnál soha nem is látszódna az elem. Ezen az oldalon a jobb felső sarokban található lap tetejére link ezzel a tulajdonsággal lett beállítva, példakód az alábbiakban látható.

#backToTop {
    position: fixed;
    top: 0px;
    right: 0px;
}
A megfelelő pozícionáláshoz adjuk meg a "position" tulajdonságot (értékek részletezése alább), valamint állítsuk be, hogy milyen koordináták szerint legyen elhelyezve az adott elem. Ebben segítenek a top/right/bottom/left tulajdonságok, melyek közül természetesen nem kell mindet egyszerre használni.
A "position" tulajdonság alapértlemezése a "static".

12. Megjelenítési rangsor

Azt szabja meg, hogy melyik sablon / stílus legyen érvényes egy adott elemre, ha többféle is meg van adva. Vagyis melyik írja felül a másikat.

Áltálánosságban elmondhatjuk, hogy a HTML forráskódon elölről a vége felé haladva megy végig a böngésző. Ennek következtében ha van két azonos vagy átfedő stílusunk, akkor minden esetben az lesz az érvényes, amelyik közelebb helyezkedik el ahhoz a ponthoz, ahol alkalmazzuk a stílust. Tehát ha a HEAD-ben először importálunk egy külső stíluslapot, és az utána lévő sortól kezdve még írunk pár plusz szabályt, melyek közt van átfedő, akkor a plusz szabály lesz az érvényes, hiszen az felülírja a korábban a külső stíluslapon megadottat. A közvetlenül megadott CSS stílusok pedig felülírják a HEAD-ben megadott akár külső, akár belső stíluslapokat.

A szabálytól bizonyos esetekben szükséges lehet, hogy eltérjünk, ebben segíthet az "!important" módosító.

!important (súlyozás)

H1 {color: black !important;
background: white !important;}
P {font-size: 12pt !important; font-style: italic;}
Példa: proba9.html

A rangsor felállítása

  1. A kérdéses elem/tulajdonság párosra alkalmazott összes deklaráció előkeresése. A deklaráció akkor 'alkalmazott', ha a kérdéses elem szelektorként szerepel. Ha nincs az elemhez alkalmazott deklaráció, az öröklés szabályai érvényesülnek. Ha nincs örökölt érték (pl.: a HTML elem esetében), a kezdeti értékek lesznek irányadóak.
  2. A deklarációk explicit súlya szerinti rendezés: az !important jelölésű deklarációk erősebbek, mint a jelöletlen (normál) deklarációk.
  3. Eredet szerinti rendezés: A szerző stíluslapjában meghatározott szabályok mint az olvasó által meghatározottak; mindkettő erősebb a böngésző alapértelmezett beállításainál. Az importált stíluslapok eredete megegyezik annak a stíluslapnak az eredetével, ahonnan importálták.
  4. Szelektor egyedisége szerinti rendezés: Az egyedileg meghatározott szelektororhoz tartozó szabály erősebb, mint az általános meghatározásban leírtak. Az egyediség megállapításához meg kell állapítani a szelektorban található ID attribútumokat (a), a CLASS attribútumokat (b), és a tag-nevek számát (c). A három szám 'összeláncolásával' (concatenating) állapítható meg az adott szelektor egyedisége. A látszólagos elemeket és látszólagos osztályokat a számítás során normál elemekként, osztályokként kell figyelembe venni.
  5. Rendezés a meghatározás sorrendje szerint: Ha két szabály ugyanakkora súllyal bír, a később meghatározott győz. Az importált stíluslapban leírt szabályok a saját lapban írtak után lesznek csak figyelembe véve.

13. Példák

Kódpélda

.td_nagy_kozepen {
    text-align: center;
    background-color: #9FC1C4;
    font-size: 18px;
    font-family: "Times New Roman";
}
Táblázat stílushoz például ilyeneket írhatsz, de ide beírhatod a betűre vonatkozó dolgokat is (így pl. egy kék hátterű táblázatot kapsz, benne 20px-es fekete, aláhúzott betűvel)

HTML vs. HTML+CSS

Összehasonlítás HTML vagy HTML + CSS: proba11.html

Hogy néz ki egy oldal még css nélkül / már css-el:
proba12.html / proba13.html
Stíluslap nélkül | Stíluslappal

Ennek az oldalnak a stíluslapja: index.css

Feladatok

Feladat 1 | Megoldás
Feladat 2 | Megoldás
Feladat 3 | Megoldás
Feladat 4 | Megoldás
Feladat 5 | Megoldás
Feladat 6 | Megoldás

2005-ben 10-es gimnazistaként az osztályomnak tartottam CSS előadásokat.
A végén pedig egy általam összeállított dolgozatot írtak meg, melynek elméleti része itt található.
Érdekesség, hogy mindkét csoportot ugyanannyian írták és pontosan ugyanannyi lett az átlageredmény,
vagyis elvileg egyik sor sem nehezebb a másiknál :)
CSS dolgozat elméleti rész

14. Források, linkek