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

CSS

Mona Jalal
Mona Jalal
4,302 Points
Posted by Mona Jalal
Mona Jalal
4,302 Points

why doesn't my style.css overwrite the bootstrap stuff?

This is what I have:

<head>
    <title>Mona Jalal</title>
    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
    <link rel="stylesheet" href="./assets/css/style.css">
    <link rel="stylesheet" href="./assets/css/responsive.css">
</head>

but this doesn't overwrite the bootstrap stuff and as Google Chrome devtools shows it gets ignored.

http://imgur.com/Hz9RK6U

2 Answers

Haytham Badran
Haytham Badran
216 Points
Haytham Badran
Haytham Badran
216 Points

Change order of including CSS files simply make the last CSS stylesheet file read by browser is your style file (include it before </head> tag)

<head>
    <title>Mona Jalal</title>
    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
    <link rel="stylesheet" href="./assets/css/responsive.css">
    <link rel="stylesheet" href="./assets/css/style.css"> // YOUR style  file
</head>
Danny Dickson
Danny Dickson
19,293 Points
Danny Dickson
Danny Dickson
19,293 Points

@haytham's answer is certainly more appropriate than using !important. Both will work, but generally speaking, you want to avoid using !important whenever possible.

If you're crunched for time, !important will do the trick, but again, generally speaking, it is ideal to think through the problem to find the solution rather than just painting !important all over your style sheet(s). As long as you are linking your style sheet last (See Haytham's code above) then whatever you put in style.css will take precedence over the other style sheets.

Haytham Badran
Haytham Badran
216 Points

Thanks Danny Dickson for kindly words yes the most important in coding to find solutions which put end to the issue not temporary solutions which in future will make issues for example if you want to change the property again and you forget you are using !important before you will be like move in circles and i recommend for you Mona Jalal work on personal template build it as you need and update it in each new website you found a lot of tricks you can't believe that it can be used in coding

Hope i could clear my point to you