Stílusos weboldal készítése CSS kódok használatával

A CSS kódok segítségével tudjuk stilizálni és formázni weboldalunk tartalmi elemeit (betűszín, képkeret, szövegméret, háttérkép, betűtípus).
CSS borítókép

Stílusos weboldal készítése CSS kódok használatával

Egy sikeres honlap esetében legalább annyira fontos a stílusos megjelenés, mint a megfelelő tartalom. A weboldaladat HTML elemekkel tudod feltölteni képekkel, szöveggel, linkekkel, azonban ezek kinézetét a CSS kódok segítségével lehet formázni. Olyan dolgokra gondolok itt, mint a szöveg színe, mérete, betűtípusa, a fényképek szélessége, kerete, a háttér színe és így tovább. Görgess lejjebb, és tekintsd meg, mik az alapvető CSS kódok!

1. Mi az a CSS és hogyan kapcsolódik a HTML-hez?

A CSS az angol Cascading Style Sheets kifejezés rövidítése, amely magyarul egymásba ágyazott stíluslapokat jelöl. A HTML és a JavaScript mellett ez a másik alapvető programozási nyelv a weboldalak készítése során, amelyet 1996-ban adtak ki nyilvánosan először.

Fő funkciója a HTML dokumentumokban található webes tartalmak stilizálása, vagyis esztétikus megjelenést kölcsönöz a weboldal különböző részeinek.

A HTML kódokkal tudunk elhelyezni tartalmi elemeket a weboldalunkon, például egy szöveget vagy egy képet. A CSS kódokkal pedig ezeket az elemeket tudjuk formázni megjelenés szempontjából: például a szöveg és a háttér színét megváltoztatni, vagy a képeknek keretet készíteni.

Röviden összefoglalva:

  • HTML = weboldal tartalmának leírása;
  • CSS = a tartalmi elemek kinézetének formázása.

Hiszen minden weboldal-tulajdonos arról álmodik, hogy saját webhelye minél esztétikusabb és egyedibb legyen. Ebben nyújtanak segítséget az egymásba ágyazott stíluslapok.

A CSS kódok használatával nincs szükség minden egyes HTML elem egyenkénti formázására, mert ezt megoldhatjuk egyetlen kóddal is akár.

Ez itt például egy egyszerű szöveges bekezdés HTML kódja:

<p>Kiszervezett Marketing</p>

Tegyük fel, hogy nemcsak simán fekete betűkkel akarjuk ezt megjeleníteni, hanem egy kicsit fel is akarjuk turbózni, mondjuk narancssárga színnel és nagy betűmérettel.

Ekkor jön képbe a CSS kódok használata:

p {color: orange; font-size: 35px;}

Ezt a következő módszerrel kell beilleszteni a HTML dokumentumba:

<head>
<style>
      p {color: orange; font-size: 35px;}
</style>
</head>
<body>
      <p>Kiszervezett Marketing</p>
</body>

Eredmény:

Kiszervezett Marketing

Lassan kezdheted érteni, hogy a HTML és a CSS kódok hogyan egészítik ki egymást annak érdekében, hogy egy felhasználóbarát, vizuálisan és funkcionálisan is jól működő weboldalt tudjunk létrehozni.

2. Mért hasznosak a CSS kódok?

Rengeteg különböző formázást, stílushoz igazítást lehet végrehajtani CSS kódok segítségével. Néhány példa:

  • Keretek létrehozása fényképekhez;
  • Szöveg méretének és színének meghatározása;
  • Háttérszín beállítása;
  • Betűtípusok közötti váltogatás;
  • Szövegdoboz kialakítása;
  • Tartalom elhelyezkedésének igazítása;
  • Sormagasság és térköz személyre szabása;
  • Margó és háttérkép beállítása.

3. Hogyan épülnek fel a CSS kódok?

A CSS kódok mindig egy adott HTML elemre vonatkoznak, például egy bekezdésre, címsorra, képre, stb. Ezt az elemet fogják formázni, módosítani a kinézetét.

Először is meg kell adnunk az elemet, amit stilizálni szeretnénk, majd {…} formátumban a hozzá tartozó tulajdonságot/tulajdonságokat (pl. betűszín és betűméret beállítása), és a vonatkozó értékeket (pl. narancssárga betűszín és 50px betűméret).

CSS kódok felépítése

A fenti példában egy HTML bekezdést formáztunk narancssárga színűre és 50-es betűmérettel. Természetesen nem muszáj mindig két értéket megadni, elég egy is.

4. Hogyan adjunk hozzá CSS kódokat a weboldalunkhoz?

Tekintsünk át néhány módszert arra vonatkozóan, hogy miképpen tudjuk alkalmazni a CSS-t honlapunk tartalmainak a formázásához.

4.1. Beágyazás HTML elemek kezdőcímkéjében

Az egyik legegyszerűbb, mégis legtöbb munkát igénylő módszer. Ebben az esetben minden egyes formázni kívánt HTML elem kezdő tag részébe kell beillesztenünk a stílusértékeket.

Tehát egyenként a kezdőcímkékbe beírjuk a CSS tulajdonságokat és a hozzájuk tartozó értékeket. Ezt nevezzük inline CSS-nek. Például:

<h2 style="color: green;">Ez a címsor zöld színű lesz</h2>

A fenti példában egy H2-es címsort formáztunk zöld színűre úgy, hogy a <h2> kezdőcímkébe ágyaztuk bele a style=”stílusértékek;” formátummal a CSS kódokat.

Ha ezt meg szeretnénk tenni más címsorokkal is, akkor azt minden egyes HTML elem esetén külön-külön végre kell hajtanunk. Ezért elég időigényes ez a módszer.

4.2. Stílusbeállítások megadása a HTML fájl <head> részében

Ha ezt a lehetőséget választod, akkor némileg könnyebb dolgod lesz: a stílusbeállításokat külön kódsorral adhatod meg a HTML dokumentum <head> részében.

Ezzel a megoldással minden egyes olyan HTML elemre vonatkozik majd az adott formázás, amelyre az adott stílusértékeket beállítottuk (pl. bekezdések vagy képek), ha ezek a HTML fájl <body> részében megtalálhatók.

<!DOCTYPE html>
<head>
<style>
p {color:blue;}
</style>
</head>
<body>
<p>Minden egyes bekezdés kék színű lesz.</p>
<p>Ugye, hogy kék lett ez is?</p>
</body>
</html>

A <style>…</style> címkék közé kell beírnunk, hogy az egész HTML dokumentumban szereplő összes adott típusú elemhez milyen stílusértékeket szeretnénk csatolni.

A kód eredménye az alábbi lesz:

Minden egyes bekezdés kék színű lesz.

Ugye, hogy kék lett ez is?

A fenti példa használatával nem kell egyenként minden bekezdéshez odaírnunk, hogy piros színű és 20-as betűméretű legyen, elég csak a HTML fejrészében elhelyeznünk a CSS kódot.

4.3. Külső CSS fájl összekapcsolása a HTML dokumentummal

Ebben az esetben a HTML dokumentum és a CSS fájl elkülönül egymástól, nincs semmi kapcsolat a két kód között.

Az összekötést úgy tudjuk megoldani, hogy egy kódsorral megjelöljük a CSS fájlt a HTML <head> részében.

<link rel=stylesheet type="text/css" href="CSS.fájl.elérési.útvonala">

A href= rész után kell beillesztenünk a CSS kódokat tartalmazó fájl elérési útvonalát.

4.4. CSS fájl importálása külső linkről

Hasonlóan az előző módszerhez, most is a HTML dokumentum <head> részében kell elhelyeznünk egy kódot, amely egy URL címről fogja alkalmazni a CSS kódokat.

@import url(CSS.fájl.linkje);

Ezek voltak a CSS kódok használatának lehetőségei. Most pedig nézzük a legfontosabb és leggyakrabban alkalmazott CSS parancsokat.

5. A leggyakoribb CSS kódok

A következőkben alapvető CSS parancsokat fogunk kipróbálni. A kódokat a 4.1. vázlatpontban bemutatott forma szerint fogom használni, vagyis HTML elemek kezdőcímkéjébe ágyazva.

5.1. Háttérszín és háttérkép meghatározása CSS használatával

A háttér színét az alábbi kóddal tudod beállítani:

<div style="background-color:red;"<p>Ide piros háttér kerül.</p></div>

Háttérképet beállítani pedig a képre mutató linkkel lehetséges:

<div style="background-image:url('https://media.istockphoto.com/photos/blue-sky-with-white-clouds-nature-background-picture-id1125295327?k=20&m=1125295327&s=612x612&w=0&h=KAs_-jMfnsUQ1W4P1Uus8wX1WV53FFb12-iCFV6EcBY=');"<p>Ide <br> felhők <br> fognak <br> kerülni <br> háttérként.</p></div>

A két CSS kód eredménye itt látható:

Ide piros háttér kerül.
Ide
felhők
fognak
kerülni
háttérként.

5.2. Betűtípus és betűméret beállítása CSS kódokkal

Korábban már volt szó a betűk színének a megváltoztatásáról, most nézzünk meg néhány egyéb formázási lehetőséget.

Betűtípus meghatározására szolgáló CSS kód:

<p style="font-family:Lucida Handwriting;">Ez itt kézírásos betűtípus lesz.</p>

Betűméret beállítása:

<p style="font-size:45px;">Ez egy elég nagy betűméret lesz.</p>

A fenti két kódnak ez lesz a végeredménye:

Ez itt kézírásos betűtípus lesz.

Ez egy elég nagy betűméret lesz.

5.3. Szöveg színének, árnyékának és elhelyezkedésének formázása

A szövegszín módosításával már találkozhattunk:

<p style="color:green;">Zöld színű szöveg.</p>

A szövegárnyék egy érdekes hatást kelt:

<p style="text-shadow:2px 2px orange;">Narancssárga árnyékkal rendelkező szöveg.</p>

A szövegigazítás egy újabb CSS paranccsal érhető el:

<p style="text-align:right;">Jobbra igazított szöveg.</p>

Végeredményként ezt a három formázást kaptuk:

Zöld színű szöveg.

Narancssárga árnyékkal rendelkező szöveg.

Jobbra igazított szöveg.

5.4. Szöveg- és képkeretek szélessége, színe

A CSS kódokkal létrehozhatunk szövegdobozokat, illetve képkereteket is. Ezeket tudjuk formázni, stilizálni.

A keret szélességét és színét egy kódon belül beállíthatjuk:

<p style="border:3px solid red;">Ezt a bekezdést 3 pixel vastagságú <br> piros keret veszi körbe.</p>

A szövegkeret lentebb látható:

Ezt a bekezdést 3 pixel vastagságú
piros keret veszi körbe.

5.5. Képméretek szabályozása CSS segítségével

Megszabhatjuk, hogy milyen legyen a weboldalunkon megjelenő képek szélessége és magassága.

<img src="https://kiszervezettmarketing.hu/wp-content/uploads/2022/07/Online_marketing_boritokep-700x394.jpg" height="500" width="900">

Most pedig megadjuk ugyanezt a fényképet eltérő méretekkel:

<img src="https://kiszervezettmarketing.hu/wp-content/uploads/2022/07/Online_marketing_boritokep-700x394.jpg" height="300" width="500">

Szemmel jól látható, mennyire különbözik a két kép szélessége és magassága. Így mindig a weboldalunkhoz tudjuk igazítani a fényképek méretét.

Kép méretezése CSS kódokkal

5.6. Margók beállítása CSS kódokkal

Hozzáadhatunk margókat egyszerre mind a négy oldalhoz, vagy külön-külön is. Ezek határozzák meg, hogy a lap szélétől hány százalékban lesz behúzva a szöveg vagy egyéb tartalom.

<p style="margin:15%;">A margó 15%-os mind a négy oldalon.</p>
<p style="margin-top:15%;">Csak a felső oldalon van 15%-os margó.</p>

Ezt nehéz lenne szemléltetni, mivel csak a szöveg igazodna más helyre, körülötte pedig egy nagy üres tér helyezkedik el a behúzás miatt.

6. Összefoglaló

A CSS kódok minden weboldal fontos alkotóelemei, mert formailag módosítják a HTML kódok kinézetét.

Beállíthatjuk a szövegek, képek és egyéb tartalmi elemek elhelyezkedését, szegélyét, színét, méretét, árnyékát, margóját, és így tovább.

Az egymásba ágyazott stíluslapok tehát jó megjelenést kölcsönöznek a honlapunk tartalmainak, vizuálisan keltik fel a látogatók érdeklődését, növelik a felhasználói élményt.

Kérlek juttasd el a cikket a barátaidnak is, amennyiben hasznosnak találtad. Köszönöm! 🙂

Hibát találtál? Írj nekünk az alábbi e-mail címre: [email protected]af

Dávid Ádám

Dávid Ádám

Szia, Dávid Ádám vagyok a Kiszervezett Marketing Ügynökség alapítója. Több mint 120+ weboldalt építettünk már sikeresen az ügyfeleink számára. Az így szerzett tapasztalataimat blog formájában szeretném megosztani veled. Sok sikert számodra a megvalósításban!

Hozzászólások