Podstawowa składnia CSS

CSS (Cascading Style Sheets) umożliwia precyzyjne definiowanie wyglądu elementów HTML. Aby skutecznie stosować CSS, należy znać podstawową składnię, która składa się z selektorów, właściwości i wartości.

Przykład reguły CSS

Poniżej przykład prostego stylu, który zmienia kolor tekstu w nagłówku i rozmiar czcionki w paragrafie. W tym przypadku:

• Reguła dla h1 ustawia kolor tekstu na niebieski i wyrównuje go do środka.
• Reguła dla p zmienia rozmiar tekstu na 16px i ustawia kolor na szary.

h1 {
    color: blue;
    text-align: center;
}

p {
    font-size: 16px;
    color: gray;
}

Selektory

Selektory pozwalają na wybieranie i stylizowanie konkretnych elementów HTML.

• Selektory elementów - Odwołują się bezpośrednio do elementów HTML, takich jak h1, p, div, a.
• Selektory klas - Używają symbolu kropki (.) i odwołują się do elementów z określoną klasą.
• Selektory ID - Używają symbolu hasha (#) i odwołują się do elementu o unikalnym identyfikatorze.

  See the Pen 
  Untitled by EE-Informatyk.pl (@eeinformatyk)
  on CodePen.

Grupy selektorów

W CSS możemy stylizować wiele elementów jednocześnie, grupując selektory.
W tym przykładzie wszystkie nagłówki h1, h2 i h3 będą miały fioletowy kolor.

h1, h2, h3 {
    color: purple;
}

Komentarze w CSS

Komentarze pozwalają na dodawanie notatek w kodzie CSS, które nie wpływają na wygląd strony. Używamy ich w następujący sposób:

/* To jest komentarz */

p {
    color: black;
}

/* Komentarz ten nie będzie widoczny na stronie */

Podsumowanie

Podstawowa składnia CSS jest prosta do zrozumienia, ale bardzo potężna. Poznanie podstawowych elementów, takich jak selektory, właściwości i wartości, to pierwszy krok do tworzenia estetycznych i funkcjonalnych stron internetowych.