It doesn’t help that when you create a new website, BSS creates a new custom styles sheet called “styles.css” because that makes it easy to get confused as to whether you’re talking about the CSS listed in the Style TAB/PANEL (which is the order your website follows in terms of the cascade) or whether you’re talking about the default custom stylesheet styles.css (which really should be named something like “custom.css”) to avoid this fundamental confusion.
But your confusion is not unwarranted. It is not particularly clear in the Tutorials in the official Bootstrap Documentation this off phenomenon which is as follows…
When you look at CSS in the STYLES TAB, which shows it in the order the browser interprets it when it renders the page, media queries will display in order from smallest to largest (as you can see in the first image displayed here.) Note that I’ve highlighted a paragraph of text that has a class applied to it called
.att-text-sub, and you can see there are two media queries to change the size of the text… once when the viewport is wider than 992px and again when it’s wider than 1200 px. The base font size is the first one listed (24px), which has no media query, and covers everything from 0px to 991px.
However, when you look at the CSS in the file MA-Home-Page.css, where I’ve created the class
.att-text-sub, the media queries are displayed in the OPPOSITE order - from largest to smallest.
Way back when I first started using BSS, someone in the forum explained to me the reason the program works this works this way. I don’t recall what it is.
All I know is that when you write your custom CSS the lower down the class is, the higher its specificity (weight). So in my second example image, if I were to duplicate the last class and change the font size rule to a smaller size than in the rule above it, because it appears lower on the stylesheet, it will be the one that gets applied to the text. The same holds true for media queries. When editing a custom stylesheet, your media queries should go from smallest to largest to have the desired effect on your website.
Personally, the only time I look at the “raw” css in the Styles Tab us when I want to see what Bootstrap classes are applied to a component so I can copy them to a custom CSS stylesheet to modify them (or if I forget which of my custom classes are affecting a given component.) 99% of my CSS coding time is spent in my custom CSS stylesheets, and I’ve learned to think in terms of writing my CSS from top to bottom (even though it’s shown in the opposite order in the Styles Tab.)
I hope this clears it up for you.