Stylowanie tekstu w CSS

Zadanie: stylowanie tekstu w CSS

Cel zadania:
Nauka zaawansowanego stylowania tekstu za pomocą CSS, w tym:

• Zmiana czcionki, rozmiaru i wagi tekstu.
• Kontrola odstępów między literami i wierszami.
• Wyrównanie tekstu i dodanie cienia.
• Transformacja tekstu (np. wielkie litery, kapitaliki).
  
  

– Przygotowanie pliku HTML:

Stwórz plik HTML z podstawową strukturą strony.

– Dodaj kilka elementów tekstowych, takich jak nagłówki (h1, h2), akapity (p), oraz listę (ul z li).

Podłączenie pliku CSS:

– Stwórz plik CSS (np. styles.css) i podłącz go do pliku HTML za pomocą tagu <link>.

Stylowanie tekstu:

– Wykorzystaj poniższe właściwości CSS do stylowania tekstu w swoim pliku HTML.

Zadania do wykonania w CSS:

Nagłówek h1:

• Ustaw czcionkę na Arial, sans-serif.
• Zmień rozmiar czcionki na 36px.
• Ustaw kolor tekstu na ciemnoniebieski (#003366).
• Dodaj cień tekstu: 2px 2px 4px rgba(0, 0, 0, 0.3).
• Wyrównaj tekst do środka (text-align: center).
  
  

Nagłówek h2:

• Ustaw czcionkę na Georgia, serif.
• Zmień rozmiar czcionki na 28px.
• Ustaw kolor tekstu na ciemnozielony (#006600).
• Dodaj odstęp między literami (letter-spacing: 2px).
• Przekształć tekst na wielkie litery (text-transform: uppercase).
• Akapit z klasą intro:
• Ustaw czcionkę na 'Times New Roman’, serif.
• Zmień rozmiar czcionki na 18px.
• Ustaw kolor tekstu na szary (#333333).
• Ustaw wysokość linii (line-height) na 1.6em
• Wyrównaj tekst do lewej (text-align: left).
  
  

Akapit z klasą highlight:

• Ustaw czcionkę na Verdana, sans-serif.
• Zmień rozmiar czcionki na 20px.
• Ustaw kolor tekstu na ciemnopurpurowy (#660066).
• Dodaj pogrubienie (font-weight: bold).
• Przekształć tekst na kapitaliki (font-variant: small-caps).
• Dodaj cień tekstu: 1px 1px 2px rgba(0, 0, 0, 0.5).
  
  

Lista ul:

• Ustaw czcionkę na 'Courier New’, monospace.
• Zmień rozmiar czcionki na 16px.
• Ustaw kolor tekstu na ciemnoczerwony (#990000).
• Dodaj odstęp między literami (letter-spacing: 1px).
• Ustaw styl listy na kwadraty (list-style-type: square).
  
  Przykład rozwiązania: