I have font specs in Adobe XD with screen width 1280px
font: Bold 29px/43px Poppins;
letter-spacing: -0.87px;
And I want to copy this to work responsive in my html/css app, I tried copied it as it is, but doesn't work properly, I just searched for the font and here's its link, How can I achieve this?
You can use this code
body {
font-family: 'Poppins', sans-serif;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
</head>
<body>
</body>
</html>
You will need an html file where you include the Poppins font css file.
Then you need to set your media query to refer to your responsive mode.
And then with a simple class selector for the text element you assign the font values from AdobeXd.
#media (max-width: 1280px) {
.text {
font-family: Poppins;
font-weight: 700; /* Bold */
font-size: 29px;
line-height: 43px;
letter-spacing: -0.87px;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
</head>
<body>
<p class="text">Some text</p>
</body>
</html>
Related
I am working on a simple website for studying purposes. My goal is to keep all the code in a HTML5 format and use the new semantic tags as much as possible. In the code below the font and size changes that I make are not being reflected to the website, so no changes in the css is applied to the html page. I am not sure what is going on:
Here is the html and css
<!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>Dasmoto's Arts & Crafts</title>
</head>
<body>
<header>
<span>Dasmoto's Arts & Crafts</span>
<img src="./resources/images/pattern.jpeg" alt="">
</header>
</body>
</html>
header {
position: relative;
}
header span {
position: absolute;
font-family: Arial, Helvetica, sans-serif;
color: khaki;
}
header img {
position: absolute;
width: 100%;
height: 150px;
}
I'm trying to add the white i on blue button information emoji to a webpage and I'm only seeing the i on a white background. Hoping someone can help.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset=“UTF-8”>
</head>
<body>
<p>For more information ℹ</p>
</body>
</html>
You missed the meta charset on the top. Don't forget to include that. Also from your question it seems like you missed the color style. Here's the full code
a {
color: #ffffff;
text-decoration: none;
font-weight: bold;
background-color: #00a6ed;
width: 2.5rem;
height: 2.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
border-radius: .5rem;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../css/global_styles.css" rel="stylesheet" />
<meta charset=“UTF-8”>
</head>
<body>
<p>i</p>
</body>
</html>
.pixelUnit {
font-size: 30px;
margin: 1px;
padding: 1px;
border: 1px solid brown;
background-color: rgb(136, 3, 3);
color: brown;
text-align: center;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', 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">
<link rel="stylesheet" href="Basic.css">
<title>Basic</title>
</head>
<body>
<div class="pixelUnit">
Think before you ink! - Pixels
</div>
</body>
</html>
For some reason the div tag with the class specified is not accepting the CSS. At first I thought the CSS file is not getting loading but any other tag that I use and specify the styling in the CSS file is showing up just fine
<div class="pixelUnit">
You have a non-breaking space between div and class. Replace it with a regular space.
Tools like a markup validator and a unicode decoder can help you identify problems like this.
.pixelUnit {
font-size: 30px;
margin: 1px;
padding: 1px;
border: 1px solid brown;
background-color: rgb(136, 3, 3);
color: brown;
text-align: center;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', 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">
<link rel="stylesheet" href="Basic.css">
<title>Basic</title>
</head>
<body>
<div class="pixelUnit">
Think before you ink! - Pixels
</div>
</body>
</html>
Your code is working fine. I had copied and tested on notepad++, i think your problem was with the invalid space unicode.
.pixelUnit {
font-size: 30px;
margin: 1px;
padding: 1px;
border: 1px solid brown;
background-color: rgb(136, 3, 3);
color: brown;
text-align: center;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', 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">
<link rel="stylesheet" href="Basic.css">
<title>Basic</title>
</head>
<body>
<div class="pixelUnit">
Think before you ink! - Pixels
</div>
</body>
</html>
Some things I would look into:
Is Basic.css in the same folder as your HTML file?
I know you said the CSS file appears to be working because you can style other elements. Have you tried applying the .pixelUnit class to another element and seeing if those styles are picked-up there?
Is .pixelUnit the only class in your CSS file? If not, do you have any other styles that might override .pixelUnit further down in the CSS file? I'm thinking of styles directly applied to div tags.
If you inspect the element in your browser, are you able to see the styles represented in the style pane?
This question already has answers here:
Specificity of inherited CSS properties
(4 answers)
Closed 1 year ago.
This is my code where I was testing Specificty in CSS.The specificity of ul#Drinks is (1,0,1) wheras the specificity of .hello is (0,1,0) . Can anyone please tell why the second item of the list(Mountain Dew) is coming out to be brown and not blue ? It would be a great help
Code:
<!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>Specificity</title>
<style>
.hello{
color:brown;
font-weight: bold;
font-style: unset;
}
ul#Drinks{
color:darkblue;
font-size: 30px;
font-style: italic;
}
</style>
</head>
<body>
<ul id="Drinks">
<li>fanta</li>
<li class="hello">Mountain Dew</li>
<li>Pepsi</li>
</ul>
</body>
</html>
In CSS, "specificity" applies to the application of properties to a single element with multiple classes or other properties targeted by selectors (learn more here). In this case, there is no concern of specificity because your <li> only has the single class with corresponding CSS, and its styles will override those of its parent.
Try this:
<!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>Specificity</title>
<style>
.hello{
color:brown;
font-weight: bold;
font-style: unset;
}
ul[id="Drinks"] * {
color: darkblue;
font-size: 30px;
font-style: italic;
}
</style>
</head>
<body>
<ul id="Drinks">
<li>fanta</li>
<li class="hello">Mountain Dew</li>
<li>Pepsi</li>
</ul>
</body>
</html>
I'm trying to upload the Montserrat font from google fonts on a website I'm building and for some reason it's not happening. I've read a separate Q&A on here that suggests it may be an issue with chrome?
I want Montserrat specifically because it's the closest google font likeness to Gotham.
This is how I have it loaded on my file -
style.css
#import url(https://fonts.googleapis.com/css?family=Montserrat:400,500,80);
body{
font-family: 'Montserrat', sans-serif;
}
I tried it also in my <head> section in index.html underneath the bootstrap link -
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,800" rel="stylesheet">
I don't know whether it's an issue with bootstrap not wanting to override or a separate issue. Any assistance appreciated.
Follow the below code.
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,800" rel="stylesheet">
<style>
body {
font-family: 'Montserrat', sans-serif;
}
</style>
<body>
<h1>Montserrat</h1>
</body>
I had a similar issue and this is how I solved it.
First import the "Montserrat" font to the "bootstrap.css"
#import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700&display=swap');
then replace the font-family with Montserrat;
body {
margin: 0;
font-family: Montserrat;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
background-color: #fff;
}