#6. Poznajmy bliżej CSS

Jak pracowaliśmy ze stylami…

Podstawy podstaw początkującego klikacza kodu mamy za sobą❕ W jednym pliku html tworzyliśmy kod, w którym znajdowały się teksty i obrazki sformatowane, dzięki atrybutowi ‘style’.

Od tej chwili pracujemy tak… 🔽

Zacznijmy od wyjaśnienia co oznacza skrót:

CSS

Cascading Style Sheets – Kaskadowe arkusze stylów

CSS to język reguł określających wygląd – inaczej stylami, dzięki którym możemy upiększyć naszą stronę.

Aby móc rozpocząć pracę z CSS, należy wykonać dwa proste kroki:

  • Dla czytelności kodu treść i strukturę trzymamy w plikach html, a style (reguły wyglądu) w plikach CSS. W pliku html, należy dodać w sekcji head, tag linkujący z zawartością (w atrybucie ‘href=”style.css” ‘dodajemy nazwę pliku css):
  • Plik stylów może mieć dowolną nazwę, ale ważne jest, aby rozszerzenie zawsze miało “.css”. Dodajmy do projektu plik – style.css

Konstrukcja stylu

Plik CSS zawiera, tzw. reguły wyglądu (style).

Prześwietlmy przykładowy styl:

p {
 color: red;
 font-size: 24px;
}
  1. W pierwszej kolejności występuję selektor, który wskazuję na jakie elementy HTML ma zostać zastosowany styl (np. p). Następnie w nawiasach klamrowych umieszczamy kolejne deklarację (określające wygląd), z których każda zawiera właściwość (np. kolor i rozmiar czcionki) i po dwukropku wartość tej właściwości (np. red lub 24px).
  2. Deklaracji w danym stylu może być wiele (np. color, font-size,…). Tak jak w atrybucie style w html-u, tak samo w css zamykamy każdą deklarację średnikiem.

Koniec tej teorii – czas na praktykę❕ Poniżej dodaję ćwiczenie na rozgrzewkę z css😃💻

Ćwiczenie

  1. Utwórz nowy projekt w codesandbox.
  2. Potrzebujemy dwa pliki – index.html oraz style.css – stwórz je.
  3. W tytule możesz dodać: “Moja pierwsza strona z css”.
  4. Pod tytułem umieść znacznik link do pliku style – możesz skopiować powyższy z ramki.
  5. W nagłówku h1 dodaj “Jestem ostylowany!”.
  6. Przykładowy tekst umieść w akapicie.
  7. W pliku style.css dodaj tzw. regułę wyglądu (styl) – np. h1 w kolorze czerwonym a akapit niebieski i rozmiarze 24px.
  8. Zapisz Ctrl+S. Twoja pierwsza strona ze stylami css gotowa❕🙂💪
ROZWIĄZANIE ĆWICZENIA. KLIKNIJ, ABY PODEJRZEĆ…

sad-wu-3yo3b

sad-wu-3yo3b by danielminschinski

Selektor klasy

Reguła CSS z selektorem klasy wygląda przykładowo:

.example{
  color: blue;
  font-size: 24px;
}

Nazwę klasy w CSS zawsze piszemy z kropką na początku. Powyższy zapis odnosi się do wszystkich elementów strony HTML z klasą danger, np.

tekst niebieski z rozmiarem 24px

Ćwiczenie

  1. Do poprzedniego ćwiczenia dopisz kolejny akapit z klasą ‘intro’. W CSS ustaw dla tej klasy kolor zielony z rozmiarem czcionki 16px.
ROZWIĄZANIE ĆWICZENIA. KLIKNIJ, ABY PODEJRZEĆ…

competent-breeze-1k77x

competent-breeze-1k77x by danielminschinski

Pierwsze szlify z css mamy za sobą❕ W kolejnym poście rozszerzymy wiedzę na temat selektorów🧐

Zapraszam do polubienia mojego fb oraz udostępniania materiału😉

Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA