Dołączanie arkuszu CSS do HTML

pytanie zadane 9 września 2018 w HTML i CSS przez johnnyg Nowicjusz (120 p.)

Witam,

Niedawno rozpocząłem swoją przygodę z HTML i CSS poprzez tworzenie pierwszych stron internetowych (banalnych rzecz jasna). Natknąłem się na pewien problem gdy, wszystko zgodnie z podręcznikiem, chciałem dodać arkusz CSS. Nie mam zielonego pojęcia dlaczego zmiany nie chcą zaskoczyć. Próbowałem znaleźć informacje w internetach ale niestety na próżno. Uprzedzając pytania, wszystkie literówki w nazwach plików sprawdzałem trylion razy oraz oba pliki znajdują się w tym samym folderze. Poniżej przesyłam kawałek HTML i CSS. Ktoś pomoże mi rozwikłać tę zagadkę?

HTML

<!DOCTYPE html>
<html class="no-js" lang="pl">
  <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <title> Przepis na Babeczki </title>
  <meta name="description" content="Idealne Babeczki">
    <link rel="stylesheet" href="css/styles.css" type="text/css">
    </head>

CSS :

@media screen and (min-width: 50rem) {
  .introwrapper {
    display: table;
    table-layout: fixed;
    width: 100%;

  }
  .introtext {
    display: table-cell;
    width: 50%;
    vertical-align: middle;
    text-align: center;

  }
  .introtext {
    padding: .51rem;
    font-size: 2.5rem;
    text-align: left;

  }
  .ingredients {
    font-size: 9rem;
    float: right;
    padding: 1rem;
    margin: 0 0 .5rem 1rem;
    border-radius: 3px;
    background-color: #ffffdf;
    border: 2px solid #e8cfa9;

  }
  .ingredients h3 {
    margin: 0;
  }
}

2 odpowiedzi

odpowiedź 9 września 2018 przez hun1er76 Stary wyjadacz (11,960 p.)

Skoro

oba pliki znajdują się w tym samym folderze

to linkowanie powinno mieć postać

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

komentarz 9 września 2018 przez johnnyg Nowicjusz (120 p.)

Pomogło

Dzięki wielkie!

odpowiedź 9 września 2018 przez Kamil110501 Bywalec (2,490 p.)

Struktura plików:

Folder:

-index.html

-style.css

Kod:

<!DOCTYPE html>
<html class="no-js" lang="pl">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title> Przepis na Babeczki </title>
    <meta name="description" content="Idealne Babeczki">
    <link href="style.css" rel="stylesheet">
  </head>
  <body>
  </body>
</html>

@media screen and (min-width: 50rem) {
  .introwrapper {
    display: table;
    table-layout: fixed;
    width: 100%;

  }
  .introtext {
    display: table-cell;
    width: 50%;
    vertical-align: middle;
    text-align: center;

  }
  .introtext {
    padding: .51rem;
    font-size: 2.5rem;
    text-align: left;

  }
  .ingredients {
    font-size: 9rem;
    float: right;
    padding: 1rem;
    margin: 0 0 .5rem 1rem;
    border-radius: 3px;
    background-color: #ffffdf;
    border: 2px solid #e8cfa9;

  }
  .ingredients h3 {
    margin: 0;
  }
}

i o ile kod w css jest dobrze to będzie wszystko działać kod w css poprostu skopiowałe i wkleiłem

bo jeśli są w tym samym folderze to po co href="css/styles.css"? to oznaczało by że arkusz tylów jest w podfolderze o nazwie css