CSS

HTML og CSS eru grunnstoðirnar þegar það kemur að vefsíðum og útliti þeirra. HTML skilgreinir efni síðunnar en CSS skilgreinir hvernig efnið á síðunni lítur út.

CSS skammstöfunin stendur fyrir Cascading Style Sheets og snýst um að velja HTML tags til að segja til um hvaða stillingu eða reglu á að fylgja.

Hér er dæmi þar sem við erum að velja öll p tögg og stilla hvernig þau líta út:

p {
  font-size: 24px;
  font-family: "Times New Roman", Times, serif;
  font-weight: 600;
  color: red;
}

Hér sést svo hvernig p tag með ofangreindar reglur lítur út

Svo er algengt að við viljum láta hluti á síðu mynda röð eða dálk.

Ein leið til að ná fram slíkri virkni er með því að búa til div tag og setja það utan um það sem á að verða röð eða dálkur og svo velja þetta div með CSS selector og stýla það til.

<style>
  /* Hér er ég að velja tag sem hefur id="container" */
  #container {
    /* Þessi stilling leyfir mér að segja hvernig efnið á að raðast */
    display: flex;

    /* Hér er ég að segja að efnið eigi að mynda röð */
    flex-direction: column;

    /* Ef það er ekki nóg pláss, þá á efnið fara á nýja línu */
    flex-wrap: wrap;

    /* Hversu mikið bil á að vera á milli */
    gap: 32px;
  }
</style>

<div id="container">
  <div>
    <h2>Fyrirsögn 1</h2>
    <p>Lýsing 1</p>
  </div>
  <div>
    <h2>Fyrirsögn 2</h2>
    <p>Lýsing 2</p>
  </div>
  <div>
    <h2>Fyrirsögn 3</h2>
    <p>Lýsing 3</p>
  </div>
</div>

Ef ég t.d. vill ekki að efnið skoppi í nýja línu ef það er ekki nóg pláss þá get ég stillt flex-wrap sem no-wrap.

Og svo ef ég vill hafa þetta í dálk en ekki röð, þá get ég breytt flex-direction yfir í column

Endilega prófið ykkur áfram með HTML og CSS. Það er til haugur af efni á vefnum sem ég hvet ykkur eindregið til að nýta ykkur:

https://www.w3schools.com/css/default.asp

https://css-tricks.com/snippets/css/a-guide-to-flexbox/