Custom CSS won't override default bootstrap css - html

I'm pretty new in HTML and CSS and I'm stuck here...
Website is: http://www.i1cevic.com/
Basically, the 'bold text' won't be the font-size I defined in my CSS:
h1 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
line-height: 1.05;
letter-spacing: -2.7px;
font-size: 89px;
}
h1 small {
font-family: 'Raleway', sans-serif;
font-weight: 300;
letter-spacing: -2.7px;
font-size: 70px;
}
The class I'm having problem with is h1, as you can see font-size is defined as 89px but it keeps showing Bootstrap's default h1 size : 35-36px or something, I went past this issue by writing !important after font-size: 89px but that's not the solution...
Here's the HTML code. (not including head section)
<body id="page-top">
<header>
<div class="header-content">
<h1><small><font color="black">Light Text</font></small></h1>
<h1><font color="black">Bold Text</font></h1>
<br>
<a class="btn btn-primary btn-xl page-scroll" href="#about">Find
Out More</a>
</div>
</header>
<!-- jQuery -->
<script src="js/jquery.js">
</script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js">
</script>
<!-- Plugin JavaScript -->
<script src="js/jquery.easing.min.js">
</script>
<script src="js/jquery.fittext.js">
</script>
<script src="js/wow.min.js">
</script>
<!-- Custom Theme JavaScript -->
<script src="js/creative.js">
</script>
</body>
</html>

You marked this "jquery.fittext.js" script that resizes the text depending on the size of the page, and so natural that you have this problem. This script adds the tags "h1" the "font-size".

I dont see in your code where you use your own css file.
That's why I defined css in your head part:
h1 { font-family: 'Montserrat', sans-serif; font-weight: 700; line-height: 1.05; letter-spacing: -2.7px; font-size: 89px; }
And I remove styles from yours h1 tags.
font-size: 65px;

I just removed your inline style and I could see your style overridiing bootstrap style
so I think it's your browser cache try to clear cache or do hard reload ctrl+shift+Rif your are using windows and chrome
of cmd+shift+R on Mac OSX

inspecting it now there's style attributes in your markup
Screenshot: dev tools showing inline style setting size to 65px
A look at the source shows it's not there so one of your scripts is adding it in.

the problem is in the head section, you need to place your bootsrap css link first, then you link to your custom css, like this :
<!-- first your bootstrap link-->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!-- second your custom css-->
<link rel="stylesheet" href="css/main.css">
good luck

Related

Only certain specific changes in css file being reflected in browser

I have the following CSS and HTML code that I am using to develop a web project:
style.css:
body {
background-color: red;
font-size: 14px;
font-family: Roboto,arial,sans-serif
color: gray;
}
img {
height: 92px;
width: 272px;
}
a {
color: gray;
}
a:visited {
text-decoration: none;
}
.navbutton,
.footbutton {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.nav-img {
border-radius: 50%;
height: 32px;
width: 32px;
}
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Google</title>
<link rel="stylesheet" type="text/css" href="style.css?version=8">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar container">
<a class="navbutton" href="https://about.google/?fg=1&utm_source=google-US&utm_medium=referral&utm_campaign=hp-header">About</a>
<a class="navbutton" href="https://store.google.com/US?utm_source=hp_header&utm_medium=google_ooo&utm_campaign=GS100042&hl=en-US">Store</a>
<a class="navbutton" href="https://mail.google.com/mail/?authuser=0&ogbl">Gmail</a>
<a class="navbutton" href="https://www.google.com/imghp?hl=en&authuser=0&ogbl">Images</a>
<a class="navbutton nav-img" href="https://www.google.com">
<img src="https://i.stack.imgur.com/34AD2.jpg">
</a>
</div>
<div class="bod">
<div class="main-img">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Google">
</div>
<input type="text">
</div>
<div class="srch-button">
<button type="button">Google Search</button>
<button type="button">I'm Feeling Lucky</button>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</body>
<footer>
<div class="footbutton">
<a href="https://ads.google.com/intl/en_us/home/?subid=ww-ww-et-g-awa-a-g_hpafoot1_1!o2m--ahpm-0000000078-0000000001&utm_source=google.com&utm_medium=referral&utm_campaign=google_hpafooter&fg=1#!/">
Advertising
</a>
<a href="https://smallbusiness.withgoogle.com/?subid=us-en-et-g-awa-a-g_hpbfoot1_1!o2&utm_source=google&utm_medium=ep&utm_campaign=google_hpbfooter&utm_content=google_hpbfooter&gmbsrc=us-en_US-et-gs-z-gmb-s-z-u~sb-g4sb_srvcs-u">
Business
</a>
<a href="https://www.google.com/search/howsearchworks/?fg=1">
How Search Works
</a>
<a href="https://sustainability.google/commitments/?utm_source=googlehpfooter&utm_medium=housepromos&utm_campaign=bottom-footer&utm_content=">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAYCAMAAAAiV0Z6AAAAPFBMVEVLoEN0wU6CzFKCzFKCzFKCzFKCzFJSo0MSczNDmkCCzFJPoUMTczNdr0gmgziCzFITczMTczMTczMTczPh00jOAAAAFHRSTlPF/+bIsms8Ad///hX+//5/tXw7aMEAx10AAACaSURBVHgBbc4HDoRQCATQ33tbvf9dF9QxaCT9UQaltLHOh/golXKhMs5Xqa0xU1lyoa2fXFyQOsDG38qsLy4TaV+sFislovyhPzLJJrBu6eQOtpW0LjbJkzTuTDLRVNKa3uxJI+VdiRqXSeu6GW+Qxi29eLIi8H7EsYrT42BD+mQtNO5JMjRuC4lSY8V4hsLX0egGijvUSEP9AbylEsOkeCgWAAAAAElFTkSuQmCC">
Carbon Neutral Since 2007
</a>
<a href="https://policies.google.com/privacy?hl=en&fg=1">
Privacy
</a>
<a href="https://policies.google.com/terms?hl=en&fg=1">
Terms
</a>
<a href="https://www.google.com/">
Settings
</a>
</footer>
</html>
For some reason, whenever I make a change to the css file, the only changes that I can see reflected in the browser (Chrome) are any changes I make to the img dimensions in the img selector (ex: I will see a change in browser if I change the height of img to 100px). No other changes are seen in browser. I have already tried adding a query string to the link href in the HTML file, as well as disabling caching in Chrome's developer tools menu. I assume it is a caching issue, however, the fact that I can still see only image dimension changes makes it a bit more complex. Anyone know any solutions?
Example of issue:
changing width in img selector from 272px to 372px is reflected in browser consistently. Changing background color from white to red (as shown in code above) is not shown in browser (rendered as white background).
It's likely your CSS styles are being superseded by another class, e.g. if you're importing a library that's applying it's own CSS.
You can either increase the specificity of your targeting by adding class names (see order of precedence).
.redContainer {
background-color: red;
}
or use !important to override other styles.
body {
background-color: red !important;
}
to me it worked. I saved your code here
and it works when I change some of the properties like background color or font color and etc. I ran the code on chrome
for example I changed background color:
body{
background-color: blue;
}
and it worked
so I guess the problem lies within your head element. maybe one of the stylesheet link addresses is wrong or maybe one of the stylesheets is getting more priority in running the css rules

text family, weight and line height is not work by bootstrap

I am taking practice for adding grid layouts by bootstrap. I am trying to add the font into the , however there have no effect for what I added. I am actually taking the lesson, this is unbelievable that the teacher could change the font style, line height and the text weight but not me; even though I was copying what she was teaching me.
Does everyone could help me and give me advice for it?
body{
font-family: 'Montserrat', sans-serif;
font-family: 'Ubuntu', sans-serif;}
css
#title{background-color: #ff4c68;
}
h1{
font-family: "Montserrat-black";
font-size: 3rem;
line-height: 1.5;
}
<div class="row">
<div class="col-lg-6">
<h1>Meet new and interesting dogs nearby.</h1>
<button type="button">Download</button>
<button type="button">Download</button>
</div>
<div class="col-lg-6">
<img src="images/iphone6.png" alt="iphone-mockup">
</div>
</div>
To implement the font called Montserrat, this code from Google Fonts should be pasted in your <head> before any reference to your stylesheets recalling it:
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,400;0,600;1,400&display=swap" rel="stylesheet">
The correct order is:
the two <link> tags above first,
the <link> to bootstrap.css file goes second,
the <link> to your css file(s) as last.
I see your CSS code is overwritten by Bootstrap styling.
Try to put your CSS code under bootstrap link to avoid it to be overwritten:
<link href="bootstrap.css" rel="stylesheet">
<link href="yours.css" rel="stylesheet">
This problem occurs when bootstrap overwrites its code. You can add !important to your CSS or just add a style tag in HTML and style it. Also if you haven't added links to fonts it will always not show your fonts. You can easily find fonts on google fonts. These 2 tricks are different ticks so please don't use them at the same time. But using it is not a good practice. Another thing is to change links like this <link href="bootstrap.css"><!--then the other file--><link href="yourcssfilename.css>
body{
font-family: 'Montserrat', sans-serif!important;
font-family: 'Ubuntu', sans-serif!important;
}
css
#title{background-color: #ff4c68!important;
}
h1{
font-family: "Montserrat-black"!important;
font-size: 3rem!important;
line-height: 1.5!important;
}
<div class="row">
<div class="col-lg-6"><!-- Cursive font used to just show you, You can change late on -->
<h1 style="font-family: cursive!important; font-size: 3rem!important; line-height: 1.5!important">Meet new and interesting dogs nearby.</h1>
<button type="button">Download</button>
<button type="button">Download</button>
</div>
<div class="col-lg-6">
<img src="images/iphone6.png" alt="iphone-mockup">
</div>
</div>
According the logic, my custom styles are not overriding the bootstrap styles, all I need to do is move the link to your custom stylesheet to a line after the bootstrap CDN link:
This means that my first load the default bootstrap styles, then you can override some of those components with my own custom CSS.
Unlike CSS and JavaScript, HTML code is executed from top to bottom so the order of your code matters.
P.S: it also work in !important but not recommend at this stage.
#title{background-color: #ff4c68;
}
h1{font-family: "Montserrat";
font-weight: 700;
font-size: 3rem;
line-height: 1.5;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#100;400;700&family=Ubuntu:wght#300;400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<section id="title">
<div class="row">
<div class="col-lg-6">
<h1>Meet new and interesting dogs nearby.</h1>
<button type="button">Download</button>
<button type="button">Download</button>
</div>
<div class="col-lg-6">
<img src="images/iphone6.png" alt="iphone-mockup">
</div>
</div>
</body>
</html>

Why is my background-color not working in Chrome?

The background-color CSS property in Chrome is not working when I implement it into the body. However, when I test it in CodePen, the body's background color changes accordingly. Here is the link to the CodePen code: https://codepen.io/Ag_Yog/pen/rzezYw.
Here is the code that does not work in notepad:
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Acme" rel="stylesheet">
<title></title>
</head>
<body>
<div class="container quoteCard">
<p id="quote" class= "text">Txt</p>
<button class = "btn getQuote ">Get new Quote</button>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src = "main.js"></script>
</body>
CSS:
html, body {
width: 100%;
height: 100%;
background-color: #00e676 ;
}
.quoteCard{
background-color: #fff176;
}
.text{
position: relative;
vertical-align:middle;
font-family: 'Acme', sans-serif;
font-size: 30px;
padding: 20px 20px 20px 20px;
}
When inspecting the code on Google Chrome, it shows that there is no background-color, even though I specified it in the CSS:
Bootstrap's background color is overwriting your main.css so the background-color property is taken from the bootstrap css file. Change the order of your css files.
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Acme" rel="stylesheet">
<title></title>
</head>
<body>
<div class="container quoteCard">
<p id="quote" class= "text">Txt</p>
<button class = "btn getQuote ">Get new Quote</button>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src = "main.js"></script>
</body>
</html>
This will work
On codepen the body is already responsive, whereas your Chrome's page needs to be made responsive to react to the % of your CSS Properties.
Add these meta tags-
<head>
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<meta name="viewport"content="height=device-height, initial-scale=1.0">
</head>
Now your webpage can detect the devices width and height and set the style attributes according to them.
However, if this still doesn't work. Change your height properties value from 100% to something specific with px or use em if you want it to be responsive with different devices DPR.
I found I was having the same issue when using all of the CSS code for the body tag. I removed the background-color tag from that grouping and put it into a separate grouping for the same tag and everything worked as intended. It's an organizational problem, but it is functional.
Here's the example from my code (This is in my main.css file):
<style>
body {
font-family: Trebuchet MS;
margin-left: autopx;
margin-right: autopx;
margin-bottom: autopx;
margin-top: autopx;
}
body {background-color: #242424;}
</style>

Unable to change font for web page

Trying to set an external font for the entire body but no changes occurs. The font file is in the correct location. Tested with other fonts that is present such as Times New Roman and font doesn't change either.
I am using bootstrap but calling my custom css file after bootstrap thus I believe it should override bootstrap. I have other custom css in that same file which is executing other codes correctly. To play it safe I called font-family with !important and no changes either. What is wrong here.
<!-- html page to show how I place my css files. -->
<head>
<title>A Title</title>
<!-- Jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<!-- Bootstrap -->
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="css/bootstrap-theme.min.css">
<script src="js/bootstrap.min.js"></script>
<!-- Custom Files -->
<link type="text/css" rel="stylesheet" href="css/styles.css">
<script src="js/scripts.js"></script>
</head>
/*styles.css file*/
#font-face {
font-family: "KenzoCustom";
src: url(kenzo-regular.otf);
}
body{
background-color: #eaeaf4;
/*font-family: "Times New Roman", Times, serif;*/ /*No change either*/
font-family: KenzoCustom, serif;
}
<!-- Working Code -->
#font-face {
font-family: KenzoCustom;
src: url('../fonts/kenzo-regular.otf');
}
body{
background-color: #eaeaf4;
font-family: KenzoCustom, serif;
}
sometimes parent css applied on that you have to use
font-family: "KenzoCustom", serif !important;

Changing h1 color of Bootstrap Jumbotron

pretty new to Bootstrap and just started to play around with it. But there's one thing (that should be extremely obvious) that I can't get to work. And thats changing the color of the h1 tags in the jumbotron.
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Hello WWW</title>
<link rel="stylesheet" href="main.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div class="jumbotron">
<h1>Progression of Connected Computing</h1>
<p>Learn more about the internet</p>
</div>
</body>
</html>
main.css code:
.jumbotron h1{
color: #fff;
}
.jumbotron p{
color: #fff;
}
The problem is, the p tags are correctly changed and turn white, but for some reason the h1 tags don't? Probably something silly I'm doing but I can't seem to figure out what it is. Thanks!
You must include your custom main.css file after you are including the bootstrap.css one if you want to override your bootstrap styles with your custom main.css styles.
Your custom CSS file should be placed AFTER the bootstrap.min.css, so you are able to override it.
Like this -
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="main.css">
I found an easy way to do that: just wrap h1 blog inside for example span blog; then apply bootstrap for span blog. For example:
<span class="text-success"><h1>Hello World</h1></span>
If you're looking to apply white color specifically (as in your example), then using Bootstrap's color utility class .text-white is an option:
<h1 class="text-white">My Text</h1>
For more info on other color classes, see: https://getbootstrap.com/docs/4.0/utilities/colors/#color