I have an h1 element that I want to change the size of it among with other properties, but the only thing gets changed is the font family.
Note that I am using some bootstrap gridding, which I don't know it might be which causing this problem I am still new to Bootstrap.
h1{
font-family: 'Montserrat';
line-height: 1.5;
font-size:3.5rem;
}
<head>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat" rel="stylesheet">
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<div class="row">
<div class="col-lg-6">
<h1>Hello World.</h1>
</div>
<div class="col-lg-6">
</div>
</div>
Also, I have tried my code on different browsers and devices, I cleared the cache I have on my browser and same results.
How to approach issues of type "My styles are not applied"
First, you should use the dev tools in your browser to investigate the element in your DOM.
As you can see, your font-size value is overwritten by Bootstrap's styles (coming from that _rfs.scss file mentioned at the right).
Option A: Display Headings (Bootstrap, only in your case)
Use Bootstrap's Display Headings. This lets you define different font sizes on your headings.
In your case, you could try this one:
<h1 class="display-1">Hello World.</h1>
Option B: Class Specificity
Add a class by yourself and refer to this class in your CSS.
h1.my-heading {
font-family: 'Montserrat';
font-size: 15rem;
}
<head>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat" rel="stylesheet">
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<div class="row">
<div class="col-lg-6">
<h1 class="my-heading">Hello World.</h1>
</div>
<div class="col-lg-6">
</div>
</div>
Option C: !important (not recommended)
Use the !important keyword, which guarantees, that your styles are preferred on h1 elements. This is problematic as soon as multiple !important statements exist and is rather considered bad practice.
font-size: 15rem !important;
you just need to be more specific in the CSS query selector
.bigger {
font-family: 'Montserrat';
line-height: 1.5;
font-size: 3.5rem;
}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="row">
<div class="col-lg-6">
<h1 class="bigger">Hello World.</h1>
</div>
<div class="col-lg-6">
</div>
</div>
Some examples with a higher specificity:
table td { height: 50px !important; }
.myTable td { height: 50px !important; }
#myTable td { height: 50px !important; }
Or add the same selector after the existing one:
td { height: 50px !important; }
Or, preferably, rewrite the original rule to avoid the use of !important altogether.
[id="someElement"] p {
color: blue;
}
p.awesome {
color: red;
}
RES: MDN Specificity
You are on the right track with bootstrap.
The easiest way to figure out why something does or does not work, is to inspect the element in the browser.
You see there, that rfs.scss overwrites your font-size.
Now you can just google "how to change bootstrap font size" if you want to change it in general, or create a css-class and assign that to your h1.
Bootstrap is indeed causing this. Currently you are setting the font-size with just the h1 element, which get's overruled by the CSS of bootstrap.
The only thing you have to do is that you just have to specify the h1 so that it is going to overrule bootstrap.
You can also use !important for your h1. But I always find that the easy way out and not really nice looking.
The only reason your font is working is because it isn't specified in any of bootstrap's CSS.
Related
This question already has answers here:
How to import Google Web Font in CSS file?
(13 answers)
Closed 2 months ago.
I started learning CSS a few weeks ago and I am trying to use a font I found on Google Fonts. I'm unsure of what was wrong with my code even after I asked a few friends. (Note: I tried Chrome and Edge, but none work) Here's the HTML section that has the font and that refers to the CSS sheet :
header {
background-color: #4d4d4d;
color: #FFFFFF;
font-size: 5%;
font-family: 'Alata', sans-serif;
}
<!-- Font Alata https://fonts.google.com/specimen/Alata -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=ABeeZee&display=swap" rel="stylesheet"/>
</head>
<header>
<link rel="stylesheet" href="style.css">
this is a font test
<link
<a href="link to homepage">
<img src="link to image" />
</a>
</header>
I'd be glad to know what's wrong here. Thanks in advance!
I tried using a Google Font using a CSS sheet, but the font does not render
You are requesting the font ABeeZee but you define Atlanta in your CSS. These values have to match if you want to use the font
header {
font-family: 'ABeeZee', sans-serif;
}
<!-- Font Alata https://fonts.google.com/specimen/Alata -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=ABeeZee&display=swap" rel="stylesheet"/>
</head>
<header>
<link rel="stylesheet" href="style.css">
this is a font test
</header>
you have a font problem you are requesting ABeeZee
font but in style sheet you are appling font Alata
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<body>
<style> header {
background-color: #4d4d4d;
color: #FFFFFF;
font-size: 5%;
font-family: 'Alata', sans-serif;
font-family: 'Alata', sans-serif;
}</style>
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Alata&display=swap" rel="stylesheet">
<style> #import url('https://fonts.googleapis.com/css2?family=Alata&display=swap'); </style>
</head>
<header>
<link rel="stylesheet" href="style.css">
this is a font test
<link
<a href="link to homepage">
<img src="link to image" />
</a>
</header>
</body>
</html>
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>
I set the font-size in the HTML root element, to use rem units in the project. After that, I couldn't apply any styles on the body element. The inspector shows that it's using the user agent default stylesheet. The other styles do apply, but the body element is completely broken.
It's the same in Chrome, Firefox and Safari. Also the font-family, color, padding etc. are all broken.
If needed you can download the project via this link.
If I comment out the * and HTML selectors, the padding, font-family is back, but the rems are incorrect because of the default 16px font-size.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 10px;
}
body {
font-family: "Lato", sans-serif;
font-weight: 400;
line-height: 1.7;
color: #777;
padding: 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet">
<link rel="stylesheet" href="./css/style.css">
<link rel="shortcut icon" type="image/png" href="img/favicon.png">
<title>Natours</title>
</head>
<body>
<header class="header">
<div class="logo-container">
<img src="./img/logo-white.png" class="logo" alt="natours logo">
</div>
<div class="heading-container">
<h1 class="heading-primary">
<span class="heading-primary-main">Outdoors</span>
<span class="heading-primary-sub">is where life happens</span>
</h1>
Discover our tours
</div>
</header>
</body>
</html>
How can i set correctly the root font-size to use rems? What causes this problem?
This is very strange. I copied, opened, closed the file like ten times. Then deleted (not commented) out the html selector and just rewrote it again. This fixed the issue. I have never seen anything like this before.
I have the following HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Project Web</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
<link href="index_style.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
</html>
and the following CSS (in the index_style.css file):
body {
background-color: black !important;
color: white !important;
}
As you can tell, the "background-color" and "color" properties take place only when they are followed by the !important keyword. Why is this happening?
You have to include your index_style.css link after your bootstrap code.
This is because your styles are amended by whatever bootstrap styles are.
You want to set defaults by first including bootstrap, than update these attributes with your own code.
This is called Precedence in CSS and it's super useful once you understand how it works.
Precedence in CSS
I can see another issue in order of your scripts, your correct order should be:
<!-- put these inside a <head></head> -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="index_style.css" rel="stylesheet">
<!-- put this just before closing </body> tag -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
This is happening because you're loading bootsrap's CSS after your own CSS. When you do, Bootstrap's CSS overrides all your body declerations and only !important causes them to be applied over bootstrap's declerations.
To fix this, load the CSS files in this order:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="index_style.css" rel="stylesheet">
Right order of calling css files is issue here, please use your custom styles after bootstrap styles to fix this and to overwrite styles for other components too, so right order will be as below:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="index_style.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
As others said, your CSS is getting overridden. When including external CSS files add your own CSS file after the external files.
The rule of overriding also applies inside the CSS file.
body {
background-color: black;
color: white !important;
background-color: red;
}
The background color of the following is gonna be red because background-color is declared last.
Whatever is declared last will override whats declared before it. Keep this in mind, as it will save you time in the future and it makes using !important unnecessary
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>