HTML/CSS Anfängerproblem(e)

B

bademantel007

Grünschnabel
Hallo,

ich habe mich vor kurzem dazu entschieden HTML/CSS zu lernen und in naher Zukunft auch weiteres.

Das ist die Aufgabe:
We've added some links in the editor to the right. On the CSS tab, target ONLY the links that are children of <li>s and
Set their text-decoration to none
Set their font-family to cursive
Don't change the link that's not part of the unordered list!
Zum Vergrößern anklicken....

Das habe ich geschrieben:
CSS: 
/*Add your CSS below!*/
ul li {
    text-decoration: none;
    font-family: cursive;
}

irgendwie kommt da dann immer ein Error.


index.html:
HTML: 
<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>Ultimate Text Challenge</title>
	</head>
	<body>
		<p>Introduction: Cascading with CSS</p>
		<div>
			<p>Synopsis: When you set a property of a selector like 'p' to a certain value, that value applies to <em>all</em> p tags.
			If, however, you change that same property to a different value for a more specific instance of p,
			that change will <em>override</em> the 'general rule'.
			</p>
			<ul>
				<li><p>If you say p { font-family: Garamond}, all 'p's will have the font Garamond.</p></li>
				<li><p>BUT if you say li p {font-family: Verdana}, 'p's outside of 'li's will be
					   in Garamond, and 'p's INSIDE 'li's will be in Verdana.
				</p></li>
				<li><p>The more specific your selectors are, the higher importance CSS gives to the styling you apply!</p></li>
			</ul>
		</div>
	
		<p>Summary: Greater specificity makes CSS prioritize that particular styling.</p>
	</body>
</html>


Problem 2:

1. Make the introduction paragraph and the summary paragraph have a font-weight of bold
2.Make the synopsis paragraph have the color #7AC5CD.
Zum Vergrößern anklicken....

Wie macht man das? Kann mir das jemand erklären?


index.html:
HTML: 
<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>Ultimate Text Challenge</title>
	</head>
	<body>
		<p>Introduction: Cascading with CSS</p>
		<div>
			<p>Synopsis: When you set a property of a selector like 'p' to a certain value, that value applies to <em>all</em> p tags.
			If, however, you change that same property to a different value for a more specific instance of p,
			that change will <em>override</em> the 'general rule'.
			</p>
			<ul>
				<li><p>If you say p { font-family: Garamond}, all 'p's will have the font Garamond.</p></li>
				<li><p>BUT if you say li p {font-family: Verdana}, 'p's outside of 'li's will be
					   in Garamond, and 'p's INSIDE 'li's will be in Verdana.
				</p></li>
				<li><p>The more specific your selectors are, the higher importance CSS gives to the styling you apply!</p></li>
			</ul>
		</div>
	
		<p>Summary: Greater specificity makes CSS prioritize that particular styling.</p>
	</body>
</html>


Ich wäre echt dankbar wenn mir jemand weiterhelfen kann!
 
Zuletzt bearbeitet von einem Moderator:
Hi,
zu 1: Du sollst die Kinder von Ul li selektieren nicht li.
zu 2:
CSS: 
p { font-weight: bold;}
div p:first-child {color: #7AC5CD}

Ich weiß jetzt nicht genau wie codeacademy das erwartet. Ich hab jetzt das Pseudoelement first-child genommen welches ab CSS3 verfügbar ist.
Ansonsten kannst du es mal mit
CSS: 
div > p {color: #7AC5CD}
versuchen. Das funktioniert aber nur richtig wenn nur ein Paragraph dem Div folgt.

Viele Grüße
 
Hallo,

vielen Dank das zweite Problem ist geschafft. :D

Allerdings funktioniert das mit text-decoration immer noch nicht.
Das problem ist obwohl ich eintippe text-decoration: none;
bleibt es unterstrichen. Wenn ich text-decoration: overline;
schreibe dann ist es unter und überstrichen aber es geht nicht weg.
(es bleibt underline egal was ich mach...)
 
Also die Aufgabe ist:

target ONLY the links that are children of <li>s and

Set their text-decoration to none
Set their font-family to cursive

Ich schreibe das:

HTML: 
ul li {
    text-decoration: none;
    font-family: cursive;
}

Der Text wird cursive bleibt allerdings unterstrichen obwohl ich none; geschrieben habe..?!
 
Zuletzt bearbeitet:
Ich habe es geschafft. Falls es jemanden interessiert:

Ich habe das hier geschrieben:

HTML: 
ul a:link {
    text-decoration: none;
    font-family: cursive;
}



Allerdings wird das erst 5 Übungen später beigebracht bei Codeacademy :rolleyes:
 
Hi,
ja das ist ja auch was ich gesagt habe:
Du sollst die Kinder von Ul li selektieren nicht li.
Zum Vergrößern anklicken....

Aber du solltest besser nur a selektieren und nicht den pseudoselektor :link verwenden.
Denn wenn der Link nun :active oder :hover bekommt gilt dieses Styling nicht mehr.

Grüße
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück