This community-built FAQ covers the “Font Style” exercise from the lesson “CSS Typography”.
Paths and Courses
This exercise can be found in the following Codecademy content:
Web Development
Learn CSS
FAQs on the exercise Font Style
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!
Agree with a comment or answer? Like (
) to up-vote the contribution!
Need broader help or resources? Head here.
Looking for motivation to keep learning? Join our wider discussions.
Learn more about how to use this guide.
Found a bug? Report it!
Have a question about your account or billing? Reach out to our customer support team!
None of the above? Find out where to ask other questions here!
How is the CSS selector working properly on this example? In the html, the parent class names are:
class=“font-card garamond”
class=“creator”
However, in the CSS the selector is just:
.font-card .creator
What happened to “garamond” in the CSS and how is it working without it?
class=“font-card garamond”
This implies the element is a member of the classes “font-card” and “garamond”. The space in between the class names describes that the element belongs to two different classes. In our css the rules for the selectors .font-card and .garamond are both applied to the element.
3 Likes
.font-card .creator
So in this case he is using one of the class names of the element (i.e .font-card) and nesting a child element reffered by the class name .creator to make the selection more specific.
1 Like
When writing class="font-card garamond", we are actually giving the element two classes: font-card and garamond. This means that we can either select it using the .font-card class selector, or the .garamond class selector. .font-card .creator is simply selecting all the elements with a class of creator which are descendants of elements with a class of font-card
What’s the difference between italic and oblique?
I got to this lesson myself and I am starting to think that there is an error here. I ran this whole section twice to full understand it. This is what I did.
I created my own selector in style.css for the class=“creator”
.creator {
font-style: italic;
}
The code worked fine and it allowed me to move to the next part.
We know this happened because .creator was already a “class” in the index.html sheet. I just don’t why when it was used in the code that they decided to combine it with .font-card and demonstrate it that way. It was confusing. They did something similarly strange with the following class.
<div class="font-card garamond">
They added garamond here but didn’t do that for the rest of the described fonts.
Overall this part was messy to say the least.
is there font that can’t use font-style italic?
And if there is, what happen if we use italic on it?
Wow Space Mono looks like the diet coke version of Helvetica. Why do all modern font look like they’re copying Helvetica. I’m sure Helvetica light looks remarkably similar to Space Mono.
Even though this is adobe illustrator specific it does discuss what real graphic designers do when encountering fonts that do not have italicized version. I feel that this applies globally to fonts. There are a ton of fonts out there just find one that mimics the look you’re going for.
1 Like
what are the other font style besides italics?
Other than normal and initial (default), there is oblique, which displays the exact same way as italics. See for yourself: Playit | w3schools.com
In this exercise, the selector uses .font-card .creator to amend the changes. Why can’t I just use the selector .creator in CSS instead?
In Font Style, I see that it is used to italicize text. Yet that can be done in html as well, using the element. What is the difference, and would there be a better time to use one and not the other?
1 Like
I want to know about best practices. When is it appropriate to use HTML or and when there’s a CSS rule for font-style: italic;? If we use font-style: italic; , does this have the same meaning as HTML or more similar to HTML when it comes to web accessibility (screen reader etc.) ?
Both are correct with the assumption that no element with a class of creator exists which is not a descendant of an element with the class font-card. But, if one ought to play safe and guarantee order of each ruleset applies sequentially, they should lean on writing a CSS ruleset with higher specificity.
Visually, using the <em> tag seems to look the same as using font-style: italic;. When would we want to use one vs. the other?
