Essentially I need to figure out how to Create a large black box and then on top of it I want to have the text "MyCloud" with the "My" being white and the "Cloud" being another color. I got the text to finally be different colors but now the black box has disappeared.
<!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>MyCloud</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<h1>
<div myCloud>
<span style="color: red">My</span><span style="color: blue;">Cloud</span>
</div>
</h1>
<h2>Completed Projects:</h2>
<h3>Contact Us</h3>
</body>
</html>
*{
background-color: rgb(255, 255, 255);
}
.myCloud{
background-color: black;
}
h2{
background-color: #6331a8;
text-align: center;
color: white;
}
h3{
color: black;
background-color: #599ed4;
text-align: right;
text-decoration: underline;
padding-right: 30px;
}
you forget something in your code HTML.
try to add class before myCloud
like this:
class="myCloud"
You currently have:
<h1>
<div myCloud>
<span style="color: red">My</span><span style="color: blue;">Cloud</span>
</div>
</h1>
Looks like you forgot class= before myCloud.
Try this:
<h1>
<div class="myCloud">
<span style="color: red">My</span><span style="color: blue;">Cloud</span>
</div>
</h1>
EDIT: You were setting all background colors to be white with the * style at the top of your stylesheet.
.myCloud{
background-color: black;
}
h2{
background-color: #6331a8;
text-align: center;
color: white;
}
h3{
color: black;
background-color: #599ed4;
text-align: right;
text-decoration: underline;
padding-right: 30px;
}
<!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>MyCloud</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<h1 class="myCloud">
<span style="color: red">My</span><span style="color: blue;">Cloud</span>
</h1>
<h2>Completed Projects:</h2>
<h3>Contact Us</h3>
</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>
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>
.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?
In my head I want to use the "Your Image is More Important Than Ours" with an emphasis on More Important.
I also want that to be underlined and shadowed to match a red background (white shadow). That emphasis also I'm debating if it should blink or fade in.
For some reason, my css isn't working on it.
HTML CODE:
<!-- This is a HTML Document-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="dld.css">
<title>Dave's Logo Designs</title>
</head>
<header>
<div id="header">
<h1>Your Image is <em>More Important</em> Than Ours</h1>
</div>
</header>
<body>
<h1>Welcome to the official site of Dave's Logo Designs<h1>
</body>
</html>
CSS So Far:
header {
width: 100%;
height: 200px;
}
header:h1 {
color: red;
text-shadow: 0px 2px 2px white;
font-size: 25px;
font-family: impact;
}
header:em {
color: white;
font-weight: bold;
text-decoration: underline;
font-size: 30px;
font-family: impact;
}
Nothing's working. Probably something stupid on my end. Thanks for the help in advance.
You should put header tag inside yout body tag.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="dld.css">
<title>Dave's Logo Designs</title>
</head>
<body>
<header>
<div id="header">
<h1>Your Image is <em>More Important</em> Than Ours</h1>
</div>
</header>
<h1>Welcome to the official site of Dave's Logo Designs<h1>
</body>
</html>
and also change your css selector
header {
width: 100%;
height: 200px;
}
header h1 {
color: red;
text-shadow: 0px 2px 2px white;
font-size: 25px;
font-family: impact;
}
header em {
color: white;
font-weight: bold;
text-decoration: underline;
font-size: 30px;
font-family: impact;
}
note the space between header and h1.
It will result like this (darkgreen background added to show italicized text which is white).