css

CSS

Einbindung

inline
```
mies
```

<style>


<head>

.css Datei 👍
```
<head>
    
```

Rules

selector {
    property: value;
    property: value;
    property: value;
}

eine Rule gilt für alle selektierten Elemente

setzt die angeführten properties

values können durch spezifischere selectors überschrieben werden

.text1 {
    font-size: 20px;
}

#menu-bar {
    float: left;
    color: #BBB529;
}

@media (max-width: 1199px) {
    font-size: 16px;
}

body {
    background: url("barn.jpg"), 
        url("stars.jpg"), 
        linear-gradient(
            rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)
        );
}

h1 {
    background–color: purple;
}

Simple selectors

alle Elemente eines Typs

html-tag { }
p { }

ein Element mit einer bestimmten id (unique)

#id { }
#next-button { }

<button id="next-button">Next</button>

alle Elemente einer Klasse

.class { }
.menu-item { }

<a class="menu-item" href="help.html">Help</a>

ein child innerhalb eines parents

parent child { }
li em { }

ein second direkt nach einem first

first + second { }
h1 + p { }

alle Elemente

* { }

Wichtige properties

Schriftfarbe

color: red;
color: #FF00FF;

Rahmen

border: 2px solid #123456;
border: breite typ farbe

Höhe / Breite

width: 200px;
height: auto;

Background

background: grey;

background: url('https://www.htlstp.ac.at/logo') grey;

background: center/100% url('https://www.htlstp.ac.at/logo') grey;

background: no-repeat 
    center/100% 
    url('https://www.htlstp.ac.at/logo') 
    grey;

Font

font: 1em "Comic Sans MS";

1em = aktuelle Fontgröße

font: 2em "JetBrains Mono";

1em default = 16px

font: bold 32px  "Courier New";

32px, immer; 4k Displays...

State-based Styling

a:link {
    color: dodgerblue;
}

a:visited {
    color: green;
}

a:hover {
    font-size: 1.5em;
    text-decoration: none;
}