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>
Related
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>
In the index.html file I am able to do this an it works as designed:
<!DOCTYPE html>
<html>
<head>
<body style="background-color: #A8E4A0;">
<meta charset="utf-8" />
<title>Demo</title>
My partner would like to keep the background-color in our css file user-interface.css. Which makes sense to me but it is not working as I would expect.
When I enter the background-color it doesn't show up and leaves my background-color as white.
What am I missing?
* Universal Settings */
.body{
background-color : AE8E4A0;
font-family: Arial;
}
/* Search bar */
.heading {
font-size: 30px;
padding: 16px 0;
color: #444;
text-align: center;
}/*Container*/`enter code here`
Thanks
Scott
You have a minor error on your code. You should not put the dot (.) in front of body as it is not a class name, it's an element. Same for the heading. So your code should be like:
/* Universal Settings */
body{
background-color : #AE8E4A0;
font-family: Arial;
}
/* Search bar */
heading {
font-size: 30px;
padding: 16px 0;
color: #444;
text-align: center;
}/*Container*/
<!DOCTYPE html>
<html>
<head>
<link href="cssfilename.css">
<body style="background-color: #A8E4A0;">
<meta charset="utf-8" />
<title>Demo</title>
Also, you would need to link your CSS to your HTML file. Not that the "cssfilename.css" need to be replaced by the filename of your css file, and they need to be in the same directory.
added to CSS background-color: #A8E4A0; and verified the link in my htlm was correct
Try this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>My first Website!</title>
<style>
body {
background-color: #A8E4A0;
font-family: arial;
}
p {
color: green;
}
</style>
</head>
<body>
<p>This is a paragraph!</p>
</body>
</html>
If you want the style in a seperate .css file, try this:
/* style.css */
/* Needs to be in the same folder/directory as the .html file is. */
body {
background-color: #A8E4A0;
font-family: arial;
}
p {
color: green;
}
<!-- Index.html -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<meta charset="UTF-8" />
<title>My first Website!</title>
</head>
<body>
<p>This is a paragraph!</p>
</body>
</html>
Not too sure why, but it is showing up as a blank screen.
How it looks:
Here is my file structure:
css:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
background-color: #ffffff;
color: #555;
font-family: 'lato', 'Arial';
font-weight: 300;
font-size: 20px;
text-rendering: optimizeLegibility;
}
.row{
max-width: 1140px;
margin: 0 auto;
}
header{
background-image: url(/resources/css/images/hero.jpg);
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="resources/vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="resources/vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,100;0,300;0,400;1,300&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OmniFoods</title>
<header>
<div class="hero-text-box">
<h1>Goodbye junk food. Hello super Healthy meals</h1>
I’m hungry
Show me more
</div>
</header>
</head>
<body>
</body>
</html>
I guess you are looking for this in wrong directory, beacuse your style is already in "resources/css/". Try to continue this directory by doing this:
header{
background-image: url("./images/hero.jpg");
}
You need to wrap the soure in quotes like this
background-image: url("./resources/css/images/hero.jpg");
I am trying to create a wholy grail template using flexbox and css. I'm new to this...
I have tried everything but i can not get the code to display in graphics (if that make sense). Please advise.
<!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>Flexbox</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="flex-header">
HEADER
</header>
<main class="flex-main">
<nav class="flex-nav">
SIDENAV
</nav>
<article class="flex-article">
MAIN CONTENT
</article>
<aside class="flex-aside">
SIDEBAR
</aside>
</main>
<footer class="flex-footer">
FOOTER
</footer>
</body>
</html>
css file:
* {
margin: 2px;
}
body {
font-size: 24px;
color: white;`
height: 100vh;
text-align: center;
}
.flex-header {
background-color: #5070B5;
padding-top: 3rem;
padding-bottom: 3rem;
}
.flex-main {
}
.flex-nav {
background-color: #B95F21;
padding-top: 3rem;
}
.flex-article {
background-color: #81A43C;
padding-top: 3rem;
}
.flex-aside {
background-color: #B95F21;
padding-top: 3rem;
}
.flex-footer {
background-color: #5070B5;
padding-top: 3rem;
scroll-padding-bottom: 3rem;
}
It shows the text only, no graphics.
Please check line 6 of your CSS color: white;`.
There is an invalid character ` at the end of the line. Such errors may cause browser to stop processing any further CSS.
So I'm trying to add my CSS code to my HTML code on notepad++ but every time I run it, the only thing I see is my code and not all the content I want about website. How do I fix this?
Here is a snip of my html code:
<head>
<meta charset="utf-8">
<title>My Website</title>
<link href="cascade.css" rel="stylesheet" type="text/css">
</head>
<h1 style= "text-align:center; color: black;"> Nikki </h1>
<br></br>
//here is a snip of my css code
#charset "utf-8";
/* CSS Document */
nav div {
display: inline;
text-align: center;
width: 18%;
padding: 5px;
}
p
{
text-transform:none;
font-size: 20px;
color: black;
font-family: "proxima-nova";
letter-spacing:1px;
text-align: left;
}
Please find your updated code here, This is how you should add/write CSS to HTML :
I would suggest you to move your <style> tag to <head> area.
<html>
<head>
<meta charset="utf-8">
<title>My Website</title>
<link href="cascade.css" rel="stylesheet" type="text/css">
<style type="text/css" >
//here is a snip of my css code
#charset "utf-8";
/* CSS Document */
nav div {
display: inline;
text-align: center;
width: 18%;
padding: 5px;
}
p
{
text-transform:none;
font-size: 20px;
color: black;
font-family: "proxima-nova";
letter-spacing:1px;
text-align: left;
}
</style>
</head>
<body>
<h1 style= "text-align:center; color: black;"> Nikki </h1>
<br>
</body>
</html>
To apply css you have to put css under tag or you can use external stylesheet..Read more here
Please check this example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
nav div
{
display: inline;
text-align: center;
width: 18%;
padding: 5px;
}
p
{
text-transform:none;
font-size: 20px;
color: black;
font-family: "proxima-nova";
letter-spacing:1px;
text-align: left;
}
</style>
</head>
<body>
<div>This is Div.</div>
<p>This is paragraph.</p>
<div style="color:red; font-family:Verdana, Geneva, sans-serif;"> This is Inline CSS Style</div> <!--Inline CSS Style-->
</body>
</html>
You have used css for div and p tag and i have showed you how to use them according to your css. You can also give css in inline way but it just depends on need(mostly avoid it.)
Hope this will help or let me know if there is any confusion or issue..ty