CSS fájl létrehozása
Ha elhatároztuk, hogy a CSS-t külső fájlba szeretnénk kihelyezni, akkor érdemes tisztában lennünk pár dologgal. Például azzal, hogy milyen kiterjesztésű egy CSS fájl, vagy azzal, hogy hogyan hozhatsz létre egy CSS fájlt.
Milyen kiterjesztésű a CSS fájl?
A CSS fájlok kiterjesztése nem meglepő módon: .css
Azaz ez a kiterjesztés szerepel a fájl neve után. Így néz ki egy CSS fájl neve: stilus.css
Hogyan hozhatok létre egy CSS fájlt?
1. lépés: Szerezz be egy szerkesztő programot.
A CSS szerkesztésre nagyon sok alkalmas program van, amelyik képes HTML szerkesztésre, az általában képes CSS szerkesztésre is. Igazából egy sima jegyzettömb is megteszi, de ha azt akarjuk, hogy a program vizuálisan kiemelve jelenítse meg a kódot, ami segít abban, hogy könnyebben átlátható maradjon, akkor szükségünk lesz egy komolyabb programra. Szerkesztő programokról itt olvashatsz. A cikk címében az áll, hogy HTML szerkesztő program, de ahogy fentebb említettem mindegyik jó lesz CSS-hez is.
2. lépés: Program megnyitása.
Ugye mondani se kell, hogy érdemes megnyitni a programot? 😀
3. lépés: Írj CSS kódokat.
Arról már sokszor volt szó, hogy hogyan írhatunk CSS kódokat, egy egész tananyagot találhatsz róla a weboldalon. Itt.
4. lépés: Mentés.
Most jön a lényeges rész, a megírt CSS kódot el kell mentenünk. Minden programba található „Mentés” (angolul „Save„) gomb. Nyomjuk meg ezt, majd írjuk be a fájl nevét, majd válasszuk ki azt, hogy „Cascading Style Sheets (.css)„. Ha nem látunk ilyet, akkor írjuk a fájl végére, hogy .css. Ha a szerkesztő magától a végére rakott valamilyen kiterjesztést, akkor azt törüljük.
Helytelen mentés: stilus.txt.css
Helyes mentés: stilus.css
CSS csatolása a HTML fájlhoz
Ha elkészítettük a CSS fájlt, akkor semmiképp se feledkezzünk meg arról, hogy ezt a CSS fájlt csatolni kell a HTML dokumentumunkhoz. A HTML fájl fejrészébe (HEAD) kell bebiggyesztenünk az alábbi kódot:
<link rel="stylesheet" href="ELÉRÉSI.ÚTVONAL">
Code language: HTML, XML (xml)Ha a HTML dokumentum és a CSS ugyanabba a mappába van, akkor elég csak a fájl nevére hivatkoznunk. Nézzünk egy példát:
<HEAD>
<link rel="stylesheet" href="stilus.css">
</HEAD>
Code language: HTML, XML (xml)
