I've added a google fonts font-family in the body but it doesn't seem to be changing everything. The thing is when I individually put "font-family: 'Quicksand', sans-serif;" in each css curly bracket (header, jumbotron etc) the new font appears.
So could someone please explain why my page isn't picking up the body font family? This is really frustrating me. Thanks
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://ift.tt/1G5E3Xj' rel='stylesheet' type='text/css'>
<link href='http://ift.tt/1OFuYnZ' rel='stylesheet' type='text/css'>
<link href="css/styles.css" type="text/css" rel="stylesheet"/>
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
<main>
<header>
<div class="row">
<div class="col-lg-6 col-sm-1 col-xs-4">
<img class="logo" src="" alt="Logo">
</div>
<div class="col-lg-6 col-sm-11 col-xs-8 title">
<h1>Testing</h1>
<h4>Front-End Ninja</h4>
</div>
</div>
</header>
<hr id="line">
<section>
<div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1>
<p>...</p>
</div>
</div>
</section>
<hr id="line">
<section id="showcase">
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Appify</h3>
<p>...</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Title Two</h3>
<p>...</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="../images/DeathtoStock_Wired7.jpg" alt="...">
<div class="caption">
<h3>Title Three</h3>
<p>...</p>
</div>
</div>
</div>
</div>
</section>
</main>
<script src="http://ift.tt/1qRgvOJ"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
style.css
html, body {
padding: 0;
margin: 20px;
font-family: 'Quicksand', sans-serif;
}
header {
padding: 30px;
}
.logo {
height:100px;
width:100px;
border: 5px solid #f8981c;
border-radius: 100px;
}
.title {
text-transform: uppercase;
text-align:right;
font-weight: 900;
margin: ;
padding: 0;
}
#line{
border:0px;
height:4px;
width:95%;
background:#BCBBBB;
}
.jumbotron {
background: url(../images/DeathtoStock_Wired7.jpg) center center no-repeat;
background-size: cover;
height: 500px;
margin: auto;
}
.thumbnail {
text-transform: uppercase;
}
Aucun commentaire:
Enregistrer un commentaire