.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?
Related
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>
I need to recreate this:
My Attempt:
I'm trying to recreate the first picture above and the result I got was the 2nd picture I need
this is a university homework, specifically how do you add a "Use the menu to select different stylesheets" in that way below the Header, at first i tried adding another but the result is as you can see
my code:
<!DOCTYPE html>
<html>
<body>
<head>
<style>
h1 {
text-align: center;
background-color: lightgreen;
font-family: Arial;
font-size: 200%;
}
h2 {
text-align: center;
background-color: lightgreen;
font-family: Arial;
font-size: 100%;
}
</style>
</head>
</body>
<h1>Welcome to my Homepage</h1>
<h2>Overview of Homepage</h2>
</html>
I think you want something like 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>Document</title>
<style>
.content{background-color: #2ed274; text-align: left; padding: 20px;}
body{color: white; font-family: Arial;}
h1 {font-size: 30px; margin-bottom: 0;}
h2 {font-size: 15px; margin-top: 0;}
</style>
</head>
<body>
<div class = 'content'>
<h1>Welcome to my Homepage</h1>
<h2>Overview of Homepage</h2>
</div>
</body>
</html>
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 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>