> For the complete documentation index, see [llms.txt](https://digikiad.gitbook.io/digitalis-kiadvanyok/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://digikiad.gitbook.io/digitalis-kiadvanyok/css/css-stilusok-felepitese.md).
# CSS stílusok felépítése
## CSS elhelyezése HTML állományokban
### Szövegközi stílusok (inline style)
A CSS stílusokat egy HTML elem **style** [tulajdonságában](/digitalis-kiadvanyok/html/html-allomany-felepitese.md#tulajdonsagok-atributes) elhelyezve csak arra az egy elemre fognak vonatkozni. A következő példában egy bekezdés, vagyis egy `p` elem szövegszínét és betűméretét állítjuk be:
```markup
Lorem ipsum dolor sit amet
```
### Beágyazott stíluslapok
A **CSS** stílusokat elhelyezhetjük egy **HTML** állomány [fejlécében](/digitalis-kiadvanyok/html/html-elemek.md#html-dokumentum-fejlece) egy **style** elemben.\
A **style** elemben **CSS** nyelvi szabályok lesznek érvényesek.
```markup
```
### Külső stíluslapok
A **CSS definícióinkat** elhelyezhetünk **CSS** állományokban (rendszerint a HTML állomány mellett elhelyezve), ezeket az állományokat [`link`](/digitalis-kiadvanyok/html/html-elemek.md#linkek) elemmel **kapcsolhatjuk** a HTML állományunkba ([link elemről bővebben](https://digikiad.gitbook.io/digitalis-kiadvanyok/~/edit/drafts/-LYRW05ddo4c8ZzXfrn6/html/html-elemek#linkek)).
```markup
```
A külső CSS állomány kiterjesztése **.css** lehet.
A `link` elemeket minden esetben a HTML állomány fejlécében, a `head` elemben kell elhelyezni:
```markup
Document
...
```
{% hint style="info" %}
A külső CSS állomány nagy előnye, hogy több HTML oldalba is be lehet kötni ugyan azt a CSS állományt, így csökken a letöltendő adatmennyiség, és a stílusokat egy központi helyen tudjuk kezelni.
{% endhint %}
### CSS importálása
Egy CSS állományba behívhatunk egy másik CSS állományt **@import** segítségével.
```css
@import url('style.css');
```
## Megjegyzések
Megjegyzés (comment) **/\* \*/** jelek használatával hozható létre CSS-ben
A /\* és a **\*/** karaktersorozatok közötti részt a böngésző figyelmen kívül hagyja.
```css
/*
Ez egy megjegyzés.
*/
```
## Stílusok felépítése
### CSS stílus (CSS rule)
A [**kijelölő**](/digitalis-kiadvanyok/css/kijelolok.md) célozza be az elemeinket a HTML struktúrának megfelelően (úgy kell elképzelni mint egy címzést, ami egy, vagy több elemre hivatkozik).\
\
A **meghatározásblokk** tartalmazza a kijelölt elemekre vonatkozó tulajdonságokat.
## Kijelölők (selector)
A **kijelölő** a kapcsos zárójel előtt helyezkedik el, és tipusától függően hivatkozik egy vagy több HTML elemre. A következő példában az összes `h1` (főcím) elem szövegszínét állítjuk be vörösre:
```css
h1 {
color: red;
}
```
A **kijelölőket** lehet csoportosítani **vesszővel** elválasztva több elemre is vonatkoztathatjuk ugyan azt a szabályt. A következő példában már nem csak a `h1` elem szöveg színét állítjuk be, a `h2` `h3` `h4` HTML elemek szövegszínét is vörösre állítjuk:
```css
h1,
h2,
h3,
h4 {
color: red;
}
```
A kijelölő szűrhet bizonyos elemkombinációkra, ekkor a szülőkön keresztül célozzuk meg az adott elemet. A következő példában a `h1` elemekben lévő `span` elemek szövegszínét kékre állítjuk:
```css
h1 span {
color: blue;
}
```
{% content-ref url="/pages/-LO8POssI1rsNwZH1HZO" %}
[Kijelölők](/digitalis-kiadvanyok/css/kijelolok.md)
{% endcontent-ref %}
## Meghatározások
A meghatározásokat a **kijelölő utáni kapcsos zárójelben** helyezzük el, egymástól **pontosvesszővel** elválasztva. Az utolsó meghatározás, vagy CSS szabály után nem kell pontosvessző (általában ki szoktuk tenni).
```css
p {
color: #323232;
font-size: 1.25em;
line-height: 1.125em
}
```
Egy meghatározás kulcsszóból, vagy névből, és a hozzá tartozó értékből áll, **kettősponttal** elválasztva.
Léteznek gyorsírásos szabályok, amikben **több értéket** is megadhatunk. Ebben az esetben az értékeket **szóközzel** kell elválasztani.
```css
p {
margin: 10px auto 15px auto;
padding: 0px 5px;
font: small-caps italic bold 16px Helvetica;
}
```
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://digikiad.gitbook.io/digitalis-kiadvanyok/css/css-stilusok-felepitese.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.