InnoMarts logo
InnoMarts
Fast websites
← Back to course

Kolory, Fonty i Styl Tekstu

Kolory, Fonty i Styl Tekstu

Witaj ponownie.

W poprzedniej lekcji poznałeś selektory CSS.

Teraz możesz powiedzieć CSS dokładnie, co ma stylować.

Bardzo potężne.

Bardzo niebezpieczne.

Jak dać pędzel komuś, kto właśnie odkrył gradienty.

W tej lekcji skupimy się na tekście.

Bo większość stron internetowych jest pełna tekstu.

Nagłówki.

Akapity.

Linki.

Przyciski.

Wiadomości.

Ostrzeżenia.

Mały tekst w footerze, którego nikt nie czyta, ale prawnie wszyscy go potrzebują.

Jeśli tekst trudno czytać, cała strona wydaje się zepsuta.

Nawet jeśli layout jest technicznie poprawny.

Czytelny tekst to nie dekoracja.

Czytelny tekst to przetrwanie.

Czego Się Nauczysz

W tej lekcji nauczysz się:

Dlaczego Styl Tekstu Ma Znaczenie

HTML nadaje tekstowi znaczenie.

CSS nadaje tekstowi wygląd.

HTML mówi:

<h1>Witaj na Mojej Stronie</h1>
<p>To jest akapit.</p>

CSS mówi:

h1 {
  color: #111827;
  font-size: 48px;
}

p {
  color: #374151;
  font-size: 18px;
  line-height: 1.7;
}

Teraz przeglądarka wie nie tylko, czym jest treść, ale też jak powinna wyglądać.

Dobry styl tekstu pomaga użytkownikom czytać wygodnie.

Zły styl tekstu sprawia, że użytkownicy uciekają szybciej niż developer, który widzi “undefined is not a function” w piątek wieczorem.

Stwórz Projekt

Stwórz folder dla tej lekcji:

mkdir css-lesson3
cd css-lesson3
touch index.html
touch style.css

Powinieneś mieć:

css-lesson3/
  index.html
  style.css

Otwórz folder w swoim edytorze.

Stworzymy małą stronę artykułu.

Bo artykuły są idealne do ćwiczenia stylowania tekstu.

Dużo nagłówków.

Dużo akapitów.

Dużo okazji, żeby zrobić coś czytelnego.

Albo okropnego.

Wybieramy czytelność.

Jesteśmy cywilizowanymi ludźmi.

Napisz HTML

Otwórz index.html i dodaj to:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Kolory, Fonty i Styl Tekstu</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="site-header">
    <h1>Uczymy Się Stylowania Tekstu z CSS</h1>
    <p class="subtitle">Spraw, żeby słowa były czytelne, ładne i trochę mniej nudne.</p>
  </header>

  <main class="page">
    <article class="article-card">
      <p class="category">CSS Basics</p>

      <h2>Dlaczego Styl Tekstu Ma Znaczenie</h2>

      <p>
        Tekst jest jedną z najważniejszych części każdej strony internetowej. Jeśli ludzie nie mogą wygodnie czytać twojej treści, nie zostaną długo.
      </p>

      <p>
        CSS pozwala kontrolować kolory, fonty, rozmiary, odstępy, wyrównanie i wiele innych szczegółów, które ułatwiają czytanie.
      </p>

      <h3>Czytelny Tekst To Dobry Design</h3>

      <p>
        Dobry design to nie tylko piękne kolory i fancy effects. To także jasne przekazywanie informacji.
      </p>

      <a href="#" class="read-more">Czytaj więcej</a>
    </article>
  </main>

  <footer class="site-footer">
    <p>Stworzone podczas nauki CSS text styling.</p>
  </footer>
</body>
</html>

Ta strona ma:

Idealnie.

Mały plac zabaw dla tekstu.

Ale bez piasku w butach.

Zacznij od Podstawowych Stylów Strony

Otwórz style.css i dodaj:

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
  color: #111827;
}

To daje stronie:

Strona już wygląda mniej chaotycznie.

Jeszcze nie gotowa.

Ale już nie tak, jakby przeglądarka podejmowała wszystkie decyzje projektowe podczas przerwy obiadowej.

Kolor Tekstu przez color

Property color zmienia kolor tekstu.

Przykład:

p {
  color: #374151;
}

To sprawia, że tekst paragraph jest ciemnoszary.

Ciemnoszary często czyta się łatwiej niż czystą czerń.

Czysta czerń na czystej bieli może być zbyt ostra.

Jakby strona krzyczała.

Dodaj to:

p {
  color: #374151;
}

Teraz wszystkie paragraphs używają łagodniejszego koloru tekstu.

Mała zmiana.

Duży komfort.

Oczy użytkowników cicho ci dziękują.

Background Color

Property background-color zmienia tło elementu.

Przykład:

.site-header {
  background-color: #111827;
}

Dodaj to:

.site-header {
  background-color: #111827;
  color: white;
  text-align: center;
  padding: 48px 24px;
}

Teraz header ma:

To już wygląda bardziej świadomie.

CSS zaczyna się zachowywać.

Jeszcze mu całkiem nie ufaj.

Ale jest postęp.

Font Family

Property font-family kontroluje krój pisma.

Przykład:

body {
  font-family: Arial, sans-serif;
}

To oznacza:

Użyj Arial, jeśli jest dostępny. Jeśli nie, użyj dowolnego sans-serif font.

Fallback jest ważny.

Nie każdy computer ma każdy font.

Browsers są praktyczne.

Potrzebują planów awaryjnych.

Jak developers przed production deploy.

Popularne font families:

font-family: Arial, sans-serif;
font-family: Georgia, serif;
font-family: "Courier New", monospace;

Na razie zostaw to:

body {
  font-family: Arial, sans-serif;
}

Prosto.

Czytelnie.

Bezpiecznie.

Bez dramatu.

Font Size

Property font-size kontroluje rozmiar tekstu.

Przykład:

h1 {
  font-size: 48px;
}

Dodaj to:

h1 {
  font-size: 48px;
  margin-bottom: 12px;
}

h2 {
  font-size: 32px;
}

h3 {
  font-size: 24px;
}

p {
  font-size: 18px;
}

Teraz headings i paragraphs mają różne rozmiary.

To tworzy hierarchy.

Hierarchy pokazuje użytkownikowi, co jest najważniejsze.

Bez hierarchy wszystko krzyczy z taką samą głośnością.

To nie design.

To rodzinny obiad ze słabym Wi-Fi.

Font Weight

Property font-weight kontroluje grubość tekstu.

Przykład:

h1 {
  font-weight: 700;
}

Popularne wartości:

font-weight: 400;
font-weight: 600;
font-weight: 700;

Możesz też używać słów:

font-weight: normal;
font-weight: bold;

Dodaj to:

h1,
h2,
h3 {
  font-weight: 700;
}

.category {
  font-weight: 700;
}

Teraz headings i category label wyglądają mocniej.

Używaj bold ostrożnie.

Jeśli wszystko jest bold, nic nie jest bold.

Jeśli każdy przycisk mówi “PILNE”, po pewnym czasie nikt nie wierzy.

Line Height

Property line-height kontroluje przestrzeń między liniami tekstu.

Przykład:

p {
  line-height: 1.7;
}

Dodaj to:

p {
  font-size: 18px;
  line-height: 1.7;
}

To poprawia czytelność.

Bez dobrego line-height paragraphs wyglądają na ściśnięte.

Jak słowa stojące w zatłoczonej windzie.

Daj im przestrzeń.

Słowa też potrzebują tlenu.

Text Align

Property text-align kontroluje poziome wyrównanie tekstu.

Przykład:

text-align: center;

Popularne wartości:

text-align: left;
text-align: center;
text-align: right;

Użyliśmy tego już w header:

.site-header {
  text-align: center;
}

Używaj centered text ostrożnie.

Dobrze działa dla krótkich headers.

Ale długie paragraphs zwykle łatwiej czytać left-aligned.

Nie centruj całego article, chyba że chcesz, żeby czytelnicy cierpieli grzecznie.

Text Transform

Property text-transform zmienia wielkość liter tekstu.

Przykład:

.category {
  text-transform: uppercase;
}

Dodaj to:

.category {
  color: #2563eb;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

To sprawia, że category label wygląda jak mały tag.

letter-spacing dodaje przestrzeń między literami.

Przydatne dla uppercase labels.

Niebezpieczne, jeśli przesadzisz.

Zbyt duży letter-spacing sprawia, że tekst wygląda, jakby próbował uciec.

Text Decoration

Property text-decoration kontroluje linie na tekście.

Links domyślnie mają underline.

Możesz go usunąć:

a {
  text-decoration: none;
}

Ale ostrożnie.

Underlines pomagają użytkownikom rozpoznawać links.

Jeśli usuwasz underline, spraw, żeby link był wyraźny w inny sposób.

Dodaj to:

.read-more {
  color: #2563eb;
  font-weight: 700;
  text-decoration: none;
}

.read-more:hover {
  text-decoration: underline;
}

Teraz link wygląda czysto.

Kiedy user najedzie mouse, underline wraca.

Grzecznie.

Czytelnie.

Link z dobrymi manierami.

Wystylizuj Article Card

Teraz spraw, żeby article był łatwiejszy do czytania.

Dodaj to:

.page {
  max-width: 800px;
  margin: 40px auto;
  padding: 0 20px;
}

.article-card {
  background-color: white;
  padding: 32px;
  border-radius: 16px;
}

To tworzy:

Teraz strona ma strukturę.

Tekst ma dom.

Dobry dom.

Nie piwnicę z default Times New Roman.

Wystylizuj Footer

Dodaj:

.site-footer {
  text-align: center;
  padding: 24px;
}

.site-footer p {
  color: #6b7280;
  font-size: 14px;
}

Teraz footer wygląda łagodniej.

Footer text zwykle powinien być mniej dominujący.

Jest użyteczny.

Ale nie musi wchodzić do pokoju z trąbką.

Pełny CSS

Twój style.css powinien wyglądać tak:

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
  color: #111827;
}

.site-header {
  background-color: #111827;
  color: white;
  text-align: center;
  padding: 48px 24px;
}

h1 {
  font-size: 48px;
  margin-bottom: 12px;
}

h2 {
  font-size: 32px;
}

h3 {
  font-size: 24px;
}

h1,
h2,
h3 {
  font-weight: 700;
}

.subtitle {
  color: #d1d5db;
  font-size: 20px;
}

.page {
  max-width: 800px;
  margin: 40px auto;
  padding: 0 20px;
}

.article-card {
  background-color: white;
  padding: 32px;
  border-radius: 16px;
}

.category {
  color: #2563eb;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

p {
  color: #374151;
  font-size: 18px;
  line-height: 1.7;
}

.read-more {
  color: #2563eb;
  font-weight: 700;
  text-decoration: none;
}

.read-more:hover {
  text-decoration: underline;
}

.site-footer {
  text-align: center;
  padding: 24px;
}

.site-footer p {
  color: #6b7280;
  font-size: 14px;
}

Zapisz plik.

Odśwież przeglądarkę.

Strona powinna wyglądać dużo czytelniej.

Nie tylko styled.

Readable.

To jest cel.

Strona ma nie tylko wyglądać “cool”.

Ma pomagać ludziom rozumieć informacje.

Dzika idea, prawda?

Częste Błędy

Zbyt Mały Tekst

Źle:

p {
  font-size: 10px;
}

Tiny text nie jest elegancki.

Jest po prostu tiny.

Główny tekst powinien być wygodny do czytania.

Dobry start:

p {
  font-size: 16px;
  line-height: 1.6;
}

Do beginner practice 18px też jest w porządku.

Zły Contrast

Źle:

p {
  color: #cccccc;
  background-color: #ffffff;
}

Jasnoszary tekst na białym tle trudno czytać.

Może wyglądać “soft”.

Ale wygląda też niewidzialnie.

Twój content nie powinien bawić się w chowanego.

Za Dużo Fonts

Zły pomysł:

h1 {
  font-family: Georgia, serif;
}

h2 {
  font-family: "Courier New", monospace;
}

p {
  font-family: Arial, sans-serif;
}

Za dużo fonts robi stronę messy.

Zacznij od jednego font.

Może od dwóch później.

Nie od dwunastu.

To website, nie font zoo.

Praktyka

Stwórz małą blog-style page z:

Potem wystylizuj:

Skup się na readability.

Nie na decoration.

Readable first.

Fancy later.

Jak nauka chodzenia przed kupieniem błyszczących butów do biegania.

Mini Wyzwanie

Stwórz dwie article cards.

Daj im obu class:

class="article-card"

Potem stwórz special class:

class="article-card highlighted"

Wystylizuj highlighted article inaczej:

.highlighted {
  border: 2px solid #2563eb;
}

Spróbuj zmienić:

Ćwiczysz prawdziwe CSS thinking:

base style plus variation.

Właśnie tak websites pozostają organized, zamiast zmieniać się w style soup.

Podsumowanie

Dzisiaj nauczyłeś się, że:

Tekst nie jest małym detalem.

Tekst jest głównym content wielu websites.

Traktuj go dobrze.

Users to zauważą.

Nawet jeśli nie będą wiedzieć, dlaczego.

Następna Lekcja

W następnej lekcji poznamy box model.

Margin.

Padding.

Border.

Content.

Sekretną geometrię każdej web page.

Przygotuj się.

Boxes are coming.