external style sheet not loading in bootstrap 4 - html

I am trying to load my external style sheet . It is loading but the style is being overrided by some other file.
How can i load my styles using ec
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 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="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<h1>Hello, world!</h1>
<button type="button" class="btn btn-primary">Primary</button>
<!-- jQuery first, then Bootstrap JS. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
</body>
</html>

Try adding !important attribute to css rule you are trying to implement. It will force your rules to the matched set of element or classes!

Related

why my shtml file is no getting called in plesk panel?

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Start Meta -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="Beorx - Creative Agency HTML5 Template" />
<meta name="author" content="ThemeOri">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Title of Site -->
<title>Protonix</title>
<!-- Favicons -->
<link rel="icon" type="image/png" href="assets/img/favicon.png">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- fontawesome -->
<link rel="stylesheet" href="assets/css/fontawesome.min.css">
<!-- Animate CSS -->
<link rel="stylesheet" href="assets/css/animate.css">
<!-- Swiper -->
<link rel="stylesheet" href="assets/css/swiper-bundle.min.css">
<!-- Magnific -->
<link rel="stylesheet" href="assets/css/magnific-popup.css">
<!-- Nice Select -->
<link rel="stylesheet" href="assets/css/nice-select.css">
<!-- Mean menu -->
<link rel="stylesheet" href="assets/css/meanmenu.min.css">
<!-- Flaticon -->
<link rel="stylesheet" href="assets/fonts/flaticon.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="assets/sass/style.css">
<!--#include file="header.shtml"-->
</head>
above is the code of my html plesk panel file I copied data of header.shtml from the same file and then removed that data from source file while keeping those in header.shtml without making any change but issue is the file header.shtml is not getting called any solution for it?

CSS won't render on IE11

I'm trying to see why our CSS won't render on IE. I'm thinking maybe it is something to do with linking the stylesheet? This is hosted on Salesforce Marketing Cloud if it matters. I've included everything in the header below:
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"><link rel="icon" type="image/ico" href="contents/ui/theme/i/favicon.ico">
<meta name="robots" content="noindex,follow"><link rel="dns-prefetch" href=""><link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="stylesheet" id="them-style-css" href="https://xx.com/b2c-general-css" type="text/css" media="all">
<link rel="stylesheet" id="g-font-css" href="//fonts.googleapis.com/css?family=Roboto%3A300%2C500%2C700&ver=4.9.8" type="text/css" media="all">
<script type="text/javascript" src="%%=CloudPagesURL(XX)=%%"></script>
<script type="text/javascript" src="%%=CloudPagesURL(XX)=%%"></script>
use the meta in head
<meta http-equiv="X-UA-Compatible" content="IE=edge">

Head element's going inside body

The code is....
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="stylesheet/style.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Videos - Pranked Bros</title>
<link rel="icon" type="image/png" href="img/logo-7.png">
</head>
<body>
<!-- other codes -->
</body>
in the browser it's like:
So the code inside head tags goes inside the body tag. In this case, what should I do?
There's probably something wrong with the tags before the part, maybe this is the problem.

CSS stylesheet not added on localhost, bootstrap, XAMPP

when i open http://localhost/Website/home.html my css stylesheet is not showing up. Maybe it is something with the bootstrap css? I am new to both bootstrap and XML. Here is my home.html head:
<!DOCTYPE html>
<html lang="en">
<head>
<title>****</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
My style.css is located in the same folder as my home.html
EDIT: some of my css are now showing, but not all. Strange..
EDIT 2: Apparently the bootstrap CSS did something fishy, it works if i changed the order to this:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />

How would I import multiple css files into a html page using only one css

Basiclly, I have this html page. (just put the head part in)
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- TITLE -->
<title>Page Title</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Grid CSS & Content -->
<!-- Personal CSS -->
<link href="css/flatcolor.css" rel="stylesheet">
<link href="css/fonts.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/nav.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Dosis:200,400' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'>
</head>
What I would like to do, is combine my personal CSS files into one large css file.
Example of What I would like to see.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- TITLE -->
<title>Page Title</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Grid CSS & Content -->
<!-- Personal CSS -->
<link href="css/importall.css" rel="stylesheet">
</head>
I would want the importall.css file have the info to load all of the other css files within the project (it would be noted within the css file which ones I want imported). Any Help?
Use a global.css document to import them all
i.e. Create a new CSS file entitled 'global.css' or something like that and add all of the import statements to the other CSS files:
#import url('typography.css');
#import url('layout.css');
#import url('color.css');
And then you would reference that in your HTML document..