Style CSS w części "head" dokumentu HTML

W poprzedniej części kursu CSS poznaliśmy sposób na tworzenie prostych reguł CSS oraz zmieniliśmy wygląd przykładowych elementów HTML, jednak nie dodaliśmy utworzonych reguł CSS do kodu dokumentu HTML i właśnie tą czynnością zajmiemy się w tej części kursu CSS.

Za pomocą Notepad++ otwieramy nasz plik strona.html i do części body dodajemy po jednym elemencie p oraz div.

<!DOCTYPE html>
<html>
  <head>

  </head>

  <body>

    <p>to jest element - p - umieszczony w elemencie - body</p>
    <div>to jest element - div - umieszczony w elemencie - body</div>

  </body>
</html>

Po wyświetleniu naszego pliku strona.html w oknie przeglądarki internetowej naszym oczom ukażą się dwie linijki tekstu.

to jest element - p - umieszczony w elemencie - body

to jest element - div - umieszczony w elemencie - body

Naszym celem w tej części kursu CSS, podobnie jak w poprzedniej części kursu CSS, będzie dodanie nowego koloru tła do elementu div oraz obramowania do elementu p. Jeżeli chodzi o reguły CSS, to możemy wykorzystać te, które utworzyliśmy w poprzedniej części kursu CSS, czyli:

div {
  background-color:lightblue;
}

p {
  border:1px solid black;
}

Po dodaniu reguł CSS, które zostały zaprezentowane powyżej, do dokumentu HTML, zmienią one wygląd poszczególnych elementów HTML, czyli elementów div oraz p.

Jednym ze sposobów na dodanie reguł CSS do dokumentu HTML jest umieszczenie ich w elemencie style, który z kolei należy umieścić w części head dokumentu HTML. Cały poprawny zapis wraz z komentarzem został przedstawiony w kodzie HTML, który został umieszczony poniżej:

<!DOCTYPE html>
<html>
  <head>

  <!-- pod spodem znajduje się element style, w którym definiujemy reguły CSS, za pomocą których możemy zmienić styl wyglądu poszczególnych elementów w danym dokumencie HTML -->

    <!-- POCZĄTEK REGUŁ CSS -->
    <style>
      div {
        background-color:lightblue;
      }

      p {
        border:1px solid black;
      }
    </style>
    <!-- KONIEC REGUŁ CSS -->
  </head>

  <body>

    <p>to jest element - p - umieszczony w elemencie - body</p>
    <div>to jest element - div - umieszczony w elemencie - body</div>

  </body>
</html>

Warto zauważyć, że do utworzenia reguły CSS w przykładzie przedstawionym powyżej, został wykorzystany selektor elementu, który tworzymy za pomocą nazwy danego elementu HTML, czyli w tym wypadku użyliśmy nazwy div oraz p. Bliżej z selektorami zapoznamy się w następnej części tego kursu CSS.

Po dodaniu do naszego pliku strona.html kodu HTML, który został przedstawiony powyżej, nasze elementy HTML, po wyświetleniu ich w oknie przeglądarki internetowej, będą prezentować się w następujący sposób:

to jest element - p - umieszczony w elemencie - body

to jest element - div - umieszczony w elemencie - body

Ponadto, żeby nie generować błędów w kodzie HTML należy dodać do części head, takie elementy jak:

  • <meta charset="utf-8">
  • <title>Miejsce na tytuł danej podstrony</title>

Pierwszy z nich będzie odpowiadał za kodowanie znaków w danym dokumencie HTML, a drugi z nich będzie odpowiadał za tytuł danej podstrony wyświetlany w zakładce przeglądarki internetowej.

Cały poprawny zapis został przedstawiony w kodzie HTML, który znajduje się poniżej:

<!DOCTYPE html>
<html>
  <head>

    <!-- kodowanie znaków - utf8, dzięki czemu możemy wyświetlić, np. polskie znaki -->
    <meta charset="utf-8">

    <!-- tytuł dokumentu HTML, wyświetlany w zakładce przeglądarki internetowej -->
    <title>Miejsce na tytuł danej podstrony</title>

    <style>
      div {
        background-color:lightblue;
      }

      p {
        border:1px solid black;
      }
    </style>
  </head>

  <body>

    <p>to jest element - p - umieszczony w elemencie - body</p>
    <div>to jest element - div - umieszczony w elemencie - body</div>

  </body>
</html>

Jeżeli po wyświetleniu danego dokumentu HTML, w oknie przeglądarki internetowej, nadal nie możesz zobaczyć polskich znaków, takich jak: ą, ę, ó itp. to należy dodatkowo, za pomocą Notepad++, zmienić kodowanie dokumentu na UTF-8 bez BOM (Format -> Koduj w UTF-8 (bez BOM) lub Format -> Konwertuj na format UTF-8 bez BOM).

Pod spodem zostały wyszczególnione zalety i wady umieszczania reguł CSS w elemencie style, w części head dokumentu HTML.

Zalety tej metody:

  • kod HTML w części body dokumentu HTML jest bardziej przejrzysty i pozbawiony atrybutów style
  • za pomocą odpowiednich selektorów możemy kontrolować wygląd większej grupy elementów HTML w danym dokumencie HTML

Wady tej metody:

  • brak skutecznej kontroli wyglądu danej grupy elementów w większej liczbie dokumentów HTML
  • wymagana znajomość różnych typów selektorów CSS, jednak bez ich znajomości staje się niemożliwym wykorzystanie w pełni możliwości języka CSS, dlatego poznawaniem selektorów CSS zajmiemy się w następnej części tego kursu CSS