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>
Related
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.
I want the text inside the p header to be centered which is why I am using the text-center bootstrap class, but how would you change the font. Also, how do you edit the already made bootstrap classes in your own css file?
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<p class="text-center">
Welcome to the website!
</p>
</div>
</div>
</div>
Here is the HTML code
make another css file and put it after the bootstrap link
<link rel="stylesheet" type="text/css" href="bootstrap .css">
<link rel="stylesheet" type="text/css" href="new.css">
then overwrite the values that you want
.text-center{
font-family: "Lato";
}
The html file is not linking to the css file. Both the files are placed side by side in the same directory. It used to work fine before but suddenly it doesn't work. I have tried everything that was mentioned in the answers to similar questions here in StackOverflow but still doesn't work.
Html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link href="https://fonts.googleapis.com/css?family=Poppins:200,400,600&display=swap" rel="stylesheet">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="style.css">
<title>Frontend Mentor | Four card feature section</title>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style>
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
</style>
</head>
<body>
<div class="container">
<div class="part1">
<p>Reliable, efficient delivery</p>
<h2>Powered by Technology</h2>
<p> Our Artificial Intelligence powered tools use millions of project data points to ensure that your project is successful.</p>
</div>
<div class="part2">
<div class="supervisor">
<h3>Supervisor</h3>
<p>Monitors activity to identify project roadblock.</p>
</div>
<div class="wrapper">
<div class="teambuilder">
<h3>Team Builder</h3>
<p>Scans our talent network to create the optimal team for your project.</p>
</div>
<div class="karma">
<h3>Karma</h3>
<p>Regularly evaluates our talent to ensure quality.</p>
</div>
</div>
<div class="calculator">
<h3>Calculator</h3>
<p> Uses data from past projects to provide better delivery estimates.</p>
</div>
</div>
</div>
<footer>
<p class="attribution">
Challenge by Frontend Mentor.
Coded by Your Name Here.
</p>
</footer>
</body>
</html>
Css code:
body {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: hsl(0, 0%, 98%);
text-rendering: optimizeLegibility;
}
.container {
width: 60%;
height: 60%;
}
For the folder structure please refer to this
https://github.com/swethalakshmi22/four-card-feature-section
The code you have uploaded on Github it has href="/style.css" please write
here your code in the question is fine.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link href="https://fonts.googleapis.com/css?family=Poppins:200,400,600&display=swap" rel="stylesheet">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="style.css">
<title>Frontend Mentor | Four card feature section</title>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style>
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
</style>
</head>
<body>
<div class="container">
<div class="part1">
<p>Reliable, efficient delivery</p>
<h2>Powered by Technology</h2>
<p> Our Artificial Intelligence powered tools use millions of project data points to ensure that your project is successful.</p>
</div>
<div class="part2">
<div class="supervisor">
<h3>Supervisor</h3>
<p>Monitors activity to identify project roadblock.</p>
</div>
<div class="wrapper">
<div class="teambuilder">
<h3>Team Builder</h3>
<p>Scans our talent network to create the optimal team for your project.</p>
</div>
<div class="karma">
<h3>Karma</h3>
<p>Regularly evaluates our talent to ensure quality.</p>
</div>
</div>
<div class="calculator">
<h3>Calculator</h3>
<p> Uses data from past projects to provide better delivery estimates.</p>
</div>
</div>
</div>
<footer>
<p class="attribution">
Challenge by Frontend Mentor.
Coded by Your Name Here.
</p>
</footer>
</body>
</html>
After checking your code-snippet , it seems that either css style.css is not on the same location where your html file is. Please check that.
Can you please check the right on the folder (IIS_USER) must have permission on this to read the style.css ?
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'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