Lekcja 5 czym jest CSS

CSS, czyli Cascading Style Sheets, to język stylowania stron internetowych. Pozwala na zmianę wyglądu elementów HTML, takich jak kolory, czcionki, układ i marginesy.
Definicja klas
Klasy to sposób na grupowanie elementów HTML, które mają wspólne style. Aby zdefiniować klasę, należy użyć tagu `class` w elemencie HTML:
<div class=”mój-element”>
To jest mój element.
</div>

Następnie można użyć tej klasy do stylowania elementu w arkuszu stylów CSS:

.mój-element {
background-color: red;
color: white;
}

Zmiana koloru tła

Aby zmienić kolor tła elementu, należy użyć właściwości `background-color` w arkuszu stylów CSS. Wartość właściwości to kolor tła w postaci kodu szesnastkowego, na przykład `#ffffff` dla białego lub `#ff0000` dla czerwonego.

.mój-element {
background-color: #ffffff;
}

Zmiana koloru czcionki

Aby zmienić kolor czcionki elementu, należy użyć właściwości `color` w arkuszu stylów CSS. Wartość właściwości to kolor czcionki w postaci kodu szesnastkowego, na przykład `#ffffff` dla białego lub `#ff0000` dla czerwonego.

.mój-element {
color: #ffffff;
}

Spady

Spady to odstępy między elementem a jego sąsiadami. Aby zdefiniować spady dla elementu, należy użyć właściwości `padding` w arkuszu stylów CSS. Wartość właściwości to liczba określająca odstęp w pikselach lub procentach.

.mój-element {
padding: 10px;
}

Marginesy

Marginesy to odstępy między elementem a krawędzią okna przeglądarki. Aby zdefiniować marginesy dla elementu, należy użyć właściwości `margin` w arkuszu stylów CSS. Wartość właściwości to liczba określająca odstęp w pikselach lub procentach.

.mój-element {
margin: 10px;
}

Ustawienie tekstu

Aby zmienić ustawienie tekstu elementu, można użyć następujących właściwości w arkuszu stylów CSS:

• `font-family`: określa rodzinę czcionek
• `font-size`: określa rozmiar czcionki
• font-weight`: określa grubość czcionki
• `font-style`: określa styl czcionki
• `text-align`: określa wyrównanie tekstu
• `text-transform`: określa transformację tekstu, na przykład do wielkich lub małych liter

.mój-element {
font-family: sans-serif;
font-size: 16px;
font-weight: bold;
font-style: italic;
text-align: center;
text-transform: uppercase;
}

Przykład

Poniższy kod CSS zmienia kolor tła, kolor czcionki, spady, marginesy i ustawienie tekstu dla elementu z klasą `mój-element`:

.mój-element {
background-color: #ffffff;
color: #ff0000;
padding: 10px;
margin: 10px;
text-align: center;
text-transform: uppercase;
}

Po zastosowaniu tego kodu element będzie wyglądał następująco:

<div class=”mój-element”>
To jest mój element.
</div>