padding and colour not applying to body class - html

I have been trying to apply padding and colour to my body element and it is not applying.
I have been on this and it is not working. I am using live server for my work though, I will apply my code below for review. both the css and the html. it should also be noted that I am using SASS. Thanks
body {
font-family: 'lato', sans-serif;
font-weight: 400;
//font-size: 16px;
line-height: 1.7;
color: $color-grey-dark;
padding: 3rem;
}
<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/icon-font.css">
<link rel="stylesheet" href="css/style.css">
<title>A7A ASSOCIATES LTD</title>
</head>
<body>
<header class="header">
<div class="header__logo-box">
<img src="img/A7A Logo.png" alt="logo" class="header__logo">
</div>
<nav></nav>
</header>
</body>
</html>

Why would you place those CSS rules after the HTML closing tag ?
anyway, here are few solutions:
put the CSS style inside css/style.css file and it shall work.
make sure the path to the CSS file is correct.
clear the browser cache and try again (CTRL+F5 for Firefox, Shift+F5 for chrome)

Related

External and internal CSS styles at the same time?

I working with images at this moment, in my html document. A don't want, that adjust image width for each img element, so I made separated class (for e. thumbnail) for img tag in my style.css, but that doesn't works. Then I'd created style in my head tag, and placed the thumbnail class in there. That works, but now my style.css doesn't works at all. What I should do?
EDIT:
Working example:
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.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="header">
<div class="logo">
<a href="#">
<img src="plug.png" class="thumbnail">
</a>
</div>
</div>
</div>
</body>
</html>
style.css:
body{
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
}
.thumbnail{
width: 30px;
height: auto;
}
link should have a href instead of src
<link rel="stylesheet" type="text/css" href="style.css">

Why is google font not working with bootstrap?

Google Fonts not working with bootstrap. I'm using Google Font and Bootstrap for my website, but google fonts don't seem to work. As soon as I comment out the bootstrap CSS, Google font appears again.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello World</title>
<!-- Bootstrap CSS -->
<!-- Try commenting this and font will start working -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Hello World</h1>
</header>
<!-- Bootstrap Script -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
And CSS:
/* Google Font Link */
#import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
body {
margin: 0;
background: -webkit-gradient(linear, left top, left bottom, from(rgb(168, 168, 168)), to(#464645)) fixed;
/* Font Family Not Working */
font-family: 'Poppins', sans-serif;
}
header{
background-color: antiquewhite;
text-align: center;
padding: 10px;
}
JSFiddle Here
Tried Solution:
Google font not working with bootstrap This didn't work for me
Tried Googling around ...no solutions.
You can override the Bootstrap theme either by changing the source SASS files or by overriding the CSS variables used by the framework.
#import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
#import url('https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css');
:root {
--bs-font-sans-serif: Poppins;
}
<main role="main" class="container">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</main>
This how it worked for me.
*{
font-family: 'Montserrat', sans-serif;
padding: 0;
margin: 0;
outline: none;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/index-html.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#100;300&display=swap" rel="stylesheet">
<title>Stackoverflow Answer</title>
</head>
<body>
<h1>Google Fonts Imported </h1>
<script rel="preconnect" src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Bold font weight doesn't work when using Bootstrap stylesheet

I am having issues will bold text when using bootstrap. Text that should be bold is not displayed as bold in Chrome:
However in Safari it works as expected:
HTML:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<meta charset="utf-8">
<title>Font check</title>
<!-- Comment out the bootstrap stylesheet and it works -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
<link rel="stylesheet" href="font-test.css">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- <h1 class="font-weight-bold">Hello World!</h1> -->
<span class="bold-text">Hello World!</span>
CSS:
* {-webkit-font-smoothing: antialiased;}
.bold-text {
font-weight: 700;
font-size: 2.5em;
}
codepen: https://codepen.io/Kexarif/pen/rNOZMqO
It was suggested that I needed to add -webkit-font-smoothing: antialiased but that makes no difference.
If I comment out the Bootstrap stylesheet the text is displayed correctly in Chrome. So it seems to be because of the Bootstrap. Any ideas why this might be happening and what I can do to fix it?
try Clear browsing data, one day it's work for me
The issue is actually a Chrome bug. It causes some of the system stack fonts to not display bold text correctly. It will be a few weeks until there is a fix, source: https://css-tricks.com/chrome-system-fonts-snafu
For now a temp fix is:
body {
font-family: -apple-system, Helvetica;
}

CSS body author style doesn't apply, can't override user agent stylesheet

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.

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>