HOME > CSS

Podstawy CSS

Style CSS to język służący do tworzenia reguł formatowania dla stron internetowych. Pozwala on na kontrolowanie elementów takich jak kolor tekstu, tła, położenie elementów, wielkość fontu itp. Style CSS są używane do tworzenia stron internetowych, które są atrakcyjne wizualnie i łatwe w obsłudze.

Style CSS składają się z kilku elementów, które pozwalają na definiowanie stylów dla elementów HTML:

  1. Selektory: Selektory pozwalają na określenie elementów HTML, dla których mają zostać zastosowane style. Selektory mogą być podstawowe, takie jak nazwa tagu (np. p) lub klasa (np. .header) lub bardziej zaawansowane, takie jak selektory potomków (np. .header p) lub ID (np. #main).
  2. Właściwości: Właściwości określają, jakie cechy elementów mają zostać zmienione przez style. Przykładowo, właściwość color określa kolor tekstu, a właściwość background-color określa kolor tła elementu.
  3. Wartości: Wartości są podawane dla właściwości i określają dokładnie, jakie zmiany mają zostać wprowadzone. Wartości mogą być podane w różnych jednostkach, np. pikselach (px) lub procentach (%).

Oto przykład CSS, który ilustruje te podstawowe elementy:

/* Selektor */
h1 {
    /* Właściwość i wartość */
    color: blue;
    /* Właściwość i wartość */
    font-size: 24px;
}

/* Selektor */
.highlight {
    /* Właściwość i wartość */
    background-color: yellow;
}

W powyższym przykładzie, selektor h1 jest użyty do określenia nagłówków pierwszego poziomu, a selektor .highlight jest użyty do oznaczenie elementów z klasą highlight. Dla nagłówków pierwszego poziomu zdefiniowano dwa style – kolor na blue i rozmiar czcionki na 24px, a dla elementów z klasą highlight jest ustawiony kolor tła na żółty.

CSS pozwala również na połączenie kilku selektorów, co pozwala na zastosowanie stylu do wielu różnych elementów. Możemy np. zastosować styl do wszystkich elementów p znajdujących się w elemencie o klasie .container:

/* Selektor */
.container p {
    /* Właściwość i wartość */
    font-size: 16px;
}

CSS pozwala też na tworzenie różnych reguł związanych z dziedzictwem, kaskadowością i priorytetem stylu, co pozwala na rozbudowanie i dostosowanie stylów do indywidualnych potrzeb projektu.

Podobne artykuły