I have been given HTML ready to go, now I have been tasked to create the CSS for it. Before I properly start I think my CSS is not applying into my HTML. I don't know if its the way I linked it but I have checked.
This is the HTML
.header {
width: 100%;
border: 3px solid #000000;
color: #C8E5E3;
}
.body {
background-color: powderblue;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- Exercise2.html An HTML web page with CSS
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Jake's Coffee Shop</title>
<link rel="stylesheet" href="jakecss.css">
</head>
<body>
<h1> Jake's Coffee Shop </h1>
Home
Menu
Music
Jobs
<p>Come in and experience...</p>
<img src="coffee.jpg" alt="coffee cup" width="200" height="200">
<ul>
<li>Specialty Coffee and Tea</li>
<li>Freshly made sandwiches</li>
<li>Bagels, Muffins, and Organic Snacks</li>
<li>Music and Poetry Readings</li>
<li>Open mic nights</li>
<li> ... </li>
</ul>
<p>23 Pine Road<br> Nottingham, NG1 5YU <br> 0115 9324567</p>
<p> Copyright © 2011 Jake's Coffee House<br>
jake#jcoffee.com</p>
</body>
</html>
Thanks.
You don't have any tags that use your header class.
.body looks for a class that's called body. To decorate your <body> tag, you need to do it like this:
body {
background-color: powerblue
}
You're missing the header html tag.
For tags part of html the css is applied by using
header {
//some value
}
For class attributes it's
.header_class {
//some value
}
For tags it's
#header_tag {
//some value
}
So your body is a html tag and should be
body {
background-color: grey;
}
Related
*That's the file index.html*
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="styles\styles.css" rel="stylesheet" type="text\css">
<title>24/7-Clanshop.de</title>
</head>
<body>
<h1>24/7-Clanshop</h1>
<p>The official shop for your 24/7 streetstyle!</p>
<ol>
<li>Hoodies</li>
<li>Jogginghosen</li>
<li>Socken</li>
<li>Accessoires</li>
</ol>
<p>Look up to the Channel</p>
<img src="pictures\testpicture.jpg" alt="My test picture">
</body>
</html>
*That's the file styles.css*
p, li, h1 {
color:#ff0000;
width: 500px;
border: 1px solid black;
}
When i run this programm, neither the picture nor the font color can be displayed. Is it due to my browsersettings or am I overlooking something completely different?
I tried it in both Chrome and Firefox, so there doesn't seem to be a problem with the browser. My CSS is valid, but when I run my HTML through validation it says "Bad value “stylesheet” for attribute rel on element link: The string “stylesheet” is not a registered keyword." which I'm not sure what that means. Here is my code:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel =“stylesheet” href=“javajam.css” type=“text/css”>
<meta charset="UTF-8">
<title>JavaJam Coffee House</title>
</head>
<body>
<h1>JavaJam Coffee House</h1>
<nav><b>
Home
Menu
Music
Jobs
</b></nav>
<ul>
<li>Specialty Coffee and Tea</li>
<li>Bagels, Muffins, and Organic Snacks</li>
<li>Music and Poetry Readings</li>
<li>Open Mic Night Every Friday</li>
</ul>
<dl>
<dt>54321 Route 42</dt>
<dd></dd>
<dt>Ellison Bay, WI 54210</dt>
<dd></dd>
<dt>888-555-5555</dt>
<dd></dd>
</dl>
<br>
<footer><small><i>
Copyright © 2016 JavaJam Coffee House
</i></small></footer>
</body>
</html>
CSS
body {
color : #2E0000;
background-color : #F5F5DC;
}
h1 {
background-color : #D2B48C;
}
footer {
color : #000000;
background-color : #D2B48C;
}
Try this instead:
<link rel="stylesheet” href="javajam.css" type="text/css">
I replaced some of the weird quotes you had in there.
I'm new to Web Development, so I need some help regarding my code. I have validated this code online and is error free, but why the CSS attributes such as background-color etc. are not been applied in the HTML?
Also, I would really appreciate if some could comment on my HTML coding style. Is it poor?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaJam Coffee House</title>
<link rel="stylesheet" href="javajam.css">
</head>
<body>
<header>
<h1>JavaJam Coffee House</h1>
</header>
<nav>
<b>Home Menu</b>
</nav>
<main>
<h2>Relax at JavaJam</h2>
<ul>
<li>Specialty Coffee and Tea</li>
<li>Bagels, Muffins, and Organic Snacks</li>
<li>Music and Poetry Readings</li>
<li>Open Mic Night</li>
</ul>
<div>
54321 Route 42<br />
Ellison Bay, WI 54210<br />
888-555-5555<br /><br />
</div>
</main>
<footer>
<small><i>Copyright © 2016 JavaJam Coffee House<br />
abc.xyz.com</i></small>
</footer>
</body>
</html>
The CSS file javajam.css is:
body {
background-color: #ffffcc;
color: red;
font-family: Verdana, Arial, sans-serif;
}
Try putting your < link > into the < body >, for me forexample, I had two < link >-s and they just bugged up each other. CSS most likely to work, when it placed in < body >, give it a try, hope helped. ;)
Here is my html code :---------------------------------------------------
<!doctype html>
<html>
<head>
<title>My webpage </title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<h1> My website </h1>
<ul>
<li> Home</li>
<li> page 2 </li>
<li> page 3 </li>
</ul>
<h2> This is my homepage</h2>
<p> All of my homepage content</p>
</body>
</html>
the background is suppose to go red but doesn't ?
css code from another file:
body{
background:#red;
}
When using a named colour you do not need to use a hash, hashes are only used for hexadecimal colours.
In order to change the background to red, use the following code:
background: red;
Or, you can do this (#ff0000 is the hexadecimal code for red):
background: #ff0000;
Named colors do not need hash sign:
body{
background:red;
}
I'm doing a sample webpage, but the results aren't coming along as I'd planned. What's supposed to happen is a black rectangular header box is supposed to show. I'll give you the sample code.
HTML CODE / learningcss.html
<!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>
<link href="div.css" rel="stylesheet" type="text/css"
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>CSS Tutorial 1</title>
</head>
<p>
We are creating this page to see how to make a better looking website.
</p>
<p>
We are creating this page to see how to make a better looking website.
</p>
<div id="header">
This is a paragraph
</div id="header">
<body>
<div id="column 2">
<h1>The Header</h1>
</div>
<div id="Column 2">
This is a basic CSS<br>
<br>
Tokyo<br>
</div>
<div id="Column 3">
<h1><a href="<a href="http://gymforgeeks.userecho.com/http://gymforgeeks.userecho.com/">
This is GymForGeeks
</h1>
<p>
This is just a sample page using CSS.
</p>
<p>
Yet another sample text content.
</p>
</div>
<div id="footer">
Copyright Queensborough
</div>
</body>
<body>
<footer>
<p>Posted by: Mike</p>
<p>This is a test: <a href="mailto:someone#example.com">
someone#example.com</a>.</p>
</footer>
</body>
</html>
div.css
#Header {
background:#000;
height:100px
}
#header {
color: white
}
You have to close an opened div with only </div> not </div id="header">
CSS is is casesensitive so you have to use #header not #Header
And you can combine those two definitions:
#header {
background:#000;
height:100px;
color: white;
}
Hope i could help a little.
I cleaned up your mess a little further:
http://codepen.io/anon/pen/qacAg
Explanation:
after you closed the </head> you have to open a <body>
this is how a working link looks like: TEXT
you should only use id's for unique areas or divs not multiple times - use classes instead <div class="THECLASS">THE CONTENT</div>
dont use spaces in classes or id names it will create multiple classes
Your code is totally wrong:
1) body is the starting element, after /head, and that is the last element before /html and use it only once.
2) When you close the div, no need to add id.
3) Id should be one string
4) You use a href badly
5) You do not close your css
See this: http://jsfiddle.net/7uggw2x6/1/
HTML
<!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>
....
</head>
<body>
<p>We are creating this page to see how to make a better looking website.</p>
<p>We are creating this page to see how to make a better looking website.</p>
<div id="header">This is a paragraph</div>
<div id="column_1"><h1>The Header</h1></div>
<div id="column_2">This is a basic CSS<br><br>Tokyo<br></div>
<div id="column_3">
<h1>This is GymForGeeks</h1>
<p>This is just a sample page using CSS.</p>
<p>Yet another sample text content.</p>
</div>
<div id="footer">Copyright Queensborough</div>
<footer>
<p>Posted by: Mike</p>
<p>This is a test: someone#example.com./p>
</footer>
</body>
</html>
CSS
#header {
background:#000;
height:100px;
color: white;
}
This is the valid version of your HTML:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>CSS Tutorial 1</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>We are creating this page to see how to make a better looking website.</p>
<p>We are creating this page to see how to make a better looking website.</p>
<div id="header">This is a paragraph</div>
<div class="column-2">
<h1>The Header</h1>
</div>
<div class="column-2">This is a basic CSS<br><br> Tokyo<br></div>
<div class="column-3">
<h1><a href="<a href="http://gymforgeeks.userecho.com">This is GymForGeeks</h1>
<p>This is just a sample page using CSS.</p>
<p>Yet another sample text content.</p>
</div>
<div id="footer">Copyright Queensborough</div>
<footer>
<p>Posted by: Mike</p>
<p>This is a test: someone#example.com.</p>
</footer>
</body>
</html>
Some things you should know:
you should not have multiple elements with the same id
any HTML page can only have 1 body element
id must be string and should not contain spaces. e.g. column-3
any HTML tag (p, div, footer, span, ..) must be inside <body></body> tag
use classes if you want to apply same style to multiple elements
In order to make your elements appear in columns you will need to use a grid framework (getbootstrap.com, 960.gs, ..) or create your custom CSS that will order your elements:
e.g. style.css:
.column-2 {
float: left;
width: 20%;
}
.column-3 {
float: left;
width: 30%;
}
This is only an example. You will need to do some digging until you get to your desired grid.
You should use in your CSS-File following style:
#header {
background-color: #000;
color: #FFF;
height: 100px;
}
You can learn the Basic of HTML and CSS at www.w3schools.com.
I hope I could solve your problem.
Regards
t.koelpin
you have a few problems. The structure of your html is incorrect. the footer element goes inside
the body tag. You have to have a closing tag for your divs and your content goes in the middle.
<!DOCTYPE html>
<html>
<head>
<link href="div.css" rel="stylesheet" type="text/css"
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>CSS Tutorial 1</title>
<!-- this section is for loading scripts, css and metadata -->
</head>
<body>
<!-- this section is for content -->
<div class='header'>
Header text
</div>
<footer>
<!-- footer tags are HTML5 Tags and should be used with the HTML5 doctype -->
</footer>
</body>
</html>
The css
#header {
background:#000;
height:100px;
color: white;
}