CSS (Cascading Style Sheet) definiert die Darstellung einer Website in HTML. 


  * [[https://www.w3schools.com/cssref/css_selectors.asp|Selektoren]]
  * [[https://www.w3schools.com/cssref/css_animatable.asp|Animationen]]
  * [[https://www.w3schools.com/cssref/css_functions.asp|Funktionen]]
  * [[https://www.w3schools.com/Css/css3_mediaqueries_ex.asp|Media Queries]]

=====Positionierung=====

  * **static** (Standard): Das Element wird im normalen HTML-Fluss positioniert.
  * **relative**: Das Element wird relativ zur normalen Position verschoben. Dabei bleibt der Raum, den es normalerweise einnehmen würde, erhalten.
  * **absolute**: Das Element wird relativ zum nächstgelegenen positionierten Vorgängerelement verschoben, wenn es eins gibt. Andernfalls wird es relativ zum Ancestor verschoben, der den position: relative-Wert hat.
  * **fixed**: Das Element wird relativ zum Browserfenster positioniert und bleibt dort, auch wenn die Seite gescrollt wird.
  * **sticky**: Das Element verhält sich wie relative, bis es die angegebene Schwelle erreicht, dann wird es verhält es sich wie fixed.

[[https://jsfiddle.net/w2af3hp4/|Positions - JSFiddle]]

=====Masseinheiten=====

CSS verfügt über mehrere verschiedene Einheiten zum Ausdrücken einer Länge wie "width", "height" usw. Die Länge ist eine Zahl gefolgt von einer Längeneinheit, z. B. 10 Pixel, 2 Em usw.

Es gibt absolute Einheiten


  * cm - centimeters
  * mm - millimeters
  * in - inches (1in = 96px = 2.54cm)
  * px - pixels (1px = 1/96th of 1in)
  * pt - points (1pt = 1/72 of 1in)
  * pc - picas (1pc = 12 pt) 

Relative Masseinheiten

  * em - Relative to the font-size of the element (2em means 2 times the size of the current font) 	
  * ex - Relative to the x-height of the current font (rarely used) 	
  * ch - Relative to the width of the "0" (zero) 	
  * rem - Relative to font-size of the root element 	
  * vw - Relative to 1% of the width of the viewport* 	
  * vh - Relative to 1% of the height of the viewport* 	
  * vmin - Relative to 1% of viewport's* smaller dimension 	
  * vmax - Relative to 1% of viewport's* larger dimension 	
  * % - Relative to the parent element

=====Elemente=====

CSS Elemente werden anhand ihrer "Klasse" oder "Id" identifiziert. Mehrere Elemente können die selbe "Klasse" haben, "Id"s sollten aber eindeutig sein um eindeutigen Zugriff auf Elemente zugewährleisten. (siehe Selektoren)

In der Definition (dem Stylesheet) werden "Klassen" mit einem "." (Punkt) davor gekennzeichnet, "Id"s mit einer "#" (Raute).

<code>
<style>
    .testClass { background: yellow; }
    #a { color: red; }
    #b { color: blue; }
    #c { color: green; }
</style>

<div class="testClass" id="a">a</div>
<div class="testClass" id="b">b</div>
<div class="testClass" id="c">c</div>
</code>

=====Grid=====

[[https://www.youtube.com/watch?v=EiNiSFIPIQE|CSS Grid Tutorial]]

=====Animations=====

[[https://www.youtube.com/watch?v=SgmNxE9lWcY|CSS Animations in 20 minutes]]
=====Responsive Video Container=====

<code>
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.video-container iframe,  
.video-container object,  
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

<div class="video-container">
    <iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>
</div>
</code>

=====FullScreen Image Banner =====

<code>
<div style="background:url('https://cdn.zarat.ml/images/large/1.jpg'); min-height: 100%; background-position: center; background-size: cover;">
    <div class="z-display-middle" style="white-space:nowrap;">
        <span class="z-center z-padding-large z-xlarge z-wide z-animate-opacity">Introduction</span>
    </div>
</div> 
</code>

=====calc=====

You can use variables and calculate them.

<code>
<style>
div {
  --a: 1em;
  --b: 2em;
  padding: calc( var(--b) + var(--a) );
  background: #e53b2c;
}
</style>
<div>Hello world</div>
</code>

=====Animationen=====

<code>
@keyframes splash {
    0% {
        opacity: 0;
        transform: scale(0, 0);
    }
    50% {
        opacity: 1;
        transform: scale(1.1, 1.1);
    }
    100% {
        transform: scale(1, 1);
    }
}

@keyframes splash {
    from {
        opacity: 0;
        transform: scale(0, 0);
    }
    to {
        transform: scale(1, 1);
    }
}

#div {
    animation: splash 1s normal forwards ease-in-out;
}
</code>

=====Pseudo Elements=====

<code>
<style>
body, html {
    padding: 0px;
    margin: 0px;
}
.wrapper {
    display: inline-block;
    position: relative;
    padding: 10px 30px 10px 10px;
}
.wrapper:after {
    content: "\2bc6";
    position: absolute;
    top: 0.5em;
    right: 0.5em;
}
</style>

<div class="wrapper">Fake Dropdown</div>
</code>

=====Variablen=====

Define Variables:
To define a variable, use the -- prefix followed by the variable name and the value you want to assign to it. Variables are typically defined in the :root pseudo-class, which makes them available globally throughout the stylesheet.


<code css>
:root {
  --primary-color: #007bff;
  --font-size-large: 18px;
}
</code>

2. Use Variables:
You can use variables by referencing them using the var() function. This function takes the variable name as an argument and returns its value.


<code css>
body {
  font-size: var(--font-size-large);
  color: var(--primary-color);
}
</code>

3. Updating Variables:
Changing the value of a variable is as simple as modifying it in the :root block. This change will be automatically applied wherever the variable is used.


<code css>
:root {
  --primary-color: #ff9900;
}
</code>

4. Fallback Values:
You can provide a fallback value for variables in case they are undefined. This can be helpful for maintaining compatibility with older browsers.


<code css>
body {
  background-color: var(--background-color, white);
}
</code>

5. Scoping:
Variables are scoped to their respective elements. If you define a variable within a specific selector, it will only be available within that scope and its children.

<code css>
.button {
  --button-color: red;
  background-color: var(--button-color);
}
</code>
=====Links=====

  * Path & Clipping https://css-tricks.com/clipping-masking-css/
  * CSS fullscreen background video: https://slicejack.com/fullscreen-html5-video-background-css/
  * Media Queries: [[https://www.w3schools.com/css/css_rwd_mediaqueries.asp|3]]
  * Pure CSS Tabs: https://codepen.io/renatorib/pen/rlpfj
  * Pure CSS Accordeon: https://codepen.io/raubaca/pen/PZzpVe