FAQ: Setup and Syntax - Linking the CSS File

This community-built FAQ covers the “Linking the CSS File” 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 Linking the CSS File

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 Language Help.

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

Need broader help or resources? Head to Language Help and Tips and Resources. If you are wanting feedback or inspiration for a project, check out Projects.

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 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!

Double quote or single quote which one is best practice? I saw that top websites used the double quote for linking their stylesheet in the <link> tag. Codecademy also used double quotation. So why a single quote for the lesson?

4 Likes

When I started learning CSS, the link to the CSS file had to include type=“text/css” why is that no longer being used?

2 Likes

I’d like to know more about the rel attribute of the <link> element. What values can it take?

1 Like

Language Help I also want to know rel attribute other values

Yes, I also have the same question.

Hi Please how would you know if the CSS file is in the same directory as the html file?

Single and double quotation marks can be used interchangeably in HTML to access files, directories or external hyperlinks. W3C protocols require using Unicode in place of certain special characters for URLs, and having these two on that “do not use” list prevents errors caused by cutoff hyperlinks.

You’ll also find similar syntax rules in JavaScript regarding functions, objects and text strings, because JS and CSS are integral part of HTML-based programming. Introducing you to using single quotes is a means of developing good coding habits through consistency and convenience.

As long as everything works the way it should, how you do it is based on what works best for you.

2 Likes

The lesson asks us to set the link href equal to style.css rather than ./style.css. They both apply the stylesheet. Why is it that we don’t need the relative path in this case?

1 Like

Hi, if I was creating a website, it would depend on me where I place an HTML file(s) and CSS file(s). The CSS file is often placed in the ‘css’ directory inside of the directory where is the ‘index.html’ file, so in such cases, the relative path is ‘css/style.css’. But for educational purposes with small projects is the ‘style.css’ file usually just in the same folder as HTML file, so the relative path consists only of the name of the CSS file.

3 Likes

Looking at the thread

there is an exchange in the comments between users Coomie and teemoh:

Teemoh: So whats the difference between ./abc.htm and just abc.htm ?
Coomie: @Teemoh They’re the same in JS, HTML and CSS. The “./” is a old programing convention that carried over into these newer languages. In other circumstance they could mean different things. eg. if a “path” is set in an OS abc.exe could be a file and ./abc.exe might not.

1 Like

Dear all , I have a question if we will write link attribute inside body tag then it also works fine then why we write link any external css file or any styling in the head tag?

what do you mean I did not understand

Because html is not strict language. And browsers can correctly fix a lot of errors, or at least display something without breaking execution

p.s. I know I am late

Does it matter in which order you put -title- and -link- inside -head-?

He is saying that because the double quote and singe quote characters cannot be used in a url, that it is fine to use either of them to surround the url (creating a ‘string’) without causing a need for an ‘escape character’.

…this confused me at first, too.

Escaping quotes that are inside of strings is more commonly taught in programming language courses (such as courses in JavaScript) and does go beyond the traditional scope of a CSS course; things like folder structure, file extensions, and escape characters often go ‘glossed over’ in beginning material and I can’t think of topics where they all might be reliably included comprehensively in the curriculum outside of Bash or Linux educational material. Even many Java courses will often leave out discussions of folder structure and yet still expect students to understand theoretical discussions of ‘package’ structure.

@javawhiz72798 @javharbek_yuldashev Read this for more info →
HTML attribute: rel - HTML: HyperText Markup Language | MDN (mozilla.org)

The order in which you place the <title> and <link> elements inside the <head> section of an HTML document does not have a functional impact on your web page. The browser parses the HTML document from top to bottom, and these elements are independent of each other in terms of their functionality.

However, it’s a common practice to place the <title> element first in the <head> section. The title is what appears in the browser tab or window, and having it near the top of the <head> section makes it easy to find and understand the purpose of the page.

1 Like

If we are creating our separate css stylesheet then we should only have to link it with a relative path once throughout the entire html file , right?

the <link> element appears to be a self-closing tag, but in the examples, there is no forward slash placed at the end before the closing >.

It seems the forward slash is not needed (as the code works without a closing tag or the forward slash). I have also tested it with a forward slash at the end of the self-closing <link> tag and the browser still renders everything correctly with this included.

My question is then: is it good/common practice to leave the forward slash out, and if so - why leave it out of the <link> elements, but put it in other self-closing elements such as <img>?