We Keep Coding

Order of bootstrap and CSS library in header effect h3 Tag

When I change the order of bootstrap (online) and CSS library(offline-internal) that affect the h3 used in HTML document. let me explain more about the conflict.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"/>
<link rel="stylesheet" href="http://beautifycodes.com/assets/css/main.css" />
The sequence of the files and below is the result of the HTML document:
Now let's change the sequence of the main.css file, h3 tag and logo (have an h1 tag as well) will change its colour, font, size and layout.
<link rel="stylesheet" href="http://beautifycodes.com/assets/css/main.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"/>
now take look at the screenshot below:
Now my main concern is to just know that where the problem exists in bootstrap.js? bootsrap.css ? or browse have a bug.
Anyone help to understand the reason behind?

It seems that you have very little knowledge in how CSS works.
CSS is read by the browser from top to bottom and therefore the order matters. Default bootstrap file already cotains styles for the H3 tag. You also can define custom styles for H3 tag inside main.css. So if you put bootstrap css file after your main.css file ultimately browser will first apply your main.css style for H3 tag first and within a split second it will again apply the bootstrap css styles. As a result you will finally see the bootstrap styles on the H3 tag. This can happen vice versa. This is the intended behavior and how CSS works.
Also browsers don't do mistakes when it comes to css rendering. 😉

The order and weight of CSS attributes matter. When you change the order of your files, it is possible that style that was coming from an earlier file was overwritten once a later file was brought in.
This isn't a bug it's just the nature of CSS. In addition to order, things like whether you've selected a Class or Id, the !important attribute, and other things will effect the weight of a particular attribute. If there are competing attributes, the one with the higher weight is applied.
Hope this helps

Seems like you are using your custom css (main.css) to style your html page. The order of your CSS files DOES MATTER. When you place your custom css (main.css) file at the end, it will override rest of your css files. And if you place any other CSS file(bootstrap.min.css in this case) after your custom (main.css), it will override your custom CSS file, hence result may vary. Bootstrap.min.css has its own style that is different from your custom css and that is causing this issue.

My understanding is that:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Should be at the top, before all other js.

How to use specific font with highlight.js

Updated with the proper link to the example
I am using a Hugo theme that comes with bundled with CSS and uses Highlight.JS for syntax highlighting. The web pages I have created show a plain "courier" based fixed width font in the code blocks see here for example of my site page
I would like to use another font, like sans-mono or something more neat looking, like it shows on Highlight.JS web page here
I'm not super familiar with Javascript and CSS, just trying to use them. Is there an easier way to tell Highlight.JS to use specific font? Assuming I have font files available.
Thanks
ZeeKay

Add this to your CSS:
pre > code {
font-family: "Sans Mono", "Consolas", "Courier", monospace;
}
This will use the first font in that list that is available on the user’s system. Sometimes fonts have different spacing that their real names, so for example if "Sans Mono" doesn’t work, try "SansMono". Make sure to put monospace last so that at least some suitable font is chosen if the user doesn’t have any of the listed fonts.
If this doesn’t work, maybe it’s due to a selector specificity problem, where the default styles provided by highlight.js are overriding your own styles. Something that will help avoid this is putting the <link> that loads your CSS file after the one to load the highlight.js CSS file. If this doesn’t work, you will have to make the pre > code selector more specific, such as changing it to #main pre > code if all page content is wrapped in an element with the ID main.
If you’re not sure how to add CSS, the easiest way is to put it in the HTML template surrounded by <style></style> tags. Though it’s better to put it in a CSS file and reference it with <link rel="stylesheet" href="myStyles.css">.

Which CSS files affect a web page? [duplicate]

This question already has answers here:
How to find which CSS files are used for current page [duplicate]
(7 answers)
Closed 9 years ago.
I have a web page that imports over 10 external css files. I've used Chrome Developer tools to inspect an element and try to gauge which css files the web page is using. After the page initially loads, I went through each element to see the css it references.
The problem is that there is javascript functionality which adds classes to certain elements, and I don't know how to replicate all that state. Is there a way to determine which css files have no impact on the web page?

All the CSS files affect the web page, but the last selector is the only one affects to the element.
For example, if I use the follows CSS files:
<head>
<link rel="stylesheet" url="css/style1.css" media="screen">
<link rel="stylesheet" url="css/style2.css" media="screen">
</head>
And here are the styles:
Style1 CSS
a { color: black; }
Style2 CSS
a {
text-decoration: none;
color: blue;
}
What colour will have the link? Black and without underline because the last color property is in the last CSS file and in the last CSS file there is the text-decoration property.
Leo!

If your page has Javascript generating dynamic content, then you can never know whether a given CSS rule will affect something on the page. The browser loads all CSS rules (sorted by precedence rules), so all CSS files may have some effect on the page content at some point.
If your page is only static content then it becomes a moot point, but if at some point your page loads a modal window with some new content, there's no way to know whether one of those CSS files you thought weren't being used would have applied to that new content.

Scoping a CSS stylesheet to only one DIV via Nested Classes

I'm trying to display a website's content (preview) inside an admin interface. Thet requires the entire CSS stylesheet for the content (website) to be applied to the .preview DIV in the admin interface. The website.css file is not always the same as it depends which website is being previewed.
I' trying to use LESS.JS and Nested Rules but it will not work with Inline styles. I'm on a windows platform.
<style>
.preview {
<- Dynamically loading Website.css file content here ->
}
</style>
Problem is that LESS.JS will not act on inline styles. I'd like to keep the website.css file intact.
I could load the website.css, add the extra class, rename it to .less and write it back to the folder, and link the .less file... but it seems a bit too much for something so simple...

Thanks, ended up using LESS.JS which is pretty well suited for this task. I wrapped the Website.css file in a .class of the container DIV.
Less.JS compiles the CSS and adds the .class in front of all definitions, wich does the trick. – mfr just now edit
#*LESS.JS CSS*#
<style type="text/less" >
.preview
{
#File.ReadAllText(Server.MapPath(DesignHelper.GetTemplateFileName("Website.css")))
}
</style>
Notice the 'less' in <style type="text/less" >

style and script tag sequence

Normally HTML page contains following tags
<script>
<link>
<style>
I found number of times that changing the sequence of those tags, mess up with page layout.
So what would be the reason and what are the points to avoid this situation?
EDIT
After looking the answer of #Anurag, I'm actually assuming that we don't have a case where we have two definition of the same css class, in different style or link tag.
My major concern is css and script sequence. Whether we should have all the css class before we write any JavaScript or it doesn't matter at all (that I don't think).
For example jqtouch floaty extension.
In that if I define the .floaty class before the JavaScript tag, then it don't work.
Hope you get my point.

The order of the <link> and <style> tags is most important in this case.
The <link> tag(s) will hold the reference to your style sheets, where you defined most of your page layout.
The <style> tag will define exceptions or additions on the definitions made in your style sheets.
So, you first need to know what's the default, before you can add something or make an exception on it. That's why the <link> tag(s) should appear before the <style> tag(s).
The style definitions (sheets and inline) are applied in sequence. The last definition overrides previous definitions.
Then we also have the <script> tag(s). These have nothing to do with messing up your layout.
As a rule of thumb, I always declare them after my <link> tags. Why? First show your visitor a nice looking page, the scripts should be used to support additional functionality.

I can't tell you specifically without seeing more of your HTML. However, if I may make a recommendation, I would suggest not inlining any of the style or scripts into your HTML. There are a number of reasons why you don't want to do this, but other articles and websites do a much better job of explaining why you don't want to.
And, by not inlining, it may fix the problems you are currently experiencing.

Order is important for all of these tags.
<script> tags are executed sequentially unless using the async or defer attributes, so a script tag that appears later in the page can override the functions/variables/.. that were previously declared.
Likewise stylesheets are applied sequentially and have specificity rules about how to handle conflicts etc. For instance, the style attribute takes precedence over everything and if a style appears later, then it overrides the previous style. For instance,
<style>
.page {
background-color: #CCC;
}
</style>
<style>
.page {
background-color: #222;
}
</style>
The color of the page will be #222.