This forum is now read-only. Please use our new forums! Go to forums

banner
Close banner
0 points
Submitted by GrantGarland
over 8 years

[resolved] General <head> and CSS and Bootstrap Question

In lesson 2/14 “Make a Website: Bootstrap” it explains how CSS files are linked into the HTML document but I don’t understand the author…can anyone better explain to me this:

The order of the CSS files matter.

  1. The browser first sees shift.css, and makes the Shift font available to use in the page
  2. Next the browser sees bootstrap.css, and applies those styles to the page.
  3. Then the browser sees main.css, and applies those custom styles to the page. The custom styles override the Bootstrap styles.

The order of the CSS files tell the browser that your styles in main.css are more important than the styles in bootstrap.css, so the final page that loads is the customized web page.

I’m the type of person who needs to understand everything and that’s why I’m not entirely satisfied with the explanation. I’d appreciate any further explanation. Thanks!

Answer 55f933df95e378e32f0006a1

3 votes

Permalink

Hi Grant,

its tricky to explain any better than that (well for me at least), but here it goes -

The CSS is read top to bottom, so it loads the assets first (like the font and bootstrap), this is done so that what ever you write is not overwritten by these assets.

So for example, if the bootstrap CSS had 

.jumbotron {
  font-size: 10px;
}

but in your main.css you had written 

.jumbotron {
  font-size: 40px;
}

as your main.css is loaded after, that one is the one that is applied. So the text would be set at 40px.

This is a part of something called CSS Specificity, which is a very difficult thing to get your head around. Smashing Magazine has a very good article on it, but if you are new to this it might confuse you even more.

But basically if they have the same specificity (like in the example above), then the last iteration wins and is applied.

Hope that helps, if not let me know and Ill try again

Thanks

points
Submitted by Keith Light
over 8 years

1 comments

GrantGarland over 8 years

No this makes much more sense, thank you for the explanation. I still don’t know how the browser finds the .css files located in the

Answer 55f9697ee39efe7570000334

3 votes

Permalink

Hi Grant,

OK that is a different story, basically the URL, http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css actually links to a CSS file (follow the link and you will see my I mean)

You can either use resources by supplying the full URL, or have locally hosted files like the main.css. So if you were to try and replicate this locally, you would need main.css in your folder structure, but the bootstrap and font files could be left as they are in the exercise.

I tend to use as much locally unless you are sure it wont be removed/altered as this will mess with your site, but for things like bootstrap/fonts, they dont tend to change or be removed so its probably safe to use them.

Thanks

points
Submitted by Keith Light
over 8 years

1 comments

GrantGarland over 8 years

Thank you Keith, that makes much more sense.

Answer 56098fa5d3292faa4900054a

0 votes

Permalink

OK

points
Submitted by Liv
over 8 years

Popular free courses

Explore full catalog