CSS tulajdonságok és értékek

Képzeld el, hogy egy karakterlapot töltesz ki egy videojátékhoz. A karakterednek van haja (tulajdonság), és beállítod, hogy kék legyen (érték). A CSS-ben ugyanez a helyzet: megmondod, milyen tulajdonságot akarsz módosítani, és milyen értékre állítod be.

h1 {
color: blue;
}

Itt a color a tulajdonság (megmondja, mit állítunk), a blue pedig az érték (megmondja, mire állítjuk).

De nézzük bővebben!

A CSS szabály így épül fel:

szelektor {
tulajdonság: érték;
}

Minden stílusblokk zárójelek {} között van.
A tulajdonságot kettőspont : választja el az értéktől, és
minden utasítás pontosvesszővel ; zárul.
Ha nem teszel oda pontosvesszőt, lehet, hogy a böngésző nem fogja tudni értelmezni.

p {
font-size: 18px;
color: blue;
text-align: justify;
}

Ez azt mondja:
👉 minden <p> elem legyen 18px betűméretű, kék színű, és legyen sorkizárt.

Miért fontos?

A böngésző egy kicsit olyan, mint egy szigorú tanár – ha nem pontosan írsz, nem fogja értelmezni.
A text-align center nem jó. A helyes forma: text-align: center;
A kettőspont kötelező, a pontosvessző ajánlott (ha több szabályt írsz, kötelező).

Feladat a leckéhez

🛠️ Írj egy HTML oldalt, amiben van:

egy címsor (h1)
egy bekezdés (p)

egy gomb (button)

<style> tagek között formázd:
A címsor legyen piros, 32px betűméretű
A bekezdés legyen sötétszürke és sorkizárt

A gomb legyen világoskék, fehér szöveggel

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>Tulajdonság és érték</title>
<style>
h1 {
color: red;
font-size: 32px;
}
p {
color: #292929;
text-align: justify;
}
button {
background-color: lightblue;
color: white;
}
</style>
</head>
<body>
<h1>Ez egy főcím</h1>
<p>Ez egy bekezdés, amely sorkizárt és sötétszürke betűszínű.</p>
<button>Kattints rám!</button>
</body>
</html>

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

Lépj tovább a CSS színekre

CSS tulajdonságok és értékek

mi a tulajdonság és érték, és miért számít?