Co to jest CSS, do czego jest Ci potrzebny i jak się go nauczyć?


Co to jest css? Według definicji to kaskadowe arkusze stylów, natomiast z praktyki element bez którego nie obejdzie się dzisiaj żadna strona. Jeżeli chcesz się dowiedzieć jak zacząć jego naukę to zapraszam.

Słowem wstępu

W tym wpisie nie nauczę Cię CSSa ale…

Powiem za to czym jest oraz napiszę jak możesz zacząć się go uczyć. Pokażę Ci również gdzie grzebać na blogu aby móc cieszyć się własnymi modyfikacjami. Chętny? no to do dzieła.

Co to jest css?

Mówiąc najprościej CSS odpowiada za to co widzisz. Kolory, krój, układ czcionek obrazków i inne elementy znajdujące się na stronie.

Jeżeli przyjmiemy, że każda strona www ma szkielet na którym jest oparta to CSS będzie odpowiadał za to jak ten szkielet się prezentuje.

Upraszczając jeszcze bardziej strona to choinka, a css będzie bombkami które na niej wiszą 🙂

W css definiujesz jak poszczególne elementy mają wyglądać ale nie tylko. Css odpowiada również za ich zachowanie w momencie wyświetlania na różnego typu urządzeniach i tutaj dochodzimy do responsywności.

Strona responsywna – to strona która poprawnie wyświetla się na każdym urządzeniu dostosowując się do wielkości jego wyświetlacza i pozwalając użytkownikowi na swobodne korzystanie z serwisu.

Wracając do styli kaskadowych, najczęściej wszystkie umieszczone są w jednym głównym pliku style.css chociaż w większości szablonów i dodatkowych wtyczek znajdziesz również dodatkowe pliki wspomagające. Mają inne nazwy ale zachowane wspólne rozszerzenie.

Oprócz wspomnianego pliku style.css możesz umieścić css bezpośrednio w kodzie strony jak również przy konkretnym elemencie strony np. Chciałbym aby mój nagłówek H1 miał kolor czerwony.

<h3 style="color:#FF0000;">Treść nagłówka</h3>

a wygląda to tak:

Treść nagłówka

Co to jest css i jak się go nauczyć?

Osobiście mam tak, że za cholerę nie potrafię uczyć się z książek. Tym bardziej rzeczy które można odrazu przenieść na praktykę. Po prostu czytając, że coś mogę zrobić tak czy siak, odrywam się od książki i zaczynam to robić i na tym kończy się moje czytanie.

Dlatego większości nauczyłem się z praktyki posiłkując się w miarę potrzeb wyszukiwarką.

CSS jest idealnym tego przykładem, dlatego jeśli masz podobnie to polecam Ci zapoznać się z elementami które możesz zmieniać dzięki niemu. Znajdziesz je np. na tej stronie
:

https://www.w3schools.com/

A potem zacząć zmieniać to na co mas ochotę. Prowadząc bloga lub będąc administratorem jakiejś strony na pewno co chwile masz ochotę coś zmieniać 🙂

Według mnie nie ma lepszej metody nauki niż praktyka, znam wiele osób które nauczyły się właśnie w ten sposób.

Jak coś zmienić dzięki css?

Wspomniałem o pliku w którym znajdują się style strony, ten plik w przypadku wordpress znajdziesz w katalogu z motywem którego aktualnie używasz. Ścieżka do niego powinna wyglądać mniej więcej tak:

/wp-content/themes/nazwa szablonu

Możesz się do niego dostać na dwa sposoby:

  • 1. Poprzez wejście na serwer za pomocą klienta FTP
  • 2. Poprzez edytor motywu w panelu wordpress (screen 1)
co to jest css
Screen 1

Pamiętaj zanim zaczniesz cokolwiek zmieniać zrób sobie backup tego pliku.

Jest jeszcze jeden sposób którym możesz dodać własny kod, również z poziomu wordpressa. 
W tym celu przejdź do lewego menu Wygląd»dostosuj i wybierz dodatkowy CSS. (screen 2)

Na sam koniec złota rada 🙂

Css potrafi być niesamowicie wkurzający. Czasami zmiany których dokonujemy w pliku nijak się mają do tego co widzimy, a to potrafi przyprawić o białą gorączkę (przynajmniej mnie)
.

Przyczyną najczęściej jest to, że zmieniamy albo nie to co trzeba w sensie w złym miejscu albo po prostu przeglądarka trzyma nam poprzednią wersje i nie pokazuje zmian. W tym drugim wypadku dobrze przeglądać to co zmieniliśmy w innej przeglądarce.

Blogujesz? Mam dla Ciebie listę narzędzi które pokochasz.

Pobierz darmowy e-book.