Jak dodać CSS do HTML?

5 lipca, 2022

Nauka CSS najczęściej jest realizowana równolegle z nauką HTML i każda osoba stawiająca swoje pierwsze kroki przy tworzeniu stron internetowych musi nauczyć się tej technologii. Z poniższego tekstu dowiesz się jak dodać CSS do HTML tak żeby kod, który napisałeś wpływał na wygląd Twojej strony.

Czym właściwie jest CSS?

W dużym uproszczeniu strona internetowa składa się z dwóch części. Pierwsza część to HTML, która odpowiada za strukturę dokumentu, dzięki językowi HTML opisujemy elementy strony np. nagłówek, sekcję, paragraf itp. Za pomocą CSS (inaczej Kaskadowe Arkusze Stylów, od ang. Cascading Style Sheets) nadajemy im wygląd, czyli określamy wielkość, kolor, pozycjonowanie i ogólnie to jak dany element będzie wyglądał na stronie. Łączenie CSS z HTML pozwala na stworzenie pełnowartościowej strony internetowej.

Dzięki temu, że CSS jest odseparowany od struktury dokumentu łatwiej jest zarządzać stylami na stronie, przykładowo żeby zmienić rozmiar nagłówka na wszystkich podstronach serwisu wystarczy tylko jedna zmiana w arkuszu CSS. Nie trzeba zmieniać każdej podstrony osobno.

Jak dodać CSS do HTML?

Skoro arkusze CSS są odseparowane od struktury dokumentu to jak w takim razie dodać je do naszej strony? Istnieją trzy sposoby na dodanie CSS do HTML i to z jakiego sposobu skorzystasz może zależeć od konkretnego przypadku. Należy pamiętać o tym, że istnieje coś takiego jak hierarchia ważności stylów i polega ona na tym, że "działać" będzie styl, który został zdefiniowany w kodzie najpóźniej.

Dodanie CSS to HTML za pomocą zewnętrznego pliku

Jest to najpopularniejszy sposób podpinania CSS do HTML i wiążą się z nim wyżej wymienione korzyści związane z odseparowaniem pliku od struktury dokumentu. Żeby dołączyć CSS w za pomocą zewnętrznego pliku najpierw należy go utworzyć. Możemy go nazwać styles.css. Następnie w sekcji <head> naszego dokumentu HTML należy dodać następujący znacznik:

<!-- zewnętrzny arkusz CSS -->
<link rel="stylesheet" href="styles.css" />

Atrybut href określa ścieżkę do naszego arkusza, na powyższym przykładzie plik znajduje się w tym samym katalogu co plik .html, do którego go dołączamy.

Dołączanie CSS do HTML za pomocą znacznika <style>

Kolejnym sposobem na dodanie CSS jest użycie znacznika <style>. Powinniśmy dodać go w sekcji <head> dokumentu, który chcemy ostylować. Dodanie CSS w pliku HTML spowoduje nadpisanie stylów dodanych za pomocą zewnętrznego arkusza. Przykład użycia:

<!-- CSS w sekcji <head> -->
<style>
  p {
    color: black;
    font-size: 24px;
  }
</style>

Inline CSS, czyli dodanie styli za pomocą atrybutu “style”

Możemy również dodać CSS bezpośrednio do konkretnego elementu HTML za pomocą atrybutu style. Spowoduje to nadpisanie styli dodanych za pomocą metod wymienionych wcześniej. Przykład użycia:

<!-- inline CSS -->
<p class="description" style="color: black; font-size: 24px;">Lorem ipsum</p>

Hierarchia

Domyślnie hierarchia wygląda tak, że style dodane za pomocą inline CSS nadpisują te dodane z pomocą innych metod, a style dodane za pomocą znacznika <style> w sekcji <head> nadpisują te dodane za pomocą zewnętrznego arkusza.

Możemy jednak złamać hierarchią stosując klauzulę !important:

/* złamanie hierarchii */
p {
  color: red !important;
}

Mam nadzieję, że powyższy artykuł pomógł wam zrozumieć jak dodać CSS do HTML. Teraz zabierajcie się za kodowanie i twórzcie swoje pierwsze strony internetowe :)

Ostatnie wpisy