Color, text-align és font

Color

A HTML-ben a színeket a szövegek és háttérszínek megadására használjuk, például a <p style='color:red'> piros szöveget készít.
A gombok vagy linkek színét is meghatározhatjuk, hogy kiemeljük őket, például <button style='background-color:green'>.
A háttérszínnel (background-color) könnyebben olvashatóvá tehetjük a hosszabb szövegeket.
Kontrasztos színekkel kiemelhetjük a fontos elemeket, például sárga címek fekete háttéren.
A színeket a márka arculatának megfelelően is alkalmazhatjuk, így az oldal vizuálisan egységes és vonzó lesz.

A <p> elem színét CSS-sel így tudod beállítani:

color:red;

}

A color tulajdonság mindig a szöveg színét adja meg.
Lehet színnévvel (red, blue), hex kóddal (#ff0000) vagy RGB/rgba formátumban (rgb(255,0,0)).

Példa hex kóddal:

color:#1a237e; /*sötétkék szöveg*/

}

A <body> elem a HTML-ben az oldal látható tartalmát foglalja magába, és CSS-sel a teljes oldal stílusát is befolyásolhatjuk.

body{

color: black; /*az egész oldal szövege fekete lesz*/

background-color:lightblue; /*az oldal háttere világoskék lesz*/

}

A text-align CSS-t a szövegek vízszintes elhelyezésére használjuk a weboldalon.
Segítségével a szöveget balra, jobbra, középre vagy sorkizártan igazíthatjuk.
Az egész oldalra alkalmazható, ha a body elemre állítjuk be, így minden benne lévő szöveg követi az igazítást.
Külön elemeknél, például <p> esetén egyedi igazítást adhatunk meg.
A helyes használat javítja a tartalom áttekinthetőségét és a felhasználói élményt.

body{

text-align:left; /*Az egész oldal szövege a bal oldalra igazítva*/

}

#p1{

text-align:center; /*A p1 id-vel rendelkező bekezdés középre lesz igazítva, míg minden más balra*/

}

A weboldalon a betűk stílusát a CSS font tulajdonságokkal szabályozzuk.
A font-family határozza meg, milyen típusú betűtípust használunk, például Arial vagy Times New Roman.
A font-size a betű méretét állítja be, lehet px-ben, em-ben vagy %-ban.
A font-weight a betű vastagságát szabályozza, például normál vagy félkövér.
A font-style a betű stílusát adja meg, például normál, dőlt (italic) vagy kurzív.
A line-height a sorok közti távolságot állítja, ezzel javítva az olvashatóságot.
A letter-spacing a karakterek közötti távolságot szabályozza.
A text-transform a szöveg nagybetűsítését vagy kisbetűsítését vezérli, például uppercase vagy lowercase.

/*Betűtípus kiválasztása*/

font-family: Arial, sans-serif;

}

/*Betűméret beállítása*/

font-size:18px;

}

/*Betű vastagsága*/

font-weight: bold; /* normal, bold, 100-900 */

}

/*Betű stílus*/

font-style: italic; /* normal, italic, oblique */

}

/*Sorok közti távolság*/

line-height: 1.5; /*lehet szám, px, %, em */

}

/*Karakterek közti távolság*/

letter-spacing: 2px; /*negatív érték is lehet*/

}

/*Szöveg nagybetű/kisbetű*/

text-transform: uppercase; /* lowercase, capitalize, none */

}