display: none

Ha valami nem működik, érdemes mindig kipróbálni először, hogy a CSS kiválasztó (CSS selector) tényleg arra a dologra hivatkozik, amelyre szeretnéd. Ennek egy egyszerű trükkje például, ha egy, az oldalon látszó elemre ráhívod adisplay:none; stílust, és figyeled, hogy eltűnik-e az oldalról. Ha eltűnik (és csak az tűnik el, amit szerettél volna), akkor a selector valószínűleg jól funkcionál. Például most:

CSS
#clock {
  display: none;
}

Összefoglalás

Összefoglalás

Ebben a projektben a következő dolgokkal ismerkedtél meg:

HTML

HTML
<title>Az oldal címe</title>

<h1>A legfontosabb címsor</h1>
<h6>A legkisebb címsor</h6>

<figure>
  <img src="http://a-kep-cime.jpg" alt="alternatív szöveg">
  <figcaption>Képaláírás</figcaption>
</figure>

<article>
  <p>Bekezdés <a href="http://link-valahova.hu" title="A hivatkozott oldal címe">egy kattintható linkkel</a></p>
  <p>Egy másik bekezdés <strong>kiemelten hangsúlyos tartalommal</strong>.</p>
</article>

CSS

CSS
h1 {
  color:          rgba(0,0,0,.8);     // szín, (piros, zöld, kék, átlátszóság)
  font-family:    serif;              // betűtípus
  font-size:      36px;               // betűméret
  line-height:    1.58;               // sormagasság
  letter-spacing: -.003em;            // betűköz
  text-align:     center;             // szöveg igazítása
}

img {
  height:         auto;               // magasság
  width:          100%;               // szélesség
}

figure {
  margin:         0;                  // margó
}

article {
  margin:         0 auto;             // középre rendezett
}

a:hover {
                                      // az egér éppen ide mutat állapot
}