Zadanie CSS - formatowanie tekstu

Stwórz przykładowy kod:

<!DOCTYPE html>
<html lang=”pl”>
<head>
<meta charset=”UTF-8″>
<title>Mój pierwszy artykuł</title>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>

<h1>Historia Internetu</h1>
<h2>Krótki wstęp</h2>

<p>
Internet to globalna sieć komputerowa, która umożliwia przesyłanie danych i komunikację pomiędzy użytkownikami na całym świecie.
Pierwsze sieci zaczęły powstawać już w latach 60-tych XX wieku.
</p>

<p class=”note”>Uwaga! Internet nie zawsze był tak dostępny jak dziś.</p>

<blockquote>
„Internet to nie tylko technologia, ale również sposób myślenia o wolnym dostępie do informacji.”
</blockquote>

<p>
Więcej informacji znajdziesz na stronie
<a href=”https://pl.wikipedia.org/wiki/Internet” target=”_blank”>Wikipedia</a>.
</p>

<p class=”truncate”>
To jest bardzo długi akapit, który zostanie przycięty dzięki właściwości text-overflow i będzie kończył się trzema kropkami, jeśli jest za długi…
</p>

<pre><code>
body {
font-family: Arial, sans-serif;
font-size: 16px;
}
</code></pre>

</body>
</html>

Umieść style CSS:

/* Globalne ustawienia */
body {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.6;
color: #222;
}

/* Nagłówek h1 */
h1 {
font-size: 2rem;
font-weight: 700;
letter-spacing: 0.05em;
text-align: center;
color: #0b3d91;
}

/* Podtytuł h2 */
h2 {
font-style: italic;
text-transform: uppercase;
color: green;
}

/* Akapity */
p {
font-size: 1rem;
text-indent: 2em;
}

/* Ważna notka */
.note {
color: red;
font-weight: bold;
text-transform: uppercase;
background-color: yellow;
}

/* Cytat */
blockquote {
font-style: italic;
text-align: justify;
}

/* Linki */
a {
color: blue;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}

/* Kod */
pre code {
font-family: „Courier New”, monospace;
white-space: pre;
background-color: #f4f4f4;
}

/* Przycinanie tekstu */
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

Wykonaj następujące polecenia:

🔠 Zmień odstępy między słowami
Ustaw word-spacing dla wszystkich akapitów (p) na 5px i zobacz, jak zmienia się czytelność tekstu.
↩️ Zmień kierunek pisania tekstu
Dodaj direction: rtl; (right to left) do jednego z akapitów i sprawdź, jak wygląda tekst pisany od prawej do lewej strony.
☝️ Dodaj dekorację nad tekstem
W nagłówku <h1> dodaj text-decoration: overline;, aby nad tytułem pojawiła się linia.
📏 Zwiększ odstęp między liniami
Zmień line-height dla tekstu w body na 2 i sprawdź, jak wpływa to na komfort czytania.
🩵 Zmień styl i grubość czcionki w podtytule
Dla elementu <h2> ustaw font-style: italic; oraz font-weight: 600; i zaobserwuj, jak różni się wygląd tekstu.
✉️ Wyrównanie tekstu
Dla wszystkich akapitów (p) ustaw text-align: justify;, żeby tekst był równy po obu stronach — jak w gazetach.
🧩 Zmień wygląd linków
Dodaj do stylu dla a właściwość text-transform: uppercase;, żeby link był zapisany wielkimi literami.
Następnie zmień text-decoration na underline dotted; i sprawdź efekt.
🔤 Zwiększ odstęp między literami
W nagłówku <h1> dodaj letter-spacing: 3px;, aby litery w tytule były nieco bardziej rozstrzelone.
🟢 Eksperyment z kolorami i tłem
Do klasy .note dodaj color: darkred; i background-color: lightyellow; — porównaj kontrast i czytelność z wcześniejszym ustawieniem.
💡 Zmień wielkość liter w akapicie
Dla wybranego akapitu dodaj text-transform: capitalize; – zobacz, jak każda pierwsza litera wyrazu staje się wielka.

Kontakt: mgzsp22@gmail.com