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 Language Help.
Agree with a comment or answer? Like () to up-vote the contribution!
Even though we are learning CSS to add style to the website. But the current look of the web page is really ugly. The lesson could have instructed to create a beautiful website as well.
I’ve been through the CSS lesson about the selectors and I have a question. So I’ve learnt that an HTML element can be selected by its type, id, class or even attribute. And now I know that at the specificity level: id > class > type. But what about the attribute? Does it have a specificity level? Where it might get “ranked”?
h2 is a Type Selector, and can be targeted collectively without giving it a class. A type is a narrowly defined class, unto itself.
h2 {
font-variant: small-caps;
}
The above selector rule will apply to all h2 elements in the document. It is commonly known as a, generic rule because it is so generally applied. As a type selector, is has specificity, 0 0 0 1 and is easy to override.
When we look at how this is worded, heading-background when written as a class could be any heading element, or any text element that we are using visually as a heading.
For instance we could use some elements of a list as the list heading or subheading (this is reaching, but is valid)…
But what if there were hundreds or thousands of times h2 appeared in the code. Would the class, in this example, of heading-background have to be typed in to apply the class for h2 thousands of times over? Is there a faster way to do this in CSS or another way?
The course teaches that IDs can’t be used multiple times in one HTML document. Out of curiosity, I tried using it twice and it worked. Can it be used multiple times? Is the recommendation to use it only once a convention?
It seems to me like declaring CSS classes such as “bold”, “green”, “blue” and such to then mix and match within the class attributes of HTML elements… seems to me that it is kind of like using inline CSS declarations within the element’s opening tag. Besides convention, what’s the upside? Slightly less typing? Because it’s not like I could do a page-wide update for h2 elements, for example, from the CSS file. With mixing and matching, at that point I’d have to go and make individual changes in the HTML file should I wish to change things up.
No, it is not a convention. It is designed that way on purpose. ID is a global identifier and as such can be written into a URL as a hash.
index.html#content
If there is more than one fragment with the same ID, it will create a conflict for the browser to determine which fragment to hook. It will also mess with JavaScript which recognizes global identifiers for the purpose of registering event listeners.
content.onclick(callback)
The listener will only attach to one DOM element.
Bottom line, convention deals with practices, whereas specifications are recommendations of the HTML working groups.
for the class selector. the lesson asked to create a class named heading-background and this style will apply to all h2 elements. why can’t I just create ruleset for h2?
The best CSS coder is not the person who chooses the most attractive colors and the most popular layout. The best CSS coder is the person who can make the website look exactly the particular way that they intend.
At a large company, design is a separate role from implementation.
Even in server side technology, architects pick a design pattern and Senior Engineers adhere to it precisely.
This class is about learning to make the page look exactly as intended. There are really great Product Design courses out there and this is not that topic.
I can wireframe stuff that looks really cool. And I cannot build the CSS to make the web page look like the wireframe. This course is about learning the building blocks to make your [company’s] site look the way the wireframe looks, whether the wireframe is good-looking or ugly.
I can download great templates that look better than Twitter for free or low cost. I cannot edit them to make them unique because I do not know how CSS layout works.
The architect knows how to build perfect right angles using cardboard and paper to build a demo. The architect probably even knows how to swing a hammer because building is a hobby that fuels their passion for architecture. The architect is not a manager. The architect is a designer. The architect usually does not know how to coordinate 5 guys to fit a panoramic glass window into the 12th floor of an apartment building. The architect knows which glass looks the best and might get let down when the physical engineers refuse to approve it because it can’t hold up to the right tensile strength for that height of a building. The architect knows that the building looks perfect when it’s done and yet it’s not their job to decide when it’s done. If you want to Prod Design, this course is still useful. If you want to manage, this course is still useful. However, remember what this course is about: making the page look how the design specified it to look.
To be constructive while I rant: This lesson is about being able to choose the exact element you want to style. It’s not really even about colors. The color-coding is just simple visualizer to help us understand which elements we selected.
This lesson is helping me immensely because pseudo-classes and selector precidence order have eluded me when I just look up CSS in stackoverflow. I need to come down into beginner courses because the theoretical foundations just aren’t explained elsewhere.
My ability to make an HTML/CSS page is on par with how these sites look and that is why they don’t make the samples look much better: so that we don’t feel bad about how poor our own ability is at this stage. I don’t blame the class for my website still looking that way. I keep going and hope to get to layout without enough brain power to really memorize it and finally figure out how to make the elements positioned where I want them positioned.
It doesn’t really matter if you use quotes or even no quotes. Its more just simplicity for a programmers reference, although the AI will throw a fit and you may not pass the module like in a lot of cases.
I assume “IDs overriding styles of classes”(paraphrased) means that if an element is of a given class and id value, it will take the style of the id rule.
What does “IDs overriding styles of types” refer to?
Also if my question doesn’t make any sense and/or you need clarification please tell me.
An element named directly is ‘of a type’. Type ‘p’ or type ‘li’, etc. Type selectors have the lowest specificity so are easy to override.
li p
Above we see a type selector, a combinator of the ‘descendant’ variety. It only selects paragraphs (a type) that are nested anywhere in a list item (also a type). The specificity is as follows:
0 0 0 2
showing the two types in the lowest value column. It won’t matter where in the cascade we write our type selectors since they can’t override much but their ruleset (partially or in total) may still apply if it hasn’t been superseded by a more important rule. I class these selectors as ‘generic’ since they apply across the entire document. Just as the generic fonts are easy to override with a family font, type selectors are easy to override with either a higher specificity type combinator (one with three types, or more), or with a class selector in its simplest form.
) below.
) to up-vote the contribution!