# CSS-Explained

## Intro
This is all about the things I learned the last few years working as a frontend designer. There have been many times I got so frustrated with the way CSS works (or doesn't in many situations).
Often it was trial and error to get something done and more than once I stared at my display questioning my sanity for what I was seeing. Because I thought I knew what I was doing. In most cases I was wrong. Because I didn't understand all the details. In my opinion these details are very important to get the whole picture of how CSS works.   

### Disclaimer
I used Codepen to create the examples and images in this guide 

## Index

## Background Infos
- ** TBD **







A Site to remember all the important, way-to-complex and boring stuff about CSS. Bis zur Übersetzung ist dieser Text auf Deutsch

## Browser
- **TBD**

## Spezifität von CSS Selektoren
- **TBD**

## Initialwerte / Defaults

Jedes HTML-Element besitzt Initialwerte für bestimmte Eigenschaften. Leider sind diese nicht immer ganz selbsterklärend. Eine gute Übersicht findet sich hier: https://www.w3schools.com/cssref/css_default_values.asp

Es kann nicht schaden sich für häufig genutzte Elemente zu merken, welche Layout Eigenschaften sie mitbringen. Im Beispiel:
- Der body hat die Eigenschaften: *display: block* und *margin: 8px*
- Überschriften haben die Eigenschaft *display: block*
- Container haben die Eigenschaft *display: block*

### Tipps zu Initialwerten
- Initialwerte werden meist in einer **reset.css** Datei auf die gewünschten Werte festgelegt


## Vererbung von Eigenschaften
- **TBD**

## Layout einer Seite aufbauen
Quelle: [https://developer.mozilla.org/de/docs/Web/CSS/display](https://developer.mozilla.org/de/docs/Web/CSS/display)

*Display* gibt das grundlegende Layoutverhalten eines Elementes an. Hier die gebräuchlichsten: (Die vollständige Liste erreicht man über den Link unten).

- none
- inline (Initialwert)
- inline-block
- block
- flex
- grid
- table
- 

### display: none
Blendet das Element und sämtliche Unterelemente aus. Die Seite wird gerendet, wie als wenn das Element nicht im DOM existieren würde

### display: inline vs. display: block
- *inline* Elemente nehmen nur so viel Platz ein, wie ihr Inhalt benötigt
  - **Wichtig** *inline* Elemente nehmen keine Werte für *margin* an.
- *block* Elemente nehmen immer die gesamt verfügbare Breite ein
- *inline-block* Elemente verhalten sich grundsätzlich wie *block* Elemente. Teilen sich mehrere *inline-block* Elemente die verfügbare Breite, verhalten sie sich wie *inline* Elemente
  - **Wichtig** *inline-block* Elemente können Werte für *margin* annehmen.

![](http://)

## Tipps und häufige Fragen
### Die Seite hat einen Abstand zum Browserfenster
- Auch das Body-Element hat Initialwerte, zu denen ein *margin* gehört. Dieses kann über *margin: 0* entfernt werden.

### 2 Wege Elemente auszublenden
- Ein *display: none* Element wird für den Aufbau der Seite komplett ingnoriert. Das Element nimmt keinen Platz auf der Seite ein
- Mit *visibility: hidden* wird das Element nur ausgeblendet, sprich unsichtbar gemacht. Es nimmt weiterhin Platz auf der Seite ein.