CSS - jak dodać CSS

Aby zastosować styl CSS na swojej stronie internetowej, należy jej "wytłumaczyć", że ma stosować ustanowione przez nas reguły. Są na to 3 sposoby:

  1. Styl wpisany (lokalny)
  2. Styl wewnętrzny
  3. Styl zewnętrzny

Styl wpisany (lokalny)

Najprostszy sposób na zastosowanie stylu. Nadaje styl pojedynczym elementom html.

Użyteczny tylko w przypadku, gdy chcemy szybko i tylko w jednym miejscu zastosować dany styl. Na ogół niewygodny – musimy wpisywać go osobno dla każdego elementu, który chcemy zmienić. Jest to niewygodne, czasochłonne, łatwo popełnić błąd.

Aby użyć tego sposobu do znacznika dodajemy atrybut style, zaś w jego wartości podajemy właściwość CSS, którą chcemy zastosować, oraz jej wartość:

przykład zastosowania stylu lokalnego

Więcej informacji o stylu lokalnym znajdziesz TUTAJ


Styl wewnętrzny

Pozornie prosty i wygodny w zastosowaniu. Nadaje się do określania wyglądu pojedynczych stron. Jest elementem kodu html strony.

Nie jest praktyczny w przypadku witryn składających się z większej ilości stron (plików html)– aby zmienić wygląd wszystkich podstron, trzeba dokonywać zmian w każdym z plików.

Występuje zawsze w nagłówku strony (czyli w sekcji <head>). Wszystkie reguły zamknięte są w znaczniku <style> </style>.

Przykład zastosowania stylu wewnętrznego:

przykład zastosowania stylu wewnętrznego

Więcej informacji o stylu wewnętrznym znajdziesz TUTAJ


Styl zewnętrzny

Najlepszy sposób stosowania stylów CSS, zwłaszcza gdy witryna składa się z wielu stron. Kaskadowe arkusze stylów umieszczone są w osobnym pliku z rozszerzeniem .css.

Styl zewnętrzny jest najwygodniejszy, ponieważ wpisane w jednym miejscu reguły możemy stosować w wielu różnych stronach internetowych. Wystarczy "wytłumaczyć" plikowi html, że ma "słuchać" reguł wpisanych w pliku .css

Aby to uczynić - czyli aby zastosować styl z osobnego pliku do strony internetowej, należy w nagłówku strony umieścić następującą linijkę kodu:

przykład zastosowania stylu zewnętrznego

Więcej informacji o tym, jak dołączyć zewnętrzny arkusz stylów do dokumentu html znajdziesz TUTAJ