# 18. Kolejność otrzymywania właściwości CSS przez element HTML

Do tej pory poznaliśmy kilka sposobów formatowania wyglądu elementu HTML za pomocą reguł CSS, w których to regułach umieszczaliśmy różne właściwości CSS zmieniające daną cechę wyglądu elementu HTML. Czas abyśmy zapoznali się z kolejnością, z jaką dane miejsca, w których możemy definiować właściwości CSS, oddziałują na poszczególny element HTML. Inaczej mówiąc, czas abyśmy zapoznali się z kaskadowością występującą w CSS.

Pod spodem został umieszczony kod dokumentu HTML, jak również kod dwóch plików CSS, które zostały dołączone do tego dokumentu HTML.

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <link href="arkusz1.css" rel="stylesheet" >
    <link href="arkusz2.css" rel="stylesheet" >

    <style>
      body {
        font-size:24px;
        font-weight:bold;
      }
      p {
        color:red;
      }
    </style>
  </head>

  <body>

    <p style="color:black;">to jest przykładowy element - p</p>

  </body>
</html>
```

Kod pliku arkusz1.css

```css
p {
  color:gold;
}
```

Kod pliku arkusz2.css

```css
p {
  color:blue;
}
```

Analizując to co zostało przedstawione w kodzie dokumentu HTML i w dwóch plikach CSS, które zostały do tego dokumentu HTML dołączone, możemy dostrzec, że dokument HTML zawiera jeden element `p`, do którego jest dodawana, na różne sposoby i z różnymi wartościami, właściwość `color`.\
\
Pytanie brzmi: właściwość `color` z którą wartością ostatecznie zostanie dodana do naszego przykładowego elementu `p`? Czy może nasza przeglądarka internetowa pogubi się?\
\
Na szczęście nasza przeglądarka internetowa poradzi sobie z tą sytuacją, ponieważ nasza przeglądarka internetowa wie jak zachować się w przypadku wystąpienia takiej sytuacji, zna pewne zasady, które i my musimy poznać.\
\
Pierwszeństwo w takiej sytuacji będzie miała ta właściwość `color`, która została użyta w atrybucie `style`, w znaczniku danego elementu HTML, czyli w tym wypadku nasz kolor tekstu będzie czarny, za co odpowiada właściwość `color:black;`

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <link href="arkusz1.css" rel="stylesheet" >
    <link href="arkusz2.css" rel="stylesheet" >

    <style>
      body {
        font-size:24px;
        font-weight:bold;
      }
      p {
        color:red;
      }
    </style>
  </head>

  <body>

    <p style="color:black;">to jest przykładowy element - p</p>

  </body>
</html>
```

Dokument HTML, po wyświetleniu w oknie przeglądarki internetowej, prezentuje się następująco:

<figure><img src="https://3876702757-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8htinEZYbP2Js3yNtq9f%2Fuploads%2FvgFpaRXhG7njy7KUNnmt%2Fimage.png?alt=media&#x26;token=6ee40ac3-34d6-4564-a32c-c6620ca98ddc" alt=""><figcaption></figcaption></figure>

W momencie gdy usuniemy wspomnianą właściwość `color:black;` z atrybutu `style`, to pierwszeństwo będzie miała właściwość `color` umieszczona w części `head` dokumentu HTML, w elemencie `style`, który został umieszczony po ewentualnych, dołączonych do danego dokumentu HTML, plikach CSS, czyli w tym wypadku nasz kolor tekstu będzie czerwony, za co odpowiada właściwość `color:red;`

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <link href="arkusz1.css" rel="stylesheet" >
    <link href="arkusz2.css" rel="stylesheet" >

    <style>
      body {
        font-size:24px;
        font-weight:bold;
      }
      p {
        color:red;
      }
    </style>
  </head>

  <body>

    <p>to jest przykładowy element - p</p>

  </body>
</html>
```

Dokument HTML, po wyświetleniu w oknie przeglądarki internetowej, prezentuje się następująco:

<figure><img src="https://3876702757-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8htinEZYbP2Js3yNtq9f%2Fuploads%2FzmBGmviKCy6ecnE6aqcA%2Fimage.png?alt=media&#x26;token=65d56527-cad9-42d1-bc68-0f8003ccaa3f" alt=""><figcaption></figcaption></figure>

Jeżeli w następnym kroku usuniemy wspomnianą właściwość `color:red;` z elementu `style`, który został umieszczony w części `head` dokumentu HTML, to pierwszeństwo będzie miała właściwość `color` umieszczona w ostatnim dołączonym pliku CSS, do danego dokumentu HTML, czyli w tym wypadku tym plikiem będzie arkusz2.css, w którym występuje właściwość `color:blue;` czyli kolor tekstu w omawianym elemencie `p` będzie niebieski.

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <link href="arkusz1.css" rel="stylesheet" >
    <link href="arkusz2.css" rel="stylesheet" >

    <style>
      body {
        font-size:24px;
        font-weight:bold;
      }
    </style>
  </head>

  <body>

    <p>to jest przykładowy element - p</p>

  </body>
</html>
```

Dokument HTML, po wyświetleniu w oknie przeglądarki internetowej, prezentuje się następująco:

<figure><img src="https://3876702757-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8htinEZYbP2Js3yNtq9f%2Fuploads%2F1LanNiC8JCD4zCyEc5cv%2Fimage.png?alt=media&#x26;token=789394f7-d3f2-45a2-b311-d7787465f719" alt=""><figcaption></figcaption></figure>

Jeżeli w następnym kroku usuniemy linijkę kodu odpowiadająca za dołączenie pliku CSS - arkusz2.css, to pierwszeństwo będzie miała właściwość `color` umieszczona w ostatnim dołączonym pliku CSS, do danego dokumentu HTML, czyli w tym wypadku tym plikiem będzie arkusz1.css, w którym występuje właściwość `color:gold;` czyli kolor tekstu w naszym elemencie `p` będzie złoty.

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <link href="arkusz1.css" rel="stylesheet" >

    <style>
      body {
        font-size:24px;
        font-weight:bold;
      }
    </style>
  </head>

  <body>

    <p>to jest przykładowy element - p</p>

  </body>
</html>
```

Dokument HTML, po wyświetleniu w oknie przeglądarki internetowej, prezentuje się następująco:

<figure><img src="https://3876702757-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8htinEZYbP2Js3yNtq9f%2Fuploads%2FHjibwTFUgUZpO8TPRBig%2Fimage.png?alt=media&#x26;token=b0b4a270-12a9-44eb-b3c5-cf027a8339ba" alt=""><figcaption></figcaption></figure>

Analizując to co zostało do tej pory omówione w tej części kursu CSS, możemy dostrzec, że kolejność miejsc, z których przeglądarka internetowa pobiera właściwości CSS, dla danego elementu HTML, prezentuje się następująco (licząc od końca):

* ewentualny dołączony do danego dokumentu HTML zewnętrzny plik CSS
* kolejny ewentualny dołączony do danego dokumentu HTML zewnętrzny plik CSS
* element `style` umieszczone w części `head` dokumentu HTML, który został umieszczony po ewentualnych, dołączonych do danego dokumentu HTML, plikach CSS
* atrybut `style` danego elementu HTML

Należy pamiętać, że element `style` możemy umieszczać w różnej kolejności w części `head` dokumentu HTML wraz z innym dołączanymi plikami CSS, co również będzie miało wpływ na kolejność pobierania właściwości CSS dla danych elementów HTML przez naszą przeglądarkę internetową.\
\
Należy również pamiętać, że dany element HTML pozbawiony jakichkolwiek reguł CSS i właściwości CSS, może dziedziczyć niektóre właściwości CSS od swojego elementu "rodzica" lub "przodka", co zostało zaprezentowane w części przeznaczonej na omówienie dziedziczenia właściwości CSS.\
\
W następnej części kursu CSS poznamy na czym polega nadpisywanie się, czyli łączenie się ze sobą istniejących reguł CSS, ponieważ ten proces również ma wpływ na to, jakie właściwości zostaną ostatecznie dodane do danego elementu HTML.
