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.

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)

Ha hasznos volt számodra, akkor kérlek oszd meg másokkal is, hogy ezzel támogass minket!