How can I know in what order my css stylesheets are called in codepen?

How can I know in what order my css stylesheets are called in codepen?
0

#1

Hello Guys,

I am creating a page in codepen and in that I added bootstrap css in settings, now I am using a different color in my custom css for a tag(link), where as in bootstrap css , it’s defined in blue color, now I want to ovverride that with my custom css without being more specific in my custom css, so how would I know the order of the stylesheets? I am not able to figure it out from my source code? Please help!

Link here : view-source:http://codepen.io/chitranjali/full/jAmrxg/


#2

To override the Bootstrap CSS, use !important. For your anchor tags:

a{
  color:white !important;
}
a:link{
  color:white !important;
}

a:hover{
  color:white !important;
}

a:active{
  color:white !important;
}

A reference : http://www.w3schools.com/Css/css_pseudo_classes.asp
Anchor tags by default while have a blue link color, so you have to modify it with a:link.
a:hover modifies properties when you hover over the link
a:active modifies properties when you click the link.


#3

Hi @imtoobose, thank you for the reply, the !important specification is working, but I don’t want to override like that, I saw in some threads that , the css will be always overriden with the latest read css, so I want to make sure that my custom css loads finally in my page, can you help me with that?

my codepen link : http://codepen.io/chitranjali/pen/jAmrxg?editors=1100#0

Thank you for your time :slight_smile:


#4

CSS is a bit peculiar when it comes to overriding. The order of elements defined does matter, but the order of stylesheets doesn’t necessarily matter. Another factor in overriding is specificity, The more specific definition of an element will always override a general definition. So in order to style the element without using important, I did this:

  1. In the required anchor tags add a class “mylink” (Name it whatever you want, this is just something I’m using.)

  2. In your CSS use the following:

     .navbar > ul.nav > li .mylink {
       color: white;
     }
     .navbar > ul.nav > li .mylink:link {
       color: white;
     }
    

Here’s a working fork of your pen: http://codepen.io/imtoobose/pen/Eybkpo?editors=1100#0
I only applied it to the about button and it works.


#5

Hi @chitranjali,

If bootstrap is working on your page that means bootstrap.min.css is the first stylesheet rendered. After that your custom style-sheet will be rendered.

So your initial thought will be that any of your styling should override that of bootstraps.

In the linked codepen - anchor is given color of white which is rendering correctly in the logo section, but it is not correctly shown in the navigation.

This is because of the fact that it is being over ridden by a more specific style from bootstrap.
a { color: white} is less specific than .nav-bar>li>a { color: white}

In such cases you need to provide your custom styling as specific as possible.

Here is the forked version of your pen with some changes http://codepen.io/akshaynaik404/pen/AXbOPQ?editors=1100#0

More on CSS Specificity : https://css-tricks.com/specifics-on-css-specificity/

I hope this helps.

P.S. It looks like @imtoobose already replied with an answer white I was typing.


#6

Hi, I got this, the main reason to post this was, initially, the same a { color: white} didn’t work for the same heading, I am not bothered about that navigation menu, Now I don’t how come it started working :confused: , anyway thank you!