public/uni
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add css demos for 223015c chapter 2: selectors, specificity, box-model, colors, pseudo, responsive

Browse Source
This commit is contained in:
Michael Czechowski
2026-04-20 10:53:11 +02:00
parent a2934f1327
commit fb361a2854
35 changed files with 747 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
slides/223015c/assets/demos/css-pseudo-elements.html Normal file
View File

@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Pseudo-Elemente</title>
<style>
body { padding: 1.2rem; font-family: system-ui, sans-serif; font-size: 14px; }
.required::before {
content: "* ";
color: red;
}
p.drop::first-letter {
font-size: 2em;
font-weight: bold;
color: #d63384;
float: left;
line-height: 1;
padding-right: 4px;
}
label { display: block; margin-top: 10px; }
input { padding: 4px 8px; border: 1px solid #9ca3af; border-radius: 3px; margin-top: 3px; }
h3 { margin: 0.6rem 0 0.3rem; font-size: 0.95rem; }
</style>
</head>
<body>
<h3>::before (Pflichtfeld-Sternchen)</h3>
<label class="required">E-Mail-Adresse</label>
<input type="email">
<h3>::first-letter (Initial-Buchstabe)</h3>
<p class="drop">Lorem ipsum dolor sit amet. Der erste Buchstabe wird per CSS hervorgehoben – kein extra HTML nötig.</p>
</body>
</html>