So, let's say I've picked a font from google fonts with multiple size/bold/italic.
How do I use the different sizes that I've picked? I can't seem to change the size accordingly.
#import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght#0,100;0,200;0,400;0,500;0,700;1,400&display=swap');
.box1 {
font-family: 'Fira Sans', sans-serif;
}
.box2 {
font-family: 'Fira Sans 500;0', sans-serif;
}
.box3 {
font-family: 'Fira Sans 700;0', sans-serif;
}
<!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" />
<title>Flexbox 3</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="main1">
<div class="box1">box 1</div>
<div class="box2">box 2</div>
<div class="box3">box 3</div>
</div>
</body>
</html>
Your code should be:
#import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght#0,100;0,200;0,400;0,500;0,700;1,400&display=swap');
.box1 {
font-family: 'Fira Sans', sans-serif;
}
.box2 {
font-family: 'Fira Sans', sans-serif;
font-weight: 500;
}
.box3 {
font-family: 'Fira Sans', sans-serif;
font-weight: 700;
}
Related
This question already has answers here:
Why does the order of media queries matter in CSS?
(2 answers)
Closed last year.
I know this is a stupid question, but I'm having trouble with the small screen media query. I gave the image a class, so it should work. Also, when I tried to add an id, it didn't work, so is there something wrong with my code or the media query thing? Any assistance or advice would be greatly appreciated.
#media only screen and (max-width : 600px){
.mondaycont .monday{
position: relative;
width: 20em;
margin-top: 10px;
}
}
.mondaycont{
width: 84%;
}
.mondaycont .monday{
position: relative;
width: 40em;
margin-top: 20px;
}
.mondaytext{
font-family: 'Inter', sans-serif;
font-weight: 400;
color: white;
margin-top: 50px;
position: relative;
}
.mondaytextbold{
font-family: 'Inter', sans-serif;
font-weight: bold;
color: white;
margin-top: 10px;
position: relative;
}
<!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">
<title>ERROR 404</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<style>body{background-color: #262626;}</style>
<div class="container text-center"><p class=" mondaytext">This page feels like a monday...</p>
<p class=" mondaytextbold">Go Home</p> </div>
<div class="container-fluid mondaycont text-center">
<img class="img-fluid monday" src="./images/ERROR404.png" alt="404"></div>
</body>
</html>
Your media query is followed by a declaration that applies to all resolutions, overwriting your media query width definition. Media queries do not affect specificity, so the normal "last rule wins" applies.
Exchange the position of these two rules:
.mondaycont .monday {
position: relative;
width: 40em;
margin-top: 20px;
}
#media only screen and (max-width: 600px) {
.mondaycont .monday {
position: relative;
width: 20em;
margin-top: 10px;
}
}
.mondaycont {
width: 84%;
}
.mondaytext {
font-family: 'Inter', sans-serif;
font-weight: 400;
color: white;
margin-top: 50px;
position: relative;
}
.mondaytextbold {
font-family: 'Inter', sans-serif;
font-weight: bold;
color: white;
margin-top: 10px;
position: relative;
}
<!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">
<title>ERROR 404</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<style>
body {
background-color: #262626;
}
</style>
<div class="container text-center">
<p class=" mondaytext">This page feels like a monday...</p>
<a href="./index.html">
<p class=" mondaytextbold">Go Home</p>
</a>
</div>
<div class="container-fluid mondaycont text-center">
<img class="img-fluid monday" src="./images/ERROR404.png" alt="404"></div>
</body>
</html>
I have edited the default checkboxes look of HTML and created my own styles, the thing is that the property position of the checkbox makes it bypass other elements, how can I avoid that?
Example of what is happening: https://www.screencast.com/t/ELwluGBaX
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap css -->
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,500,700&display=swap" rel="stylesheet">
<!-- Our css -->
<title>Session Asigment</title>
<style>
label::before {
content: "";
border: solid 1px #FF6E0B;
position: absolute;
width: 1.4em;
height: 1.4em;
border-radius: 3px;
}
input[type=checkbox] {
display: none !important;
}
.checkbox-titles [type=checkbox]:checked + label:after {
/* check */
font-family: "Font Awesome 5 Free";
color: #fff;
content: "\f00c";
font-weight: 900;
padding-left: 0.2em;
padding-bottom: 0.2em;
/* Label */
position: absolute;
width: 1.4em;
height: 1.4em;
border-radius: 3px;
background-color: #FF6E0B;
}
</style>
</head>
<body>
<div class="checkbox-titles">
<input type="checkbox" value="test" id="test">
<label for="test"></label>
</body>
<!-- Bootstrap and jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<!--select2-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js" defer></script>
</html>
Position absolute removes the item from the flow of the DOM.
Elements that are not positioned absolutely act as if the ones that are dont even exist.
I suggest using something like Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Or i suggest using the normal positioning, position: static
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap css -->
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,500,700&display=swap" rel="stylesheet">
<!-- Our css -->
<title>Session Asigment</title>
<style>
label::before {
content: "";
border: solid 1px #FF6E0B;
position: absolute;
width: 1.4em;
height: 1.4em;
border-radius: 3px;
}
input[type=checkbox] {
display: none !important;
}
.checkbox-titles [type=checkbox]:checked + label:after {
/* check */
font-family: "Font Awesome 5 Free";
color: #fff;
content: "\f00c";
font-weight: 900;
padding-left: 0.2em;
padding-bottom: 0.2em;
/* Label */
position: absolute;
width: 1.4em;
height: 1.4em;
display: inline-block;
border-radius: 3px;
background-color: #FF6E0B;
}
.checkbox-titles label {
width: 1.4rem;
height: 1.4rem;
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="checkbox-titles">
<input type="checkbox" value="test" id="test">
<label for="test"></label><span>Test Bla Bla Bla</span>
</body>
<!-- Bootstrap and jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<!--select2-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js" defer></script>
</html>
I'm new to CSS stylesheets and I am trying to practice on making borders around pictures.
Here is my HTML and CSS code if this helps:
h1{
font-family: Verdana, sans-serif;
color:#576D94, serif;
}
p{
font-family: Garamond, serif;
font-size: 18px;
color:#4A4943;
}
img{
height:100px;
width:300px;
border:1px solid #4682b4;
}
<!DOCTYPE html>
<html>
<head>
<title>Result</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
</head>
<body>
<h1>Welcome to my webisite!</h1>
<p>This is Alex's website welcome!!</p>
<img src="http://entnet5.com/~c86950x1/wp-content/uploads/2015/07/small-animals.jpg" />
</body>
</html>
Here is the code I want you to look at specifically:
img{
height:100px;
width:300px;
border:1px solid #4682b4;
}
Here is my code I want everything inside the div class="col-md-6 col-md-offset-3"> To be completely centered for some reason when I'm trying the Bootstrap text-center class it's not centering properly.
Here is my index.html code. Also I'm using Bootstrap and a Google Font.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="bootstrap/js/jquery-2.2.3.min.js" type="text/javascript"></script>
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<link href='https://fonts.googleapis.com/css?family=Bree+Serif' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="bg1">
<div class="container">
<div class="row">
<div class="col-md-6">
<img class="lgsize" src="logo.gif" alt="Logo">
</div>
<div class="col-md-6">
</div>
</div>
<div class="row">
<div class="pushdown">
<div class="col-md-6 col-md-offset-3">
<span class="text-center title">Proto X Media</span>
<p class="text-center subtext">Professional Media Production & Hardware Consultation.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
And also here is my style.css file I have made.
.title {
font-family: 'Bree Serif', serif;
font-weight: 800;
font-size: 500%;
color: 373d44#;
text-align: center;
}
.bg1 {
background-image: url("bg2.jpg");
background-size: cover;
}
.lgsize {
width: 150px;
height: 140px;
}
.pushdown {
padding-top: 150px;
padding-bottom: 250px;
}
.menu {
font-size: 100%
font-family: 'Bree Serif', serif;
}
a {
color:inherit;
text-decoration: none;
}
a:hover {
background-color: transparent;
text-decoration: none;
}
.subtext {
text-align: center;
font-family: 'Bree Serif', serif;
font-size: 16px;
}
Thank you guys very much :) !
Elements to be aligned must have
display: block /*(or inline-block)*/
Also, put
text-align:center
on the parent div and remove from children.
I'm trying to place h2 right below h1, but it seems to be creating a huge gap/space. Is there a certain way to avoid this or is this an error in coding? Thank you.
Link to site:
http://younani.com/armen/musicindex.html
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Armens website</title>
<meta charset="utf-8">
</head>
<body>
<div class="clearfix" id="container">
<p><link rel="stylesheet" href="armen.css" /></p>
<h1><i>Four To The Floor</i></h1>
<h2>Artist Management & Events</h2>
<p></p>
<h3>“It’s not where you take things from,<br /> it’s where you take them to.” <br /> - Jean-Luc Godard</h3>
<div id="footer">
<p>Armen Sarkisian fttfmusic#gmail.com www.fttfmusic.com</p>
</div>
</div>
</body>
</html>
CSS:
h1 {color: #FFFFFF; font-family: ballparkweiner; font-size: 70px;
text-align: center; }
#font-face {
font-family: 'ballparkweiner';
src: url('ballw___.eot');
src: url('ballw___.eot?#iefix') format('embedded-opentype'),
url('ballw___.woff') format('woff'),
url('ballw___.ttf') format('truetype'),
url('ballw___.svg#ballparkweiner') format('svg');
font-weight: normal;
font-style: normal;
}
h2 {text-align: center; font-size: 40px; color: #FFFFFF; font-family: Cambria;}
body {background-color: #000000;}
h3 {text-align: center; color: #FFFFFF; }
#footer { font-weight: bold; text-align: center; font-family: Audimat;
clear: both; width:48%;
border-radius: 8px;
background-color:black;
text-align:center; margin-right:auto;
margin-left:auto; color: #FFFFFF; }
h* elements in browsers tend to have some .. fairly large default top and bottom margins. You can just set them specifically to some smaller value, even zero:
h1, h2 {
margin-top: 0;
margin-bottom: 0;
}
You can of course apply these rules to your specific headers.
Add this to your css:
h1, h2 {
margin: 0px;
}
It's the margin on the h1 and h2. Adjust them in your CSS, e.g.
h1, h2 {margin: 0;}
Code :-
You can try this
<div id="container" class="clearfix">
<p><link href="armen.css" rel="stylesheet"></p>
<h1 style="margin-bottom: -18px; margin-top: 0px;"><i>Four To The Floor</i></h1>
<h2 style="margin-top: 0px; margin-bottom: 0px;">Artist Management & Events</h2>
<p></p>
<h3>“It’s not where you take things from,<br> it’s where you take them to.” <br> - Jean-Luc Godard</h3>
<div id="footer">
<p>Armen Sarkisian fttfmusic#gmail.com www.fttfmusic.com</p>
</div>
</div>
REFER THIS LINK http://css-tricks.com/forums/discussion/3825/solved-h1-and-h2-tags-leaving-too-much-space/p1