Please help me compleate this! thank you!


#1

hello i am trying to compleate number 9 but i am not sure how. this is what i have tried:
index.html=


stylesheet.css=
/*Add your CSS below!*/

intro {

color: #b83c3a;

}
.standout {
color: #f7ac5f;
font-family: Verdana;
}

please can someone show me how i do it soon as i have to do this for homework. Thank you for your help :grinning:


#2

You added the standout class to your <h3> tag instead of your <p> tag like it told you to.
You also need to remove the first </h3>, the one before 'Classes and IDs in CSS'.


#3

@jibblyj this?

i really dont get this.


#4

Hey there Lucy,

Here is the solution to your problem.

The current code has a few bugs in it, The first <h3> tag has a closing tag directly after it, Not continuing the attribute to make the text bigger. Also in the instructions it asks to add the class "standout" to the first <p>tag also which you didn't catch!

So below i have reconstructed the correct code for you to analyze.

<!DOCTYPE html>
<head>
     <link type="text/css" rel="stylesheet" href="stylesheet.css" />
     <title>Result</title>
</head>
<body>
     <h2 id="intro">Introduction</h2>
     <h3 class="standout">Classes and IDs in CSS</h3>
     <p class="standout">Classes and IDs are super easy in CSS. You're using them right now!</p>
           <h3>Regular HTML Selctors</h3>
           <p>If you dont bother with a class or ID, an HTML element just gets the regular css styling for that element-or the default styling if you don't specify any particular styling on the stylesheet</p>
</body>
</html>

And for the CSS

#intro { color: #B83C3A; }
.standout { color: #F7AC5F; font-family: Verdana; }

Sorry for submitting a bit early, Still cant tab and get an indent in these forums. :frowning:


#5

Marc, i'm so confused @datsn . i have been doing this for hours as i have to get it done for homework and it is driving me insane(!) i am also stuck on 15. Links and i have just skipped it as i am really fed up of this i had to fo it for like 4 hours yesterday aswell


#6

Check my previous comment!


#7

thank you soooooooooooooooooo much you have been a big help i will try it now. i couldnt see the code you wrote before but it has just come up @datsn


#8

I forgot to put the preformatted text around it so it was reading it like it was a actual webpage. What part are you having trouble with on lesson 15?


#9

OMG!!!! YOU ARE A LIFESAVER THANK YOU SOOOOOOOOOOOOO MUCH MARC, IT WORKED! HOW DO YOU KNOW THIS STUFF? @datsn


#10

I have been coding for several years, Time and practice my young padwan, Time and practice. @lucy_14


#11

Also, (i'm so sorry to bother you) on 15. links . how do i do links again? is it : < a href="LINK FOR WEBSITE"> < /a>
(put a space between the; < and the a so it would show)


#12

hehe i love coding but i need to chatch up on homework so am struggling but i used to go to a cde club but we mailiy used scratch @datsn


#13

For the HTML the basic line should be the following.

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title></title>
	</head>
	<body>
		<div>
			<a href="#">Link 1</a><br/>
			<a href="#">Link 2</a><br/>
			<a href="#">Link 3</a><br/>
			<a href="#">Link 4</a><br/>
		</div>
	</body>
</html>

This creates a basic formatted skeleton for the webpage to read.

This is the CSS

a:link {
    text-decoration: none;
    color: #008B45;
}

a:hover {
    color: #00F00;
}

a:visited {
    color: #EE9A00;
}

The hover and visited are called Pseudo-classes due to the : being a "After Action" usage, So using these you are able to change the color, font family and or text decoration and so much more but it will only occur after the Action has been created.

Have fun with the rest of your course!


#14

oh yeah and guess what? im stuck on 16. as well what a suprise..... i guess there goes my nice weekend @datsn


#15

Marc you are my saviour!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! @datsn


#16

p:first-child {
color: red;
font-family: cursive;
}

The :first-child Pseudo class only targets the first attribute in a list of them, So you could have 1000 <p> attributes in one webpage but if in the css file it runs

 p:first-child {}

That will only target the first ever <p> class on the page.


#17

i think everyone needs a Marc @datsn


#18

Yes, that. Well done.