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>
Related
I'm a total beginner at coding and my first problem I can't figure out is that when I use CSS sheet as a change of h1 and h3 color it basically doesn't change.
I tried to set a <h1> text color in CSS sheet and it didn't change.
body {
background-color: #EEEEEE;
}
h1 {
color: blue;
}
h3 {
color: blue;
}
hr {
border-color: grey;
border-style: none;
border-top-style: dotted;
border-width: 5px;
width: 5%;
}
<h1>H1</h1>
<hr/>
<h3>H3</h3>
That's my HTML code:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Kacper's Personal Site 💲</title>
<link rel='stylesheet' href='css/styles.css'>
</head>
<body>
<table>
for background color it works properly.
If you have created a separate file of CSS then link your CSS file to an HTML file like <head><link rel="stylesheet" href="style.css"></head>,see here https://www.freecodecamp.org/news/how-to-link-css-to-html/
When you use a separate CSS file, you need to link that CSS file to the html document.
<!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>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>H1</h1>
<hr/>
<h3>H3</h3>
</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?
I am trying to use Visual Studio Code (VSC) to practice on. When I update my index.html file, the live server will change. When I update my style.css file, the live server will not change. Is something wrong with the way I'm doing CSS?
My code so far in 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">
<title>Product Landing Page</title>
</head>
<body>
<nav class="navbar">
<div class="logo">
<img src="https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/articles/health_tools/12_powerhouse_vegetables_slideshow/intro_cream_of_crop.jpg"
alt="logo"
class="logo-image">
</div>
<div class="links">
How it's Done
Available
Buy
</div>
</nav>
</body>
Code in style.css:
* {
margin: 0;
}
body {
background-color: white;
color: rgb(70, 69, 69);
font-family:Arial, Helvetica, sans-serif;
}
.navbar {
position: fixed;
top: 0;
min-height: 60px;
padding: 0px 20px;
width: 90%;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #ffffffee;
}
Issue 1
Import style.css with <link> tag inside <head> tag. For exapmle,
<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>Product Landing Page</title>
<link rel="stylesheet" href="style.css">
</head>
Issue 2
Maybe this is a typo:
❌background-color: #ffffffee;
✅background-color: #ffffee;
You haven't linked your style.css file with index.html so that is why it is not updating live. To do that create this code under Meta tag.
hope it resolves the issue.
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>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test 2</title>
<link href="./test2.css" rel="stylesheet" />
</head>
<body>
<article>First</article>
<article>Second</article>
<article>Third</article>
<article>Fourth</article>
</body>
</html>
I need to separate articles in only css file. Without adding any attirbutes or something. Without touching to this HTML file.
article[value = 'First'] {
color: red;
}
article:text('First'){
color: red
}
article[text$="Second"]{
color: red
}
I tried them and they are not working.
Use the :nth-of-type selector.
article:nth-of-type(2) {
background: red;
}
article:nth-of-type(5) {
color: blue;
font-weight: bold;
}
<article>First</article>
<article>Second</article>
<article>Third</article>
<article>Fourth</article>
<article>Fifth</article>
<article>Sixth</article>