Rövid definíció
A CSS (Cascading Style Sheets, magyarul: „lépcsőzetes stíluslapok”) egy stílusleíró nyelv, amely a HTML vagy XML dokumentumok vizuális megjelenését határozza meg. Segítségével meghatározható például a színek, betűtípusok, elrendezések és egyéb vizuális tulajdonságok megjelenítése weboldalakon.
Mi az a CSS? – Teljes magyarázat érthetően
Ha weboldalfejlesztésről van szó, akkor a CSS a HTML mellett az egyik legfontosabb nyelv. Nélküle a weboldalak pusztán szövegek és képek sorozatai lennének, mindenféle vizuális stílus vagy egységes megjelenés nélkül.
Mit jelent a CSS?
A CSS a Cascading Style Sheets rövidítése, magyarul lépcsőzetes stíluslapok. Ez egy különálló nyelv, amely nem a tartalmat, hanem a kinézetet szabályozza. Leggyakrabban a HTML dokumentumokkal együtt használják, hogy meghatározzák például:
- a betűk színét, méretét, típusát,
- az elrendezést, margókat, térközöket,
- a háttereket, képek stílusát,
- a reszponzív (mobilbarát) kinézetet.
Hogyan néz ki egy CSS szabály?
Egy alap CSS szintaxis így néz ki:
p {
color: red;
font-size: 16px;
}
Ebben:
- "p" a kiválasztott HTML elem (a bekezdés),
- "color" a tulajdonság (szöveg színe),
- a "font-size" pedig a betűméretet jelenti.
Ez a szabály minden “<p>” elem szövegét pirosra állítja és 16px-es betűméretet ad neki.
Hogyan lehet a CSS-t a HTML-hez csatolni?
1. Inline CSS – közvetlenül a HTML elembe írva:
<p style="color: red;">Ez piros szöveg lesz.</p>
2. Belső CSS – a "head" részbe írva:
<head>
<style>
p { color: red; }
</style>
</head>
3. Külső CSS fájl – külön .css fájl használatával (ajánlott!):
<link rel="stylesheet" href="style.css">
Példa: HTML + CSS együtt
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: #2e8b57;
text-align: center;
}
p {
font-size: 18px;
color: #444;
}
</style>
</head>
<body>
<h1>Ez egy cím</h1>
<p>Ez pedig egy bekezdés, amit CSS-sel formáztunk meg.</p>
</body>
</html>