FAQ: Learn CSS – CSS Visual Rules – Review Visual Rules

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

FAQs on the CSS exercise Review 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).

When changing the li elements to tomato in the video why wasn’t the following CSS code used. Seems repetitive to do it twice or am I missing something?

body, 
a {
  color: tomato;
}
2 Likes

In this exercise, we saw that <div> was used to organize the content of the webpage. Wouldn’t it be better to replace <div class="content"> with <main class="content"> and further modify the example to reflect the proper semantics? I also noticed <div class="image"> and <p> used in place of <figure> and <figcaption>, among other things.

I imagine this was for demonstrative purposes, but I felt it was worth mentioning.

Why does Google Fonts <link> element not include “type: text/css” as an attribute?

Example: <link href="link to stylesheet" rel="stylesheet">

I’ve seen that a lot on Codecademy. Something tells me these courses were made before all the new HTML tags came out and the courses just haven’t been fully updated

I was trying to follow along the video tutorial at in this lesson I know its optional but I ran into a problem I couldn’t figure out. I have my index.html and my style.css in the same folder (basically Desktop/html/projectname) but when I try to link them together it seems to have no effect I’m using the correct syntax and everything I’ve checked all the possible typos and syntax but it doesn’t seem to even want to try to load. Is this due to the fact I’m trying to run this off of my machine? if so how can I circumvent this issue I’d like to be able to do testing and projects outside the code academy environment.

I can’t even find the exercise.

In the review of the lesson we can read the following:

  • CSS can make an element transparent with the opacity property.
  • CSS can also set the background of an element to an image with the background-image property.

Is this true? We can only make an element transparent using CCS? HTML is not able to perform this task at all? The same goes for the backgroung-image element.

Thanks.

Does anybody know what program is being used in conjunction with the css styling sheet in the video? Maybe it was mentioned, but I must have missed it. Just want to know how in the video when she types in color types for it gives a sample of what the color looks like. For example, when she types in tomato, there’s a ‘tomato’ colored icon to the left of it so it makes it easier to see what will be rendered.

TIA!

1 Like

What is the difference between background and background-color? Why is it simply background here?

body {
  background: #141E30;
}

And do I understand correctly that these three declarations result in three slightly different colors? Otherwise, I don’t see why would one include those two extra declarations instead of sticking with the one that has the broadest browser support

body {
  /* Old browsers */
  background: #141E30;
  /* Chrome 10-25, Safari 5.1-6 */
  background: -webkit-linear-gradient(-45deg, #35577D, #141E30);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background: linear-gradient(-45deg, #35577D, #141E30);
  margin: 0;
  padding: 0;
}

I wanted to learn the same thing. I think it is visual studio code with a color extension.

Hello there. She’s mentioned to use Microsoft Visual Studio Code.

Hello there. “background” is allowed shorthand for “background-color” and etc. For more information please visit CSS background property.

If you’re like me, these lessons got you wondering about linear gradients and asking the question How much opacity should I use?

Well, I started to answer this question for myself by asking the question How much opacity could a website use?

I modified the soccer example to push the limits of how much opacity looks good and made this Ice Hockey Fansite.

I noticed that the course material only includes one font when declaring a font-family. In the video at 4:45, Aubrey states that a browser will automatically replace a font with its font-type if the font is unavailable (ie. serif or sans-serif.) In the past, I have been instructed to include three fonts within a font-family declaration:

  1. Desired font.
  2. Alternative font in the case the first choice is not available.
  3. Serif or sans-serif in the case the first and second are both unavailable.

Below is an example from W3Schools:

.p1 {
font-family: “Times New Roman”, Times, serif;
}

Can you tell me what the common practice is today? Do people still include serif and sans-serif as the third option? Additionally, if the browser will default to this, would there be value in listing three specific fonts instead?

The type attribute is optional for the <link> element when it is used to link to external stylesheets, and its inclusion is not required for modern web browsers. The default value for the type attribute when it’s not explicitly specified is assumed to be “text/css.”

In the case of Google Fonts, the omission of type="text/css" in the <link> element is intentional and consistent with modern best practices. The HTML5 specification and browser behavior allow for this simplification.

Both of these tasks that you’ve mentioned are part of CSS and not HTML. Note that CSS (Cascading Style Sheet) is intended for styling whilst HTML (HyperText Markup Language) is intended to provide a strutucre to our document. Changing the transparency of a container and adding a background image are considered as styling as the structure has already been defined as containers which store the background image. Anyhow, in HTML, you can indeed use the <figure> or <img> element to insert an image, but that image is more logically to be considered as part of the main content flow instead of being a background image to beautify the web-page.

The practice of specifying multiple fonts in a font-family declaration, including a desired font, an alternative font, and a generic font family (like serif or sans-serif), is still relevant today. Including fallback fonts is a good practice to ensure that your text remains readable even if the preferred fonts are not available on the user’s device.

The common practice is to list specific fonts first, then more generic font families as fallbacks. Here’s a typical example:

body {
  font-family: "Your Preferred Font", "Alternative Font", serif;
}
  • “Your Preferred Font”: This is your first choice, and the browser will use it if available.
  • “Alternative Font”: This is an alternative in case the first choice is not available.
  • serif: If both the preferred and alternative fonts are unavailable, the browser will default to a generic serif font.
1 Like

To anyone that wants an interactive tutorial to learn a bit more about web design principles i found this really valuable.