• de

CSS-Übungen

Einen Inline-Stil erstellen

Titel: Einen Inline-Stil erstellen
Beschreibung: Erstelle einen Inline-Stil, um die Farbe und Schriftgröße einer Überschrift zu ändern.
Anweisungen für Teilnehmer: Der folgende Code enthält eine in

-Tags eingeschlossene Überschrift „Große Überschrift“. Verwende einen Inline-Stil, um die Farbe der Überschrift in grün und die Schriftgröße in 16px zu ändern.
Datei für Teilnehmer (index.html):



Inline-Stile

Große Überschrift



Lösungsdatei:



Inline-Stile

Große Überschrift



Prüfcode:
// Erstes 'h1'-Element in der HTML-Seite abrufen
var s=document.querySelector("h1")
// Vorhandensein prüfen
if(s==null) {
return "Leider nicht richtig. Versuche es bitte noch einmal. Du musst ein Header-Tag (h1) erstellen.";
}
// Prüfen, ob das 'h1'-Element einen Stil enthält, der
// für die Farbe 'green' angibt
else if(s.style.color!="green") {
return "Leider nicht richtig. Versuche es bitte noch einmal. Hast du daran gedacht, den h1-Header grün zu formatieren?";
}
// Prüfen, ob das 'h1'-Element einen Stil enthält, der
// für die Schriftgröße 16px angibt
else if(s.style.fontSize!="16px") {
return "Leider nicht richtig. Versuche es bitte noch einmal. Die Schriftgröße der Überschrift ist nicht 16px.";
} else {
return true;
}

Einem Element einen einfachen Inline-Stil hinzufügen

Titel: Einem Element einen einfachen Inline-Stil hinzufügen
Beschreibung: Füge einem Element einen Inline-Stil hinzu, um seine Schriftfarbe zu ändern.
Anweisungen für Teilnehmer: Der folgende Code enthält ein -Element, das den Text „rot“ einschließt. Füge dem -Element einen Inline-Stil hinzu, um die Textfarbe in rot zu ändern.
Datei für Teilnehmer (index.html):





Dieser Text ist das Wort rot



Lösungsdatei:





Dieser Text ist das Wort rot



Prüfcode:
// Das erste 'p'-Element in der HTML-Seite abrufen
var s=document.querySelector("p");
// Vorhandensein prüfen
if(s.length===0) {
return "Leider nicht richtig. Versuche es bitte noch einmal. Du musst ein p-Tag erstellen.";
}
// Prüfen, ob das 'p'-Element untergeordnete Elemente enthält
else if(s.children.length===0) {
return "Leider nicht richtig. Versuche es bitte noch einmal. Du musst ein SPAN-Tag im P-Tag erstellen, um das Wort 'rot' einzuschließen.";
}
// Prüfen, ob das erste untergeordnete Element des 'p'-Elements ein 'span' ist
else if(s.children!==null && s.children[0].tagName!=="SPAN") {
return "Leider nicht richtig. Versuche es bitte noch einmal. Du musst ein SPAN-Tag im P-Tag erstellen.";
}
// Prüfen, ob das 'span'-Element einen Stil enthält, der
// die Farbe auf 'red' setzt
else if(s.children!==null && s.children[0].style.color!=="red") {
return "Leider nicht richtig. Versuche es bitte noch einmal. Die Farbe des span-Elements muss 'red' sein!";
}
// Text des span-Elements prüfen
else if(s.children!==null && s.children[0].textContent!=="red") {
return "Leider nicht richtig. Versuche es bitte noch einmal. Der Text des span-Elements muss 'red' sein!";
}
// 'true' zurückgeben, da keine Fehler vorhanden sind
else {
return true;
}

Einen einfachen Stil im Stylesheet erstellen

Titel: Einen einfachen Stil im Stylesheet erstellen
Beschreibung: Erstelle einen einfachen Stil im Stylesheet, um die Dimensionen für

-Elemente in einer Seite zu konfigurieren.
Anweisungen für Teilnehmer: Der folgende Code in index.html enthält ein

-Element im Body. Du musst in der Datei style.css einen Stil hinzufügen, um alle

-Elemente mit einer Höhe und Breite von 100px zu konfigurieren.
Datei für Teilnehmer (index.html):





Dieser Text ist das Wort rot



(style.css)  
Lösungsdatei:
div {
height: 100px;
width:100px;
}

Prüfcode:
// Erstes 'div'-Element abrufen
var s=document.querySelector("div");
// Vorhandensein prüfen
if(s!=null && s.length===0) {
return "Leider nicht richtig. Versuche es bitte noch einmal. Du musst ein DIV-Tag erstellen.";
}
// Prüfen, ob die Breite von 'div' auf 100px gesetzt ist
else if(window.getComputedStyle(s,null).getPropertyValue("width")!="100px") {
return "Leider nicht richtig. Versuche es bitte noch einmal. Du musst die Breite von DIV in der Datei stylesheet.cs auf 100px setzen.";
}
// Prüfen, ob die Höhe von 'div' auf 100px gesetzt ist
else if(window.getComputedStyle(s,null).getPropertyValue("height")!="100px") {
return "Leider nicht richtig. Versuche es bitte noch einmal. Du musst die Höhe von DIV in der Datei stylesheet.cs auf 100px setzen.";
}
// 'true' zurückgeben, da keine Fehler vorhanden sind
else {
return true;
}

Eine ID für ein Element erstellen

Titel: Eine ID für ein HTML-Element erstellen
Beschreibung: Erstelle eine ID für ein HTML-Element.
Anweisungen für Teilnehmer: Der folgende Code enthält ein

-Element im Body der HTML-Seite. Füge dem

-Element ein ID-Attribut hinzu, und weise der ID dann den Wert „sachlich“ zu.
Datei für Teilnehmer (index.html):



Ergebnis




Lösungsdatei:



Ergebnis




Prüfcode:
// Das erste 'p'-Element in der HTML-Seite abrufen
var s=document.querySelector("p");
// Vorhandensein prüfen
if(s===null) {
return "Leider nicht richtig. Versuche es bitte noch einmal. Hast du daran gedacht, einen neuen Absatz hinzuzufügen?";
}
// Prüfen, ob das 'p'-Element eine 'id' enthält
else if(!s.id) {
return "Leider nicht richtig. Versuche es bitte noch einmal. Hast du dem neuen Absatz eine ID zugewiesen?";
}
// Inhalt der 'id' prüfen
else if(s.id!="sachlich") {
return "Leider nicht richtig. Versuche es bitte noch einmal. Hast du dem neuen Absatz eine ID mit dem Namen 'sachlich' zugewiesen?";
}
// 'true' zurückgeben, da keine Fehler vorhanden sind
else {
return true;
}

Die Hintergrundfarbe für das body-Element festlegen

Titel: Die Hintergrundfarbe für den gesamten Body festlegen
Beschreibung: Lege die Hintergrundfarbe für den gesamten Body der HTML-Seite fest.
Anweisungen für Teilnehmer: Der folgende Code zeigt eine HTML-Seite mit – und -Tags. Du musst die Hintergrundfarbe des -Tags mithilfe eines Inline-Stils im -Tag selbst auf ‘brown’ setzen.
Datei für Teilnehmer (index.html):



Hintergrundfarbe!

Lieblings-Fußballmannschaften

  1. FC Bayern
  2. FC Liverpool
  3. FC Barcelona



Lösungsdatei:



Hintergrundfarbe!

Lieblings-Fußballmannschaften

  1. FC Bayern
  2. FC Liverpool
  3. FC Barcelona



Prüfcode:
// Prüfen, ob die Hintergrundfarbe des 'body'-Elements 'brown' ist
if(document.body.style.backgroundColor!="rgb(165, 42, 42)") {
return "Leider falsch, versuche es bitte noch einmal. Hast du die Hintergrundfarbe des Bodys auf braun gesetzt?";
}
// Alle 'OL'-Elemente in der HTML-Seite abrufen
else {
var ol=document.getElementsByTagName("ol");
// Prüfen, ob die Seite 'ol'-Elemente enthält
if(ol.length==0) {
return "Leider nicht richtig. Versuche es bitte noch einmal. Das 'OL'-Tag wurde nicht gefunden."
}
// Prüfen, ob die Hintergrundfarbe des 'OL'-Elements
// 'yellow' ist
else if(ol[0].style.backgroundColor!="yellow") {
return "Leider falsch, versuche es bitte noch einmal. Hast du die Hintergrundfarbe des OL auf 'yellow' gesetzt?";
}
}
// 'true' zurückgeben, da keine Fehler vorhanden sind
return true;

Einen Stil zum Festlegen der Schriftfarbe definieren

Titel: Einen Stil zum Festlegen der Schriftfarbe definieren
Beschreibung: Erstelle in der Stylesheet-Datei (style.css) einen Stil, um die Schriftfarbe für alle

-Elemente festzulegen.
Anweisungen für Teilnehmer: Der folgende Code in der Datei index.html ist eine einfache HTML-Seite mit einem

-Tag im Body. Erstelle in der Stylesheet-Datei (style.css) einen Stil, um die Schriftfarbe für alle

-Elemente auf rot zu setzen.
Datei für Teilnehmer (index.html):



Ergebnis

Dieser Text muss rot sein



(style.css)  

Lösungsdatei:
p {
color:red;
}

Prüfcode:
// Alle 'p'-Elemente in der HTML-Seite abrufen
var p = document.getElementsByTagName("p");
// Prüfen, ob die Seite 'p'-Elemente enthält
if(p.length===0) {
return "Leider nicht richtig. Versuche es bitte noch einmal. Es wurde kein paragraph-Element in der Seite gefunden.";
}
// Erstes 'p'-Element abrufen
else {
pelem=p[0];
}
// Prüfen, ob die Farbe des 'p'-Elements im
// Stylesheet und nicht inline festgelegt wurde
if(pelem.style.fontColor=="red") {
return "Leider falsch, versuche es bitte noch einmal. Du musst einen Stil in der CSS-Datei deklarieren. Verwende keinen Inline-Stil.";
}
// Die Farbe des 'p'-Elements prüfen
else if(window.getComputedStyle(document.querySelectorAll("p")[0])["color"]!="rgb(255, 0, 0)") {
return "Leider falsch, versuche es bitte noch einmal. Hast du die Schriftfarbe für p im Stylesheet auf rot gesetzt?";
}
// 'true' zurückgeben, da keine Fehler vorhanden sind
else {
return true;
}

Einen Stil zum Entfernen der Unterstreichungen von allen Hyperlinks definieren

Titel: Einen Stil zum Entfernen der Unterstreichungen von allen Hyperlinks definieren
Beschreibung: Definiere einen Stil zum Entfernen der Unterstreichungen von allen Hyperlinks.
Anweisungen für Teilnehmer: Die folgende HTML-Datei (index.html) enthält eine einfache Seite mit einem Hyperlink. Hyperlinks werden standardmäßig mit einer Unterstreichung („Dekoration“) versehen. Du musst in der Stylesheet-Datei (style.css) einen Stil für Hyperlinks definieren, um diese Unterstreichung („Dekoration“) von Hyperlinks zu entfernen.
Datei für Teilnehmer (index.html):



Result

Udemy


(style.css)  

Lösungsdatei:
a{
text-decoration:none;
}

Prüfcode:
// Alle 'a'-Elemente in der HTML-Seite abrufen
var links=document.getElementsByTagName("a");
// Prüfen, ob die Seite 'a'-Elemente enthält
if(links.length===0) {
return "Leider nicht richtig. Versuche es bitte noch einmal. Es wurde keine Hyperlinks in der Seite gefunden.";
}
// Prüfen, ob auf alle 'a'-Elemente ein Stil angewendet wurde,
// der die standardmäßige Unterstreichung („Dekoration“) entfernt
for(var i=0;i

Einen Stil zum Festlegen des Abstands für eine bestimmte Klasse definieren

Titel: Einen CSS-Stil zum Festlegen des Abstands für eine bestimmte Klasse definieren
Beschreibung: Definiere einen CSS-Stil zum Festlegen des Abstands für eine bestimmte Klasse.
Anweisungen für Teilnehmer: Der folgende Code ist eine HTML-Seite, die ein

-Element enthält, dessen Klasse auf 'primary-content' gesetzt ist. Du musst in der Stylesheet-Datei (style.css) eine CSS-Regel definieren, um den Abstand für alle Elemente festzulegen, für die 'primary-content' als Klasse angegeben wird.
Der Abstand soll oben auf 25px und unten auf 95px gesetzt werden.
Datei für Teilnehmer (index.html):



Eine Übungsseite

#Hauptinhalt.



(style.css)  

Lösungsdatei:
.primary-content {
padding-top:25px;
padding-bottom:95px;
}

Prüfcode:
// Alle Elemente abrufen, deren Klasse 'primary-content' ist
var pc=document.getElementsByClassName("primary-content");
// Prüfen, ob solche Elemente vorhanden sind
if(pc.length===0) {
return "Leider nicht richtig. Versuche es bitte noch einmal. Es wurde kein div mit der ID #primary-content gefunden.";
} else {
var pdiv = pc[0];
var topMargin=window.getComputedStyle(pdiv)["padding-top"];
// Prüfen, ob der obere Rand des Elements 25px ist
if(topMargin!="25px") {
return "Leider nicht richtig. Versuche es bitte noch einmal. Der obere Rand muss 25px sein.";
}
var bottomPadding= window.getComputedStyle(pdiv)["padding-bottom"] ;
// Prüfen, ob der untere Rand des Elements 95px ist
if(bottomPadding!="95px") {
return "Leider nicht richtig. Versuche es bitte noch einmal. Der untere Rand muss 95px sein.";
}
}
// 'true' zurückgeben, da keine Fehler vorhanden sind
return true;

Einen Stil für ein geschachteltes Element erstellen

Titel: Einen Stil für ein geschachteltes Element erstellen
Beschreibung: Erstelle einen Stil für ein geschachteltes Element.
Anweisungen für Teilnehmer: Die folgende HTML-Datei (index.html) enthält im Body ein in einem

-Element geschachteltes -Element. Du musst einen Stil definieren, der auf in

-Elementen geschachtelte -Elemente angewendet wird. Du kannst den Stil wie im


Nur Text innerhalb von 'span' wird in anderer Farbe angezeigt



Lösungsdatei:




Beispiel zur Auswahl eines untergeordneten CSS-Elements


Nur Text innerhalb von 'span' wird in anderer Farbe angezeigt



Prüfcode:
// Ein 'span'-Element in die HTML-Seite einfügen, um zu prüfen,
// dass ihre Farbe noch nicht festgelegt ist, denn der Stil soll nur
// auf die in

-Elementen geschachtelten 'span'-Elemente angewendet werden
var ps =document.createElement("span");
document.body.appendChild(ps);
var color1= window.getComputedStyle(ps)["color"];
if(color1==="rgb(75, 108, 156)") {
return "Leider nicht richtig. Versuche es bitte noch einmal. Nur das span-Element in P darf eine Farbe haben.";
}
// Alle 'p'-Elemente in der HTML-Seite abrufen
var ps=document.getElementsByTagName("p");
// Prüfen, ob die Seite 'p'-Elemente enthält
if(ps.length==0) {
return "Leider nicht richtig. Versuche es bitte noch einmal. Es wurde kein paragraph-Element in der Seite gefunden."
}
var pelem=ps[0];
// Alle 'span'-Elemente im ersten 'p'-Element abrufen
var spans=pelem.getElementsByTagName("span");
// Vorhandensein prüfen
if(spans.length==0) {
return "Leider nicht richtig. Versuche es bitte noch einmal. Es wurde kein span-Element im 'p'-Element gefunden.";
}
// Prüfen, ob die Farbe des 'p'-Elements nicht festgelegt ist
if(window.getComputedStyle(pelem)["color"]!="rgb(0, 0, 0)") {
return "Leider nicht richtig. Versuche es bitte noch einmal. Nur das span-Element darf auf die Farbe #4b6c9c gesetzt sein, nicht das p-Element.";
}
// Prüfen, dass die Farbe des geschachtelten 'span'-Elements festgelegt wurde
else if(window.getComputedStyle(spans[0])["color"]!="rgb(75, 108, 156)") {
return "Leider nicht richtig. Versuche es bitte noch einmal. Das span-Element muss auf die Farbe #4b6c9c gesetzt sein.";
}
// 'true' zurückgeben, da keine Fehler vorhanden sind
else {
return true;
}

Einen Stil durch Auswahl eines angrenzenden Elements erstellen

Titel: Einen Stil durch Auswahl eines angrenzenden Elements erstellen
Beschreibung: Erstelle einen Stil, der auf ein Element angewendet werden kann, das an ein anderes Element angrenzt.
Anweisungen für Teilnehmer: Der folgende Code in der Datei index.html enthält ein

-Tag, auf das ein

-Tag und einige weitere Tags folgen. Du musst eine Stilregel erstellen, um das

-Tag auszuwählen, das direkt auf ein

-Tag folgt. Die Hintergrundfarbe des ausgewählten

-Tags muss auf 'red' gesetzt werden. Alle anderen

-Tags in der Seite, die nicht direkt auf ein

-Tag folgen, sollen unverändert bleiben.
Füge den Stil innerhalb des


Das ist Überschrift zwei

Das ist Überschrift drei

Das ist ein Absatz

Das ist nochmal Überschrift drei

Das ist nochmal ein Absatz



Lösungsdatei:




HTML-CSS-Übungen - Auswahl aneinandergrenzender gleichgeordneter Elemente


Das ist Überschrift zwei

Das ist Überschrift drei

Das ist ein Absatz

Das ist nochmal Überschrift drei

Das ist nochmal ein Absatz



Prüfcode:
// Alle 'h3'-Elemente abrufen, die sich direkt nach einem 'h2'-Element befinden
var h3 =document.querySelectorAll("h2+h3");
// Prüfen, ob ein solches 'h3'-Element vorhanden ist
if(h3.length==0) {
return "Leider nicht richtig. Versuche es bitte noch einmal. Es wurde kein h3-Element direkt nach einem h2-Element gefunden."
}
var h3=h3[0];
// Prüfen, ob die Hintergrundfarbe des 'h3'-Elements
// wie vorgegeben gesetzt wurde
if(window.getComputedStyle(h3)["background-color"]!="rgb(255, 0, 0)") {
return "Leider nicht richtig. Versuche es bitte noch einmal. Hast du die Farbe des h3-Elements auf rot gesetzt?";
}
// Ein neues 'h3'-Element im Dokument erstellen und prüfen, ob der
// Stil nicht darauf angewendet wird, da es sich nicht direkt neben einem h2-Element befindet
var newh3=document.createElement("h3");
document.body.appendChild(newh3);
if(window.getComputedStyle(newh3)["background-color"]==="rgb(255, 0, 0)") {
return "Leider nicht richtig. Versuche es bitte noch einmal. Nur das h3-Element direkt neben dem h2-Element soll auf rot gesetzt sein.";
}
// 'true' zurückgeben, da keine Fehler vorhanden sind
else {
return true;
}

Einen fixierten Footer erstellen

Titel: Einen fixierten Footer erstellen
Beschreibung: Erstelle einen Footer, der immer sichtbar ist.
Anweisungen für Teilnehmer: Der folgende Code enthält das Element