FAQ: Learn CSS Selectors Visual Rules - CSS Setup Selectors - Linking the CSS File

the type attribute can indeed be omitted since html5

3 Likes

Thank you so much for that input.

Can anyone explain to me why for the link type, the order is “text/css” and not “css/text”? Or is the order not important here? Thanks in advance!

type =>  generic / specific

which translates to,.

type/subtype

text is generic and never used as an extension (subtype). css is specific and is the common extension recognized as the subtype. There are several text based MIME types, plain, csv, css, and html to name the most common.

txt is a common extension for text/plain, but there could be others. Recall that every file we create is written with a header which the user agent can extract and parse. The MIME type is written to that header. The application that created the file will be sure to give it the correct MIME type.

With HTML5, browsers implemented reading of the header so we are less expected to indicate type on css and html. For backward compatibility we can still declare them, but don’t need to for modern browsers.

Found this on MDN

MIME types (IANA media types)

2 Likes

In the lesson it teaches that relative links should be in the format href="./style.css", but the exercise instructs us to use href=“style.css” (without the period or slash). Both ways seem to work, so what’s the difference?

It’s basically the same thing, Both ways look for a file in the same folder.

The exercise asks to introduce the link element as a child of the head element. However, this element does not only affect the head, but the whole html sheet. Does this make sense? How? And can the link element be introduced somewhere else and still work?

I could speculate, but seeing code samples would make matters a whole lot easier

I have attempt to link css to html, but nothing seem to change, i even change font-size to something big, but size remaining same. I try this on my personal html and on this exercise. nothing changed. But the style attribute work fine, so I did something work with my Linking.

<head link href="./style.css" type="text/css" rel="stylesheet">

p {
font-family: Arial;
font-size: 50px;
}

Please understand that exercise said that I did it correctly, but I do not see any change at all.

the <head></head> is a section where you can put information relevant for you as a programmer (link to stylesheet, title, meta data and so forth)

so then you get:

<head>
   <link><!-- with all the attributes (href, type and rel) -->
</head>

<link> is an element on its own.

Oh my god, it works, thank for your advice! for some reason, the exercise sees this element within the header as correct.

Hello, so ive followed the exercise and it got the checkmark but nothing changed in the paragraph. what am i doing wrong?

link href=“style.css” type=“text/css” rel=“stylesheet” (inside the head element)

  p {

    font-family: Arial;

  }

they are inside <> but if i copy it like this here nothing shows up

EDIT: I figured it out, in the style.css file you cant have the code inside < style > tags. This information is not really clear in the lesson although it seems kinda obvious, maybe add something about this in the lesson?

1 Like

Hello!
When i add this line:

It wont’t make the text go Ariel font;

But when I type ./style.css instead of URL above, it does work.

What is the problem?

Thank you!

I find the instruction very vague and unhelpful. I ask for solution and go back and I honestly have no clue how I am supposed to understand what I can’t see Why don’t you highlight the lesson so one can see where they are supposed to look? This is so frustrating

Thank you! Had this exact same problem.

Considering we have to add the type beyond the rel attribute, are there other stylesheet types?

Is type="text/css" really needed?
I tried my code without it and it worked anyways.

For backward compatibility, yes. Going forward, no. It’s all a matter of how much of the past do we wish to cling to.

Why was it needed before?

We’d need to do some digging in the old specifications to get a good answer to that question. It was there to tell the user agent which API to use to parse the file. Newer browsers are able to read the file header to parse out the MIME Type.