FAQ: Learn CSS Selectors Visual Rules - CSS Visual Rules - Introduction To Visual Rules

This community-built FAQ covers the “Introduction To Visual Rules” exercise in Codecademy’s CSS lessons.

FAQs on the CSS exercise Introduction To Visual Rules

Join the Discussion. We Want to Hear From You!

Have a new question or can answer someone else’s? Reply (reply) to an existing thread!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources about CSS in general? Go here!

Want to take the conversation in a totally different direction? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account, billing, Pro, or Pro Intensive? Reach out to our support team!

None of the above? Find out where to ask other questions here!

Other FAQs

The following are links to additional questions that our community has asked about this exercise:

  • This list will contain other frequently asked questions that aren’t quite as popular as the ones above.
  • Currently there have not been enough questions asked and answered about this exercise to populate this FAQ section.
  • This FAQ is built and maintained by you, the Codecademy community – help yourself and other learners like you by contributing!

Not seeing your question? It may still have been asked before – try searching for it by clicking the spyglass icon (search) in the top-right of this page. Still can’t find it? Ask it below by hitting the reply button below this post (reply).

1 Like
  1. What is the difference between <a> and <link>?
  2. Can they be used inter-changeably?

In this exercise, I’ve become aware you can add an image to the webpage using css. Is there a reason the soccer field picture was added via css, instead of html like the author’s avatar?

Images that are embedded in the HTML (IMG) are part of the content, per se. Search engines can index them so they contribute to SEO. CSS images are generally part of the skin of the page and not something we would consider as content worth indexing.

Background images are easy to maintain and update. We should be able to completely change the look of a page without ever having to touch the HTML. When considering where to place an image, ask yourself if this this visual (part of the skin) or if it relates to the content of the page.

An article about Brown Bears would very likely have an associated picture. That would be content. The fancy spruce bow border around the article would not be content, but window dressing (also skin) so CSS is where that image would be inserted.

1 Like

In the HTML course, we learned about the benefits of structuring code using Semantic HTML. In this CSS course, I noticed the code still uses the standard HTML structure. Is it more difficult to integrate CSS styling into Semantic HTML code?

(Link to my current page: https://www.codecademy.com/courses/learn-css/lessons/css-visual-rules/exercises/css-visual-rules?action=resume_content_item)

Not at all. CSS works for all of HTML, and does not treat semantic markup any differently, and neither should we. Both give structure to the content.

I have noticed something. Why were we told it is best practice to use semantic HTML such as but in these CSS exercises and every other exercise, the examples only show

's with classes and ID’s?

Let’s say we have a list.

  <li>Atomic number: 42</li>
  <li>Atomic mass: 95.95 u</li>
  <li>Atomic number: 78</li>
  <li>Atomic mass: 195.084 u</li>

Now we would, upon completion and ordering of details, embark upon how we wish to style the components of this list. Ask yourself, ‘how much do I wish to pollute this document markup with any more detail?’

From a purely traversal standpoint, we can reach every element in the list, without using class or id. Few learners really take the time to learn this approach, which is why there is so scant information available. The person or persons who make this a more meaningful approach will definitely earn my praise. Pipe dream, one supposes. Everywhere one looks we find class and id.

That might be telling us something. The more complex a document becomes, the more hooks are needed to ensure that style application is uniform and as expected.

With so many use cases to explore, it’s impractical to focus on only one or a few. What we might focus on is a plan of action when traversal alone is not practical, or simple. The objective is to have as few selector rules as needs be and to maintain as low a specificity as possible throughout the cascade.

It is tiny rules of thumb like these that make explaining CSS a greater challenge than the language itself requires.

In the example code from “introduction to visual rules”, why were the sections of html categorized using <div> instead of semantic dividers previously taught?

Thank you.

That is a question we cannot answer. Markup is less of a science and more of an outline. We can write semantic markup using only the conventional elements provided our document follows an outline. The structure is what gives semantics.

The new elements introduced in HTML5 make it easier to define sections, and permit multiple topic bodies as a result. They are not a panacea, though. HTML is largely based on the same recommendations as before.

Bottom line, structure is just as important as it always has been.

why HTML code in lesson CSS Visual Rules NOT semantic

As stated earlier, HTML can be written semantically without using semantic elements. The structure holds much meaning.

At this stage of learning it is pointless to split hairs or get hung up on minor details. Keep an open mind and learn to write well structured markup that follows an outline.

How exactly was the figure’s caption postioned over of the image? I’ve attached the photo below:

The image is a CSS background-image, meaning there is no special trick except the use position to offset the text from the top.

top: 80%;

or something along that line. Check the CSS for .caption, and also for .image selector rules.

1 Like


Thank you! I have also found the following to help explain the position property :slight_smile:

1 Like