HTML for Kids · Lekcja

Podstawy CSS

Wprowadzenie do stylowania za pomocą CSS (opcjonalny przegląd podstaw)

Podstawy CSS to bezpłatna lekcja HTML for Kids na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML for Kids, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML for Kids zawiera 4 lekcji w sumie.

Podstawy CSS: wprowadzenie do stylowania za pomocą CSS

Witamy w świecie CSS! Dzisiaj nauczymy się używać kaskadowych arkuszy stylów (CSS) do stylowania stron internetowych i nadawania im atrakcyjnego wyglądu.

Czym jest CSS?

CSS to skrót od Cascading Style Sheets. Jest to język służący do kontrolowania wyglądu i charakteru stron internetowych.

Za pomocą CSS możesz zmieniać kolory, czcionki, układy i wiele więcej!

Jak działa CSS

CSS działa poprzez wybieranie elementów HTML i stosowanie do nich stylów. CSS można używać na trzy sposoby:

Inline: dodawanie stylów bezpośrednio wewnątrz elementów HTML.
Wewnętrzne: dodawanie stylów wewnątrz znacznika <style> w sekcji <head>.
Zewnętrzne: użycie osobnego pliku CSS.

W tej lekcji skupimy się na stylach wewnętrznych i zewnętrznych.

Wewnętrzny CSS

Wewnętrzny CSS zapisuje się wewnątrz znacznika <style> w sekcji <head> dokumentu HTML.

Przykład:

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-color: lightblue;
      }
      h1 {
        color: navy;
      }
      p {
        font-size: 18px;
      }
    </style>
  </head>
  <body>
    <h1>Welcome to CSS</h1>
    <p>This page has styles applied using internal CSS.</p>
  </body>
</html>

Zewnętrzny CSS

Zewnętrzny CSS zapisuje się w osobnym pliku z rozszerzeniem .css. Plik ten łączy się z dokumentem HTML za pomocą znacznika <link>.

Przykład:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Welcome to External CSS</h1>
    <p>This page uses an external CSS file for styling.</p>
  </body>
</html>

Selektory w CSS

Selektory służą do wskazywania konkretnych elementów HTML, które mają zostać ostylowane. Do najczęściej używanych selektorów należą:

Selektor znacznika: wskazuje wszystkie elementy z określonym znacznikiem. Przykład: p.
Selektor klasy: wskazuje elementy z określoną klasą. Przykład: .myClass.
Selektor identyfikatora: wskazuje element z określonym identyfikatorem. Przykład: #myID.

Zobaczmy, jak ich używać!

Selektory klas i identyfikatorów

Użyj klasy, gdy chcesz stylować wiele elementów. Identyfikatora użyj dla pojedynczego, unikalnego elementu.

Przykład:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .highlight {
        color: red;
        font-weight: bold;
      }
      #unique {
        color: blue;
        font-size: 24px;
      }
    </style>
  </head>
  <body>
    <p class="highlight">This is highlighted text.</p>
    <p id="unique">This text is unique.</p>
  </body>
</html>

Spróbuj samodzielnie

Utwórzmy stronę internetową przy użyciu wewnętrznego CSS. Oto przykład, od którego możesz zacząć:

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-color: lavender;
        font-family: Arial, sans-serif;
      }
      h1 {
        text-align: center;
        color: darkmagenta;
      }
      p {
        color: gray;
        line-height: 1.5;
      }
    </style>
  </head>
  <body>
    <h1>Welcome to My Styled Page</h1>
    <p>This is an example of using internal CSS to style a page.</p>
  </body>
</html>

Świetna praca!

Gratulacje! Poznałeś podstawy CSS i nauczyłeś się używać go do stylowania stron internetowych. CSS sprawia, że strony wyglądają profesjonalnie i atrakcyjnie. W następnej lekcji omówimy dokładniej kolory i tła, aby nadać stronom jeszcze bardziej wyrazisty wygląd. Przygotuj się na rozwijanie swojej kreatywności!

Często zadawane pytania

Czy lekcja „Podstawy CSS” jest bezpłatna?

Tak — pełny tekst „Podstawy CSS” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML for Kids, przejdź na CoddyKit PRO. Kurs HTML for Kids zawiera 4 lekcji w sumie.

Co nauczysz się w „Podstawy CSS”?

Wprowadzenie do stylowania za pomocą CSS (opcjonalny przegląd podstaw) Ćwiczysz HTML for Kids z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć HTML for Kids?

Nie wymagamy żadnego doświadczenia. HTML for Kids w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „Podstawy CSS”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji HTML for Kids?

Tak. Każda lekcja HTML for Kids zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do HTML for Kids