Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML How to Make a Website Customizing Colors and Fonts Add Fonts

mukul lohia
mukul lohia
985 Points

<link rel="stylesheet" href="css/normalize.css">

<link rel="stylesheet" href="css/normalize.css">

  <link rel="stylesheet" href="css/main.css">

sir tell me what is the meaning of these two lines and why main.css line comes after normalize .css

4 Answers

Dan Weru
Dan Weru
47,649 Points

The [href] attribute specifies the location of the normalize css file. In this case it inside a folder called 'css' inside the same folder as the html file you're using hence you write href = 'css/normalize.css'.

The [rel] attribute specifies the relationship between your html file and the normalize.css file you're linking ... in this case the normalize.css is a stylesheet. Therefore you write, rel = 'stylesheet'. You need to specify this because a link tag could be used to link other assets e.g an icon ....

<link rel = 'icon'  href = 'icons/favicon.ico'>  /* links an icon */

So

<link rel = 'stylesheet' href = 'css/normalize.css'> 
/*
  Specifies
   1. The relationship   via  **rel** attribute
   2. The location of the file via **href** attribute

*/

The link comes first because it's used to override browser defaults styles. Second, css properties cascade down; that is later css rules override earlier ones. Since you will have a css file of your own, say styles.css ... you do not want the styles in the normalize to override your own. Therefore, the normalize.css stylesheet should be linked first

 <link rel = 'stylesheet' href = '.../normalize.css'> <!-- override default browser styles 
                                                                                 such as padding and margin -->
<link rel = 'stylesheet' href = '.../styles.csss'>  <! --- declare your styles ->
Marcin Lubke
Marcin Lubke
13,253 Points

Default browser styles may vary, there might be for example a little different margin in firefox than in chrome. normalize.css is an attempt to... well, normalize the default behaviour, you set some default values, which will be the same in all browsers. Like with the previous example, if Firefox had some larger default margin than Chrome, after applying normalize.css - they will be the same. You link this file to normalize the default styles, and then you links your own .css file, where you set other styles for your page.

mukul lohia
mukul lohia
985 Points

thanx for telling this but can u tell me what is default browser style

mukul lohia
mukul lohia
985 Points

thanku very much now my all doubts are cleared.