Element Gestaltung

HTML Elemente können mit verschiedenen CSS Eigenschaften gestaltet werden
nicht jedes HTML Element hat jede CSS Eigenschaft (kann definiert werden, aber ohne Auswirkung)
Größe und Abstand von anderen Elementen wird durch eine Box definiert

Box Model

box-model

Eigenschaft	Beschreibung
font	Schriftart des Inhalts
color	Farbe des Inhalts
text	-align, -indent, -decoration, -shadow für Textgestaltung
width, height	Breite und Höhe des Content Bereichs ^{ⓘmit der Eigenschaft box-sizing: border-box; sind padding und border mit in width und height integriert; kann mit * Selektor auf alle Elemente angewendet werden↩}
padding	transparenter Bereich um den Content
background	Hintergrund Gestaltung von Content + padding, z. B. Farbe, Bild
border	Gestaltung der Umrandung um den Content
box-shadow	Schatten Effekt für umrandeten Content
margin	transparenter Bereich außerhalb der Umrandung
overflow	Darstellung wenn Inhalt größer als Content Bereich (abschneiden, Scrollbar)

Kurzformat-Eigenschaften: Mehrere Eigenschaften in einem setzen (z. B. border statt, border-left, border-right, border-size, border-type, border-color)

HTML<nav class="mainNav">
  <a href="./index.html">Startseite</a>
  <a href="./about.html">Über uns</a>
  <a href="./contact.html">Kontakt</a>
  <a href="./gallery.html">Fotoalbum</a>
</nav>

CSSa {
  font: 14px Courier;
  text-decoration: none;
  color: white;
  padding: 0px 5px 0px 5px;
  border-right: 2px solid white;
}

.mainNav {
  height: 30px;
  background: darkblue;
  padding-top: 7px;
  padding-left: 5px;
  margin-top: 20px;
  box-shadow: 4px 6px grey;
  overflow: hidden;
}