Jak pewnie wiemy, częste wspólne występowanie HTML, CSS i JavaScript nie jest przypadkowe. O ile html odpowiedzialny jest za treść na naszej stronie, o tyle CSS odpowiadać będzie za sposób w jaki ta treść jest wyświetlana, a JS to logika. Zatem nasze kaskadowane arkusze stylów(CSS – cascading stylesheet) będą odpowiedzialne między innymi za: tło, czcionkę, obrazki, układ na stronie, kolory. Zatem coś, co upiększy nasz domyślnie wyglądający HTML. Tradycyjnie mały spisik treści:

Zasady definiowania stylów

Klasa

ID

Komentarze w stylach

3 sposoby dołączania CSS’a do pliku HTML

Hierarchia w stylach

No to do dzieła! 😉

Zasady definiowania stylów są bardzo proste i wyglądają następująco:
selektor{ właściwość: wartość;}
np.
p { color: red;}
Wszystkie elementy p (paragrafy) będą miały czcionkę w kolorze czerwonym.

Klasy to nic innego jak atrybut class tagów html. Atrybut ten przyjmuje jakąś ustaloną przez nas nazwę. Dzięki niej będziemy mogli odwoływać się do danego elementu html. Jeśli ustalimy, że selektorem w stylach będzie p, wtedy wszystkie paragrafy będą przyjmować takie style. Klasa służy nam do odwoływania się do konkretnego elementu np. mamy kilka divów na stronie, ale chcemy ustawić tylko jednemu dane style. Wtedy w html dodajemy atrybut class=”” i w apostrofach wpisujemy swoją nazwę np. class=”div1″. Od tego momentu możemy przejść do styli i używać selektora .div1{}. Do klas odwołujemy się poprzedzając nazwę kropką.
np. <div class=”div1″></div>
w stylach wpisujemy
.div1 { background-color: blue;}

W efekcie otrzymamy naszego diva1 z tłem w kolorze niebieskim (kod uproszczony – pamiętaj, że musisz dodać jeszcze width odpowiedzialny za szeokosc elementu i height czyli wysokość – wtedy zobaczysz niebieski div).
Zapamiętaj: do klas w stylach odwołujemy się po kropce, klasę definiujemy w html w atrybucie class, dany element może przyjmować wiele klas rozdzielonych spacją np. class=”blueBackground boldText fontMedium”.

Komentarze – dobry kod nie wymaga komentarzy, ale czasami jest to nieuniknione. W CSS komentujemy w następujący sposób:
/* treść komentarza
dalsza część komentarza*/
To co znajduje się w komentarzu pomijane jest przez przeglądarkę. Teoretycznie możemy umieścić w komentarzu nawet własne style, ale one nie będą brane po uwagę. Często komentujemy niektóre style, aby zobaczyć jaki wpływ mają na nasz html (lub raczej jak brak danego stylu wpływa na nasz html).

Hierarchia – ze względu na 3 możliwe sposoby deklarowania stylów (mogą być zadeklarowane na 3 sposoby              naraz) musi być ustalona pewna hierarchia, inaczej przeglądarka nie widziałaby, jakich stylów użyć. Hierarchia            przedstawia się następująco – od najważniejszych do mniej ważnych:

• style jako atrybut w html
• style w sekcji head
• osobny plik podlinkowany

Podstawy jak to podstawy – warto dobrze zrozumieć, aby kolejne niepewności nie sprawiały nam kumulujących się problemów, co w rezultacie może prowadzić do zniechęcenia. To wszystko wygląda na skomplikowane, ale z czasem powinno wszystko być dla was proste. Najlepszym sposobem na utrwalanie jest używanie (ćwiczenie) swoich umiejętności. Spróbuj sam stworzyć prostego htmla i dołączyć różne style w tych 3 sposobach deklarowania stylów.
NP.
Stwórz html – 3 divy i nadaj dwóm klasy i jednemu id. Stwórz osobny plik css, podlinkuj do htmla, a następnie zadeklaruj kolor tła na niebieski dla pierwszego diva – odwołując się do elementu przez klasę. Przejdź do html i nadaj zielony kolor tła drugiemu divowi przez atrybut style. Przejdź do sekcji head w html i stwórz tagi style (otwierający i zamykający), a następnie odwołując się po id do ostatniego diva, nadaj mu kolo czcionki na różowy (pink).
PS. pamiętaj żeby dodać jeszcze wartości width i height np width: 50px; height: 50px; – wtedy kolory tła będą widoczne.

W razie pytań zapraszam do komentowania lub zadawania pytań na naszym fanpejdżu na facebooku.

Traktuj to jako fundamenty swojej wiedzy o CSS. Pierwszy krok za tobą w nowej technologii. Gratuluję i do zobaczenia w kolejnych tematach! 😉

Sebastian Mieszczańczyk

Studia: Wyższa Szkoła Ekonomii i Informatyki w Krakowie
Profil: “Informatyka i Ekonometria”
Specjalizacja: “Programowanie urządzeń mobilnych i aplikacji sieciowych”
Siatkówka (GeoVolley Team) na pozycji środkowego
Hobby:
Oprócz programowania i wszystkiego co z tym związane…
Filmy – od dawna pasjonuję się nie tylko oglądaniem filmów, ale także analizowaniem ich pod kątem stworzenia ( Mój link do filmweba) – w liceum dzięki profilowi z modułem filmowym mogłem wejść głębiej w szczegóły kadrów, ujęć itd.
Psychologia – niestety wciąż mam zbyt mało czasu na zagłębianie się w tą wiedzę 🙁