# 15. Wartość "inherit"

W poprzedniej części kursu CSS poznaliśmy na jakiej zasadzie działa dziedziczenie właściwości CSS, jednak nie zapoznaliśmy się z wartością `inherit`, ponieważ wspomniana wartość zostanie omówiona w tej części kursu CSS.

Na wstępie należy zaznaczyć, że niektóre właściwości CSS nie posiadają wartości `inherit`, jednak zdecydowana większość właściwości CSS posiada wspomnianą wartość.\
\
Z poprzedniej części kursu CSS powinniśmy wiedzieć, co to jest element "rodzic", a co element "dziecko".\
\
Jeżeli umieścimy jeden element HTML w drugim to będą one tworzyły hierarchię typu element "rodzic" (ten, w którym umieszczamy inny element) i element "dziecko" (element umieszczony w innym elemencie).\
\
Na początek przyjrzyjmy się dokumentowi HTML, który został omówiony w poprzedniej części kursu CSS.

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

    <style>
      body {
        color:red;
        border:1px solid black;
      }
    </style>
  </head>

  <body>

    <div>
      <p>pierwszy element - p <span>to jest element - span</span></p>
    </div>

    <p>drugi element - p</p>

  </body>
</html>
```

Rezultat po wyświetleniu w oknie przeglądarki internetowej:

<figure><img src="https://3876702757-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8htinEZYbP2Js3yNtq9f%2Fuploads%2FJgfKFGZqU3QJ2LbTGOPX%2Fimage.png?alt=media&#x26;token=eed684c0-e557-4199-8bca-3ebff64af4b4" alt=""><figcaption></figcaption></figure>

W poprzedniej części kursu CSS powiedzieliśmy sobie, że niektóre właściwości CSS mogą być automatycznie dziedziczone od elementu "przodka" przez kolejnych jego "potomków" i właśnie taką właściwością jest właściwość `color`, dlatego tekst we wszystkich elementach, które zostały wyświetlone powyżej, jest koloru czerwonego.\
\
W poprzedniej części kursu CSS powiedzieliśmy sobie również, że niektóre właściwości CSS nie mogą być automatycznie dziedziczone i właśnie taką właściwością jest właściwość `border`, która odpowiada za styl obramowania elementu HTML. W tym momencie przychodzi nam na pomoc wartość `inherit`, dzięki której możemy "wymusić" dziedziczenie (lecz owe "wymuszenie" zadziała tylko na "dzieciach" danego elementu "rodzica").\
\
Wspomniana sytuacja została zaprezentowana w kodzie dokumentu HTML, który został umieszczony poniżej.

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

    <style>
      body {
        color:red;
        border:1px solid black;
      }

      .dziedzicz {
        border:inherit;
      }
    </style>
  </head>

  <body>

    <div>
      <p class="dziedzicz">pierwszy element - p <span>to jest element - span</span></p>
    </div>

    <p class="dziedzicz">drugi element - p</p>

  </body>
</html>
```

Rezultat po wyświetleniu w oknie przeglądarki internetowej:

<figure><img src="https://3876702757-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8htinEZYbP2Js3yNtq9f%2Fuploads%2FjGMvnFbQ3xmAXnft0vb3%2Fimage.png?alt=media&#x26;token=fa7f5690-1b8f-4e87-b1e2-1899cbfec330" alt=""><figcaption></figcaption></figure>

Jak możemy zauważyć, od tej pory, drugi element `p` posiada obramowanie, które jest takie samo jak obramowanie jego rodzica, czyli elementu `body`, ponieważ do wspomnianego elementu `p` została dodana reguła CSS, za pomocą selektora `.dziedzicz`, w której to regule CSS użyliśmy wartość `inherit` wraz z właściwością, która ma zostać odziedziczona przez dany element od elementu rodzica. W naszym wypadku tą właściwością jest właściwość `border`.\
\
Do pierwszego elementu `p` również została dodana wspomniana reguła CSS, za pomocą selektora `.dziedzicz`, jednak element ten nie odziedziczył właściwości `border` od swojego rodzica, ponieważ dla rodzica pierwszego elementu `p`, czyli elementu `div`, nie została określona żadna reguła CSS, która zawierałaby w sobie właściwość `border`.\
\
W momencie gdy dodamy atrybut `class` wraz z wartością `dziedzicz`, do elementu `div`, w naszym przykładzie, to zarówno pierwszy element `p`, jak i jego rodzic, czyli element `div`, odziedziczą taki sam styl obramowanie od elementu `body`. Wspomniana sytuacja została zaprezentowana w przykładzie znajdującym się poniżej (dodatkowo do elementów zostały dodane zewnętrzne marginesy `margin`, dla polepszenia widoczności ich obramowań).

<figure><img src="https://3876702757-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8htinEZYbP2Js3yNtq9f%2Fuploads%2FxDAnbV4wCvSojtHqA5eS%2Fimage.png?alt=media&#x26;token=81a8ecbd-6f21-4680-9309-efd545e837c8" alt=""><figcaption></figcaption></figure>

Kod HTML ostatniego przykładu został umieszczony pod spodem:

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

    <style>
      body {
        color:red;
        border:1px solid black;
      }

      .dziedzicz {
        border:inherit;
        margin:15px;
      }
    </style>
  </head>

  <body>

    <div class="dziedzicz">
      <p class="dziedzicz">pierwszy element - p <span>to jest element - span</span></p>
    </div>

    <p class="dziedzicz">drugi element - p</p>

  </body>
</html>
```

Wartość `inherit` nie jest za często wykorzystywana, lecz warto wiedzieć o jej istnieniu.\
\
W następnej części kursu CSS poznamy różne typy selektorów CSS.
