I am new to learning HTML and struggling with working with IDs and classes within IDs and classes.
Based on my understanding, an ID is denoted by a # symbol. So if I wanted to style an ID within another ID, would it be written like:
#ID1 #ID2 {
...
}
This would mean that the styling will only impact ID2 that is nested inside ID1, right? However, when I applied this concept in my basic code as a beginner, it didn't work. Here's the snippet of my code:
<!DOCTYPE html>
<html>
<head>
<title>1 May 2016</title>
<style>
#name {
color: blue;
font-family: Tahoma;
}
#parafont #1 {
font-family: Arial;
}
#parafont #2 {
font-family: Times;
}
#parafont #3 {
font-family: Courier;
}
parafont #4 {
font-family: Lucida Grande;
}
#parafont #5 {
font-family: Helvetica;
}
#test1 #6 {
color: blue;
}
</style>
</head>
<body>
<h3 id="name">Bob Bobbington</h3>
<p>1 2 3 4 5 6 7 8 9 10</p>
<p>When was this website created? Check the <b>title</b>.</p>
<h3>All animals are quite interesting...</h3>
<p id="parafont">
<span id="1">This is a test paragraph.</span>
<span id="2">Each sentence should have a different font.</span>
<span id="3">This paragraph is going to use some styling.</span>
<span id="4">Styling will change the font of each sentence.</span>
<span id="5">Let's see whether it works!</span>
</p>
<div id="test1">
<p id="6">Test</p>
</div>
</body>
</html>
I would greatly appreciate any assistance on this matter!