Mi a CSS?

Mi a CSS, és miért nem elég a HTML?

A HTML olyan, mint egy LEGO ház váza – megmondod, hogy hová kerül az ajtó, hol legyen az ablak, meg hogy hol van a konyha. De a CSS? Az a festék, a bútor, a menő LED világítás, meg az IKEA-s párna a kanapén.

A CSS (Cascading Style Sheets – magyarul: lépcsőzetes stíluslapok) arra való, hogy a weboldalad kinézetét meghatározd: színek, betűtípusok, elrendezések, animációk – minden, ami látvány.

🤔 De tényleg kell ez nekem?

Igen. Ha azt akarod, hogy a látogatók ne meneküljenek el 2 másodperc alatt, hanem azt mondják: „Wow, ez jól néz ki!”, akkor CSS nélkül esélytelen vagy. A HTML önmagában… nos, csúnyácska.

Oké, de hogyan működik?

A CSS „szabályokat” ír, amik megmondják: ezt az elemet így kell megjeleníteni. Pl.:

h1 {
color: darkblue;
font-size: 36px;
}

Ez azt mondja: „Az összes h1 címsor legyen sötétkék és 36 pixeles.”

📦 Három módja van, hogy CSS-t adj a HTML-hez:

1. Inline: közvetlenül az elembe írod (nem ajánlott, rendetlenséget okoz)
2. <style> tag a HTML fejében
3. külön .css fájba írod és linkeled (profi szint)

Példa a belső CSS-re

<head>
<style>
body {
background-color: #f5f5f5;
font-family: Arial, sans-serif;
}
</style>
</head>

Tipp

A CSS olyan, mint smink. A jó smink kiemel, egyedivé tesz, és észrevétlenül teszi szebbé a dolgokat. De ha túlzásba viszed, bohócot csinál az oldaladból 😅

Feladat a leckéhez

Hozz létre egy új HTML oldalt style.html néven.
Írj bele egy címsort (<h1>), egy bekezdést (<p>) és egy listát (<ul><li>).
A <head> részben használj <style> taget, és változtasd meg a betűszínt, háttérszínt, és a címsor méretét.

Próbálkozz! Tegyél bele saját színeket, próbáld ki a font-family-t.

Elakadtál?

Ha szeretnél látni egy lehetséges megoldást, nyísd le a lenti ablakot

Egy lehetséges megoldás

<!DOCTYPE html>
<html lang=”hu”>
<head>
<meta charset=”UTF-8″>
<title>CSS példa</title>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}

h1 {
color: darkblue;
font-size: 36px;
}

p {
color: #333;
}

ul {
color: #555;
}
</style>
</head>
<body>
<h1>Ez egy címsor</h1>
<p>Ez egy bekezdés, ahol gyakorlom a CSS-t.</p>
<ul>
<li>Első elem</li>
<li>Második elem</li>
<li>Harmadik elem</li>
</ul>
</body>
</html>

Készen állsz a következő leckére?

Ha igen, fedezd fel ezeket is:



CSS szintaktika

Megmutatjuk, hogyan épül fel egy CSS szabály, és mit jelent a szelektor, tulajdonság, érték



CSS szelektorok

Megtanulod, hogyan célozhatsz meg HTML elemeket a stílusokhoz: címkék, osztályok, azonosítók