HTML stílusok

HTML stílusok (angolul „HTML styles”) azt jelentik, hogy hogyan jelenítsük meg az HTML elemeket a böngészőben. Lehetővé teszik számunkra, hogy módosítsuk az HTML elemek megjelenését, például a szöveg méretét, színét, háttérszínét, betűtípusát, elrendezését és még sok más dolgot.

A stílusokat különféle módokon lehet megadni az HTML dokumentumban. Az egyik mód az, hogy az elemeken belül használunk stílus attribútumokat, például az style attribútumot. A másik mód az, hogy egy különálló stíluslapot használunk, amelyet az <style> elemmel adhatunk meg az HTML dokumentumban, vagy külső stíluslapot használunk, amelyet egy <link> elemmel hivatkozunk meg az HTML dokumentumban.

Példa egy stílus használatára az style attribútummal:

<p style="color: red; font-size: 20px;">Ez egy piros színű, 20px méretű szöveg.</p>

Példa egy különálló stíluslap használatára:

<style>
  p {
    color: red;
    font-size: 20px;
  }
</style>

<p>Ez egy piros színű, 20px méretű szöveg.</p>

Példa egy külső stíluslap használatára:

<link rel="stylesheet" type="text/css" href="styles.css">

A stíluslapokban a stílusokat CSS szintaktikával írjuk le. A CSS (angolul „Cascading Style Sheets”) egy szabványos nyelv, amely lehetővé teszi az HTML elemek megjelenésének módosítását.

A CSS lehetővé teszi az HTML elemek megjelenésének módosítását azáltal, hogy különféle stílusokat rendelünk hozzájuk. A stílusokat a CSS szabályokban írjuk le, amelyeket az elemek kiválasztásával (angolul „selectors”) és a stílus tulajdonságokkal (angolul „properties”) adunk meg.

Példa a CSS szabályokra:

p {
  color: red;
  font-size: 20px;
}

.bold {
  font-weight: bold;
}

#intro {
  background-color: lightblue;
}

A fenti példában a p kiválasztóval kiválasztjuk az összes <p> elemet, és megadunk nekik piros színt és 20px méretű betűtípust. A .bold kiválasztóval kiválasztjuk az összes elemet, amelynek van bold osztálya, és megadunk nekik félkövér betűtípust. A #intro kiválasztóval pedig kiválasztjuk azt az elemet, amelynek van intro azonosítója, és megadunk neki világoskék háttérszínt.

A CSS szabályokat az HTML dokumentumban különálló stíluslapban, az <style> elem használatával, vagy külső stíluslapban, az <link> elem használatával adhatjuk meg. A külső stíluslapokat egy külön fájlban írjuk le, és a fájl neve általában .css kiterjesztésű.

A CSS lehetővé teszi számunkra, hogy módosítsuk az HTML elemek megjelenését az oldal több részén is, így nem kell kézzel módosítanunk minden egyes elemet. Emellett a CSS lehetővé teszi az oldal kinézetének egységesítését is, így az oldal összes eleme ugyanúgy fog kinézni.