There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply () below.
If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.
Join the Discussion. Help a fellow learner on their journey.
Ask or answer a question about this exercise by clicking reply () below!
You can also find further discussion and get answers to your questions over in #get-help.
Agree with a comment or answer? Like () to up-vote the contribution!
Instead of creating a whole other id and ruleset, why can’t I just put the value (ex. font-family: cursive;) in the .title ruleset? I tried it and it works and seems like a quicker way to do it.
So the purpose of the lesson was to teach you the meaning of the ID attribute and how to implement it. The best possible way of using it depends on the project you are working on and your personal style. So all the selectors provided to us are the basics and commonly used ones. How we use it in our code would depend on us. But the lesson is for our understanding only.
At this point, the lesson still has a red border which is not at all looking good. But it is there for our understanding.
I don’t understand the need to a more restrictive ID selector when you have the class selector. It seem that you could create a class that has the styling you want and just use it for one element on your page. Can someone provide a practical example of where an ID selector has clear benefits over a class selector?
Hi, an ID selector is more important for JavaScript and for links on the page too. For example, you can have this code somewhere in the beginning of your HTML page:
<a href="#chapter-7">Chapter 7</a>
If a user click on the link, the page will “shift” to the element with the attribute id=“chapter-7” rendered at the top of the browser window, so they don’t need long scroll down the page to see it.
I just had a long conversation with my coding mentor, who has been doing web development for more than 20 years. He told me that he has adopted a fairly common best practice to avoid the ID selector when you can use Class instead, which echoes the sentiment of your comment.
His explanation was that it’s better/safer for your code long-term, either as your project evolves, or it needs to be maintained/changed at some point in the future. Because ID selectors can only occur once in a document, and larger more complicated projects might end up repeating code somewhere down the line, a rogue ID selector could cause problems if it ends up showing up more than once and it was overlooked when the changes were made. So unless you need an ID selector (such as dusank357 observed above, for anchor links, or forms, or JS functions) then it is most often better to go with the creation of a Class selector.
There seems to be an issue with the question. My answer wasn’t accepted with spaces like id = 'article-title' but it was accepted without them like id='article-title'.
Hi, remember that inside the angle brackets a speace is used to add another attribute. Since the browser will always try to interpret your code, it will read the id attribute as complete after the space you added. Then the = sign was treated as a not valid attribute. Hope it makes sense!
Hi, I have a question. So I believe what the class meant to be used one per page is that the id name has to be unique.
Earlier in an HTML project, it was requested to add specific ids to each <section>. This is all in the same .html document, so I am a little confused here. Thanks.
<main>
<section id="blog">
<article>
<p>New York City is made up of five boroughs which include Queens, Manhattan, Brooklyn, the Bronx, and Staten Island. The city is the home of approximately 8 million people. In 1876, France gifted the City of New York what is known as the Statue of Liberty, which is currently located on Ellis Island commonly visited by tourists. However, it took 10 years to assemble and therefore wasn’t unveiled until 1886. Another tourist destination is Times Square. Times Square is commonly known for the big buildings, Broadway shows, and bright neon signs. This famous location was named after The New York Times after the Times moved to that location. Prior to that, it was named Longacre Square. New York City is also known for its bridges that connect the boroughs and allow ease of transportation.
</p>
</article>
</section>
<figure>
<img src="https://content.codecademy.com/courses/Semantic%20HTML/statue-of-liberty.jpeg" alt="Statue of Liberty">
<figcaption>
This is the Statue of Liberty, a popular tourist attraction located on Ellis Island.
</figcaption>
</figure>
<aside>
<p>
New York City is very popular for the variety of great food it has. Some of the top food items in NYC include:
</p>
<ol>
<li>Pizza</li>
<li>Bagels</li>
<li>Burgers and Sandwiches</li>
<li>Ramen</li>
<li>Tacos</li>
<li>Pasta</li>
<li>Desserts</li>
</ol>
</aside>
<section id="media">
<article>
<h2>The Scenery in NYC</h2>
<p>
While the view in the city is beautiful, the sounds are not as lovely. Below you'll see an example of the view and the sounds you'll deal with in NYC on a daily basis.
</p>
</article>
<video src="https://content.codecademy.com/courses/Semantic%20HTML/nyc-skyline-timelapse.mp4" controls>Video not supported</video>
<embed src="https://content.codecademy.com/courses/Semantic%20HTML/nyc-skyline.jpeg">
<audio controls src="https://content.codecademy.com/courses/Semantic%20HTML/nyc-sounds.mov"></audio>
</section>
</main>
Thank you, my confusion is because the lesson says the following:
SELECTORS
ID
Oftentimes it’s important to select a single element with CSS to give it its own unique style. If an HTML element needs to be styled uniquely, we can give it an ID using the id attribute.
<h1 id='large-title'> ... </h1>
In contrast to class which accepts multiple values, and can be used broadly throughout an HTML document, an element’s id can only have a single value, and only be used once per page.
This is known as linking to a page fragment. Clicking it adds the hash to the URL in the location bar, which in turn makes it a bookmarkable and sharable link.
Let’s say we have a document with N number of article fragments that are unique, but bound to the same page by some other key metric. We can give each article its own id and in the CSS further customize that fragment. It would be a given that every fragment would inherit the base style characteristics and behaviors, so would be class based but each id can deliver unique background or subject images, or special styles and/or behaviors.
Recall that id has greater specificity than class or type. By not overusing id in our CSS we make it easy for the reader to spot these proprietary implementations in the overall document/application.
Glyphs in cursive fonts generally have either joining strokes or other cursive characteristics beyond those of italic typefaces. The glyphs are partially or completely connected, and the result looks more like handwritten pen or brush writing than printed letter work.
For example: Brush Script MT, Brush Script Std, Lucida Calligraphy, Lucida Handwriting, Apple Chancery, cursive.
) below.
) to up-vote the contribution!
