FAQ: Setup and Syntax - Internal Stylesheet

This community-built FAQ covers the “Internal Stylesheet” exercise from the lesson “Setup and Syntax”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Full-Stack Engineer
Front-End Engineer
Back-End Engineer

FAQs on the exercise Internal Stylesheet

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 (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 (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 (like) to up-vote the contribution!

Need broader help or resources? Head to #get-help and #community:tips-and-resources. If you are wanting feedback or inspiration for a project, check out #project.

Looking for motivation to keep learning? Join our wider discussions in #community

Learn more about how to use this guide.

Found a bug? Report it online, or post in #community:Codecademy-Bug-Reporting

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!

I really need to know if it is alright to use

p
{
color: green;
}

Instead of

p {
color: green;
}

I know both are correct syntactically. And what is used often depends on what is decided by the team we are working with (if we are working with the team.)

But is there any rule? Advantage or disadvantage of one or the other?

@mtf Could you help? P.S. I finally finished HTML Course.

As a general rule, the selector is immediately in front of the declaration block, as in your second example.

Remember, style sheets can be quite long, and any way we can help make them readable and searchable will go a long way to making them easier to work with.

As far as what the browser will tolerate, that’s where experimentation comes into play. For instance, did the first example ruleset work or was it ignored?

When we have multiple selectors all sharing the same rule,

a,
span,
em,
strong {

}

Notice that the last selector in the list is immediately followed by the declaration block.

1 Like

Thank you for your response. I am able to understand the reason for using the second way of ruleset.

The ruleset of the first example worked both in the codecademy environment and notepad++ and chrome.

1 Like

So that would indicate that white space is ignored so long as the tokens are present and in the right order.

Still, it would be best to adopt the community norm, as described earlier.

 selector {

 }
1 Like

What I really do not understand is once we have written separate HTML and CSS files, Why can we not take the CSS code and add it within the Style under head in the HTML file? Wouldn’t be easier to maintain just one file?
Is it done just for readability?

The purpose of separating concerns is to improve maintainability, but also to give consistency across the many pages of a site. Very few websites are only a single page. If you have a site that is only a single page, then one supposes you could embed the style sheet, but it still makes better sense to separate them. If one wants to update the content, then edit the HTML. Update just the presentation? Edit the CSS. Update behavior? Edit the JS.

If you wish to spin off a new page, use the existing one as a template. In other words, duplicate the file. Give it a new name, and modify the content, leaving the html intact. All the styles and behaviors of the original page will be imported from the same CSS and JS.

1 Like

Thank you for the elaborate explanation.

Slight correction “Give it a new…”

1 Like

Yeah, my dyslexic typing means is, if and it are interchangeable. Toss in, in for good measure.

Thanks for spotting that. I’ll go back and edit it.

1 Like

I understand English very well, but not so well to understand if that is sarcastic. But if that is true, it should go in your profile. Not only because you have an astonishing contribution in this Codecademy community, but also because it will be fun to read. :smiley:

1 Like

No, not sarcastic, just true. I type quite fast and for years keep making the same or similar typos, including omitted words. Takes a lot of editing to fix them, and yet many slip under the radar.

1 Like

Try Grammarly chrome extension. It would help a lot to fix these issues.

1 Like