# 7. 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`.

```html
<!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.

<figure><img src="https://3876702757-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8htinEZYbP2Js3yNtq9f%2Fuploads%2FmfCccacliaJsnJtA3SiM%2Fimage.png?alt=media&#x26;token=f093c75c-558b-482a-ae7e-c7fe61cf0c83" alt=""><figcaption></figcaption></figure>

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:

```css
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:

```html
<!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:

<figure><img src="https://3876702757-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8htinEZYbP2Js3yNtq9f%2Fuploads%2FNCZyXHzzJhlJNUoPNnzZ%2Fimage.png?alt=media&#x26;token=d1278961-90dc-49dd-a946-7c8fe4271280" alt=""><figcaption></figcaption></figure>

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:

```html
<!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
