Mi az a CSS? Mi a CSS fogalma?

Definíció szerint a CSS (Cascading Style Sheets) a számítástechnikában egy stílusleíró nyelv, mely a HTML típusú strukturált dokumentumok megjelenését írja le. Általánosabban fogalmazva a CSS segítségével formázhatjuk meg a weboldalunk megjelenését. Például ezzel állíthatjuk be a szöveg színét, a képek elhelyezkedését, vagy azt, hogy mekkora legyen egy betű.

Milyen fájl kiterjesztést kap egy CSS fájl?

Egy CSS fájl minden esetben .css fájlkiterjesztés kap.

CSS alapok (A CSS alapjainak összefoglalója)

Ebben a cikkben mindent megtalálsz, ami a CSS alapjaihoz köthető. Megtudhatod azt, hogy mi a CSS fogalma, hogy hogyan néz ki a szintaktikája, hogy hogyan tudod csatolni a HTML dokumentumhoz, hogy melyek a legalapvetőbb, leggyakoribb CSS utasítások, parancsok és hogy melyik CSS utasítást hogyan kell használni. Szóval ha érdekelnek a CSS alapok és szeretnél képbe kerülni ezzel kapcsolatban, akkor tarts velünk.

Tartalomjegyzék

A CSS fogalma

Kezdjük rögtön a legelején: mi az a CSS? És mi a fogalma? A WikiPedia szerint:

,,A CSS (Cascading Style Sheets, magyarul: lépcsőzetes stíluslapok) a számítástechnikában egy stílusleíró nyelv, mely a HTML vagy XHTML típusú strukturált dokumentumok megjelenését írja le.”

Ez elsőre egy kicsit bonyolultnak tűnhet, ezért közérthetőbben én így fogalmaznám meg:

A CSS segítségével formázhatjuk meg a weboldalunk megjelenését.

Például ezzel állíthatjuk be a szöveg színét, a képek elhelyezkedését, vagy azt, hogy mekkora legyen egy betű.

Mire használhatjuk a CSS-t?

Már fentebb említettem egy két példát, de azért még felsorolok párat, hogy még egyértelműbb legyen, hogy pontosan mire is használhatjuk a CSS-t.

háttérkép beállítása
háttérszín beállítása
szövegméret beállítása
szövegszín beállítása
betűtípus meghatározása
képek elhelyezkedésének meghatározása
szövegigazítás változtatása
tartalmak keretezése
margó beállítása
stb

A CSS szintaktikája

Először is el kell döntenünk, hogy hogyan szeretnénk a CSS-t használni (de erről majd alább olvashattok, mert egy kicsit masszív téma) és attól függ, hogy hogyan néz ki a szintaxisa. Elöljáróban annyit megosztok, hogy kétfajta szintaxis létezik.

Az egyik, amikor a HTML dokumentumon belül az elem kezdő címkéjében adjuk meg a CSS kódot.

Inline CSS szintaxis

<ELEM style="STÍLUS.BEÁLLÍTÁSOK">TARTALOM</ELEM>
Code language: HTML, XML (xml)

Inline CSS példa

HTML kód

<p style="color:red;">Ez a szöveg piros.</p>

Code language: HTML, XML (xml)

Eredmény

Ez a szöveg piros.

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

A másik megoldás, amikor a CSS kódot nem inline helyezzük el, hanem vagy a HEAD-be vagy egy külső CSS fájlba. Ilyenkor így néz ki a szintaktika:

ELEM {
    STÍLUSBEÁLLÍTÁSOK;
}

Példa

HTML kód

<!DOCTYPE html>
<html>
    <head>
        <STYLE>
           p {
               color:red;
             }
        </STYLE>
    </head>
    <body>
       <p>Ez a szöveg piros.</p>
    </body>
</html>
Code language: HTML, XML (xml)

Eredmény

Ez a szöveg piros.

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

A CSS szintaktikájáról itt olvashatsz bővebben.

Hogy néz ki egy CSS kód?

p {
  color: red;
}

VAGY

<p style="color:red;">TARTALOM</p>
Code language: HTML, XML (xml)

Bár fent már láthattatok rá példát, de egy CSS kód így néz ki, a p azt jelenti, hogy azt az elemet szeretnénk formázni. A color arra utal, hogy a színét szeretnénk módosítani, míg a red azt jelenti, hogy pirosra szeretnénk állítani.

CSS csatolásának a módszerei

Erről a témáról csak nagyon röviden fogok írni, mert már egy egész cikket szántam a témának, melyet itt olvashattok.

Szóval a CSS csatolása 4 eltérő módszerrel történhet:

Összekapcsolhatjuk a HTML dokumentumot egy külső CSS fájllal
A HTML dokumentum <HEAD> részében is megadhatjuk a CSS-t
Beimportálhatunk külső stíluslapot
Beágyazhatjuk az adott elem kezdőcímkéjébe (tag-jébe) a stílus meghatározásokat

Beágyazott, inline CSS

Ez az a módszer, amikor a HTML dokumentumban az elem kezdőcímkéjébe ágyazzuk a CSS utasításokat.

Szintaxis

<ELEM style="STÍLUS DEFINÍCIÓK;">TARTALOM</ELEM>
Code language: HTML, XML (xml)

CSS a <HEAD>-ben

A CSS kód ugyanúgy a HTML dokumentumban marad, de itt már kihelyezzük a HEAD-be.

Szintaxis

<HEAD>
     <style type="text/css">
           STÍLUSDEFINÍCIÓ;
     </style>
</HEAD>
Code language: HTML, XML (xml)

Külső CSS fájl

Ebben az esetben a CSS kód kikerül egy külső .css kiterjesztésű fájlba.

Szintaxis

Ezt a kódot kell a HTML dokumentum fejrészébe illeszteni.

<HEAD>
   <link rel=stylesheet type="text/css" href="CSS.ELÉRÉSI.ÚTVONALA">
</HEAD>
Code language: HTML, XML (xml)

És így néz ki a stílusbeállítás a különálló CSS fájlban.

ELEM {
  TULAJDONSÁG: ÉRTÉK;
}

CSS importálása

Ennél a módszernél a CSS ugyanúgy egy külső fájlba kerül, csak másképp hívjuk meg azt.

Szintaktika

@import url(ELÉRÉSISI.ÚTVONALL);
Code language: CSS (css)

Ezekről a csatolási módszerekről itt olvashatsz sokkal részletesebben.

Legfontosabb CSS parancsok, utasítások, kódok

Most, hogy már ennyi mindent tudunk áttérhetünk a CSS alapok egyik legfontosabb részére, a legalapvetőbb CSS utasításokra. Azért fontosak ezek az utasítások, mert ezek jönnek a leggyakrabban szembe az emberrel, ha a CSS-el foglalkozik.

Betűméret, betűtípus

CSS segítségével lehetőségünk van ezeket a paramétereket is módosítani.

Példa

HTML kód

<p style="font-family:Fantasy;">Betűtípus</p>
<p style="font-size:50px;">Betűméret</p>
Code language: HTML, XML (xml)

Eredmény

Betűtípus

Betűméret

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Szövegigazítás, szövegszín, háttérszín

Módosíthatjuk a szöveg színét, háttérszínét és azt is, hogy merre legyen rendezve a szöveg.

Példa

HTML kód

<p style="text-align:right;">Jobbra igazítás.</p>
<p style="color:red;">Jobbra igazítás.</p>
<p style="background-color:yellow;">Sárga háttér</p>
Code language: HTML, XML (xml)

Eredmény

Jobbra igazítás.

Sárga háttér

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Természetesen ennél sokkal több alapvető CSS utasítás van, amelyekről itt olvashatsz.

CSS kommentek, megjegyzések

CSS kommentekre, megjegyzésekre azért van szükség, hogy megtudjuk jelölni a kódot magunk vagy mások számára a későbbi könnyebb érthetőség miatt.

Szintaktika

/* Ide jön a megjegyzés. */
Code language: JSON / JSON with Comments (json)

Példa

CSS kód

/* Ezzel a kóddal az összes p elemet pirossá színezem. */

p {
   color: red; /* De akár ide is kommentelhetek. */
}
Code language: CSS (css)

Eredmény

Piros szöveg

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Ahogy láthatjuk a CSS kódunkhoz fűzött kommentár, megjegyzés nem jelenik meg a böngészőben, az csak számunkra elérhető.

Még több információt ide kattintva érsz el a CSS kommentekről, megjegyzésekről.

Összegzés

Nagyon röviden összefoglalva ezeket az információkat mondhatjuk a CSS alapjainak. Ha valaki ezekkel már tisztában van az egy kiváló kiindulási alap. Ha valakinek ez nem elég, akkor ide kattintva még rengeteg CSS tananyagot érhet el teljesen ingyen.