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;
}- 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).
- 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
- Utwórz nowy projekt w codesandbox.
- Potrzebujemy dwa pliki – index.html oraz style.css – stwórz je.
- W tytule możesz dodać: “Moja pierwsza strona z css”.
- Pod tytułem umieść znacznik link do pliku style – możesz skopiować powyższy z ramki.
- W nagłówku h1 dodaj “Jestem ostylowany!”.
- Przykładowy tekst umieść w akapicie.
- W pliku style.css dodaj tzw. regułę wyglądu (styl) – np. h1 w kolorze czerwonym a akapit niebieski i rozmiarze 24px.
- Zapisz Ctrl+S. Twoja pierwsza strona ze stylami css gotowa❕🙂💪
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
- Do poprzedniego ćwiczenia dopisz kolejny akapit z klasą ‘intro’. W CSS ustaw dla tej klasy kolor zielony z rozmiarem czcionki 16px.
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