Bevezetés a CSS használatába HTML-ben
A CSS, azaz a Cascading Style Sheets, lehetővé teszi, hogy megformázzuk és vizuálisan vonzóvá tegyük HTML-ben írt weboldalainkat. A HTML szerkezetet ad, a CSS pedig megjelenést. Ez a két nyelv kéz a kézben jár minden weboldalon.
Mi az a CSS?
A CSS egy stílusleíró nyelv, amit arra használunk, hogy a HTML elemeket megformázzuk. Meghatározhatjuk vele a szövegek színét, méretét, a margókat, háttereket, pozíciót és még sok mást. Segít különválasztani a tartalmat és a dizájnt, így a weboldal könnyebben karbantartható.
Inline CSS
Az inline CSS a HTML elembe közvetlenül írt stílus, a style attribútum segítségével. Ez gyors és egyszerű, de nem ajánlott nagyobb projektekhez.
html
<p style="color: blue;">This text is blue.</p>Belső CSS
A belső CSS a HTML fájl <head> részében elhelyezett <style> tagbe kerül. Akkor hasznos, ha egy adott oldalnak van egyedi dizájnja.
html
<style>
p {
font-size: 18px;
color: green;
}
</style>Külső CSS
Ez a leggyakoribb módszer. A CSS-t külön fájlba helyezzük, amit a HTML <head> részében kapcsolunk be. Így egy helyen kezelhetjük az egész oldal stílusát.
html
<link rel="stylesheet" href="styles.css">Class és ID használata
A class attribútumot több elemre is alkalmazhatjuk. Az ID egyedi azonosító, amit csak egy elemre használjunk. A class-okat CSS-ben ponttal (.), az ID-kat kettőskereszttel (#) írjuk.
html
<p class="note">This is a note</p>
<p id="unique">This is a unique paragraph</p>css
.note {
color: orange;
}
#unique {
font-weight: bold;
}A CSS alap szintaxisa
Minden CSS szabály úgy kezdődik, hogy megadunk egy szelektort (pl. h1), utána kapcsos zárójelek között a tulajdonságokat és értékeket. Minden sor végén pontosvessző szerepel.
css
selector {
property: value;
}Összegzés
A CSS nélkül a weboldal csak nyers szöveg és struktúra lenne. A CSS adja meg azt a vizuális világot, amit a felhasználók látnak. A három alapvető módszer – inline, belső és külső – segítségével rugalmasan formázhatjuk az oldalt. Érdemes már most megtanulni, mert minden további webes tudás alapját képezi.
Nyelv kiválasztása
Téma beállítása
© 2025 ReadyTools. Minden jog fenntartva.