HTML- und CSS-Quiz

HTML und CSS bilden die Basis jeder Website. Die grundlegenden Techniken sind leicht zu erlernen. Aber bei den Feinheiten wird es schnell komplexer. Wie gut kennen Sie sich aus?

Testen Sie Ihr Wissen

Wir starten das Quiz mit ein paar einfachen Fragen rund um CSS-Basics. Welche Farbe erhält die h1 im folgenden Codebeispiel? h1 { color: blue; } #headline { color: red; } h1.teaser { color: green; } .teaser { color: black; } <h1 class="teasers">Text</h1> a Blau b Rot c Grün d Schwarz

2 Margin

Wie groß ist der Abstand zwischen der h1 und der h2 in folgendem Code? <h1>Margins</h1> <h2>Ein einfaches Beispiel</h2> h1 { padding: 0; margin-bottom: 30px; } h2 { padding: 0; margin-top: 40px; } a 30 Pixel + 40 Pixel = 70 Pixel, einfach beide margins addiert. b 30 Pixel, die h1 ist wichtiger als die h2. c 40 Pixel, in solchen Fällen wird der größere der beiden Werte genutzt. d 78 Pixel, weil der Browser automatisch noch 8 Pixel ergänzt.

3 Box-Modell

Gegeben sei folgender Code. Wie breit sind jeweils die kompletten roten Bereiche bei den beiden divs? <div id="box1"></div> <div id="box2"></div> div { background-color: red; width: 200px; height: 200px; padding: 20px; border: 5px solid red; } #box2 { box-sizing: border-box; } a Beide Boxen sind 200 Pixel breit. b Beide Boxen sind 250 Pixel breit. c #box1: 250 Pixel / #box2: 200 Pixel d #box1: 250 Pixel / #box2: 210 Pixel

4 Akkordeon

Seit HTML 5.1 gibt es direkt in HTML eine native Möglichkeit, per Klick auf ein Element weitere Informationen aus- und wieder einzuklappen. Wie lautet die benötigte Syntax? a <details> <summary>Sichtbarer Text</summary> <p>Weitere Informationen</p> </details> b <accordion> <accitem>Sichtbarer Text</accitem> <accinfo>Weitere Informationen </accinfo> </accordion> c <acc> <accterm>Sichtbarer Text</accterm> <accdef>Weitere Informationen </accdef> </acc> d <summary id="example"> Sichtbarer Text</summary> <details for="example">Weitere Informationen</details>

5 Selektoren

Gegeben sei folgender Code. Welcher Selektor sorgt dafür, dass nur der erste Absatz angesprochen wird? <h1>Selektoren</h1> <p>Absatz 1</p> <p>Absatz 2</p> <p>Absatz 3</p> a h1 p b h1 + p c h1 ~ p d h1 > p

6 display

In den letzten Jahren sind immer neue Schlüsselwörter für die Eigenschaft display hinzugekommen. Zum Beispiel für Flexbox und Grids. Welches der folgenden Schlüsselwörter gibt es nicht? a display: table; b display: touch; c display: ruby; d display: contents;

7 Inline-Block

Warum gibt es in folgendem Code einen Abstand zwischen den div- Containern (siehe Abbildung)? div { height: 600px; width: 200px; background: Crimson; display: inline-block; } <div></div> <div></div> <div></div>

8 Padding

Die letzten Fragen richten sich eher an die fortgeschrittenen Frontend-Entwickler. Wie groß wird die sichtbare rote Fläche des lis in folgendem Beispiel? * { margin: 0; padding: 0; } ul { width: 300px; height: 600px; } li { width: 200px; height: 0; paddingtop: 50%; background: Crimson; } <ul>

<li></li> </ul> a 200 Pixel × 0 Pixel, weil die Höhe auf 0 gesetzt wird. b 200 Pixel × 300 Pixel, die Hälfte von der Höhe der ul. c 200 Pixel × 100 Pixel, die Hälfte von der Breite der li. d 200 Pixel × 150 Pixel, die Hälfte von der Breite der ul.

9 Krumme Pixel

Monitore arbeiten pixelbasiert. Andererseits gibt durchaus Möglichkeiten, ein Subpixel-Rendering einzusetzen. Wie dick wird der folgende border dargestellt? div { border: 1.5px solid #000; } a Krumme Pixelwerte sind nicht erlaubt, die ganze Zeile wird ignoriert. b Der Wert wird auf 2 Pixel aufgerundet. c Der Wert wird auf 1 Pixel abgerundet. d Das Verhalten hängt vom Browser ab. a Fangfrage! Die Elemente liegen genau ne

beneinander. Es gibt gar keinen Abstand. b Das liegt an Defaultwerten in den Browsern. Mit der Angabe margin: 0; gibt es keinen Abstand mehr. c Es liegt an den Zeilenumbrüchen zwischen den divs. Ohne Abstand zwischen schließendem und öffnendem div verschwinden auch die Abstände. d Das passiert nur im alten Internet Explorer 8 aufgrund eines Bugs. In modernen Browsern stehen die divs direkt nebeneinander.

10 Chuck Norris

Wie stellen Browser die hier notierte bgcolor dar? <body bgcolor=“chucknorris“> a Das Attribut bgcolor ist veraltet und wird von Browsern nicht mehr unterstützt, also ignoriert. d Da chucknorris kein erlaubter Farb

wert ist, wird der Wert ignoriert. c Der Hintergrund der Website wird

dunkelrot eingefärbt. d Man aktiviert ein verstecktes Easter

Egg, allerdings nur in Chrome.