Why external CSS is not working with the HTML? - html

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. ;)

Related

CSS isn't applying into HTML

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;
}

Why is the <nav> element continue in the subsequent lines, although is closed?

I started learning html and I encountered a first problem. If someone can explain me why although the nav element is closed is still continues to be applied to the subsequent elements?
See the live example..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6/html5shiv.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.1/modernizr.min.js"></script>
<title>Example Cafe - community cafe in Newguay, Cornwall, UK </title>
</head>
<body>
<section>
<h1>Introduction</h1>
</section>
<section>
<h1>Recipes</h1>
</section>
<nav>
<p><a href="recipes.html">Recipes</p>
<p><a href="men.html">Menu</p>
<p><a href="operating_times.html">Operating Times</p>
<p><a href="contact.html">Contact</p>
</nav>
<hr>
<h1>EXAMPLE CAFE</h1>
<p>Welcome to example cafe, We will be developing this site throughout
the book.</p>
</body>
</html>

Your <a> tag was not closed, so any text/code there after will be treated as sub-element of <a> tag, and hence you are getting the effect of <a> tag even after the <nav> tag.
NB: There is nothing special to <nav> tag. Don't blame that innocent. :P
See there the running example of your code..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6/html5shiv.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.1/modernizr.min.js"></script>
<title>Example Cafe - community cafe in Newguay, Cornwall, UK </title>
</head>
<body>
<section>
<h1>Introduction</h1>
</section>
<section>
<h1>Recipes</h1>
</section>
<nav>
<p>Recipes</p>
<p>Menu</p>
<p>Operating Times</p>
<p>Contact</p>
</nav>
<hr>
<h1>EXAMPLE CAFE</h1>
<p>Welcome to example cafe, We will be developing this site throughout
the book.</p>
</body>
</html>

You are not closing anchor tag, and remove <p> tag, it create subsequesnt line
every time
<nav>
Recipes
<a href="men.html">Menu<a/>
<a href="operating_times.html">Operating Times<a/>
<a href="contact.html">Contact<a/>
</nav>

HTML Nav tag not working as intended

I am dabbling with html, and want to make my own website. I was trying to get the links to my most frequently used websites on the left of the page, as i belive that is what nav does. Also, I can not seem to get the body of my text in the center of my page, nor the header. This is my code;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My first webpage</title>
</head>
<header>Ian Witkowski</header>
<nav>
<h1>My Favorite Websites</h1>
<ul>
<li><a href=http://www.youtube.com/>YouTube</a>
<li><a href=http://www.google.com/>Google</a>
<li><a href=http://www.reddit.com/>Reddit</a>
</ul>
</nav>
<body>
<article>
<h1>The Penultimate Website</h1>
<h2>The Official Homepage of Ian Witkowski</h2>
<p>Thank you for visiting my webpage!</p>
<dl>
<dt><h3>Ian Witkowski</h3></dt>
<dd>A cool dude</dd>
</dl>
<p>
Reasons Ian is cool;</p>
<ul>
<li>He is nice</li>
<li>He rides bikes</li>
<li>He likes computers</li>
<li>He can code his own website</li>
</ul>
<p>Here is a link for my arbitrary code test page;</p>
<ul>
<li>Ian2</li>
</ul>
</article>
</body>
</html>

nav does nothing. It's just a tag like div. But part of the HTML5 specification, they added section, nav, footer, header tag to simplify the description of the page.
Without css, it's just a tag without any special behavior regarding design
Second thing, you have error on your html. Everything thing except the head part shoud be inside body (including nav)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My first webpage</title>
</head>
<body>
<header>Ian Witkowski</header>
<nav>
<h1>My Favorite Websites</h1>
<ul>
<li><a href=http://www.youtube.com/>YouTube</a>
<li><a href=http://www.google.com/>Google</a>
<li><a href=http://www.reddit.com/>Reddit</a>
</ul>
</nav>
<article>
<h1>The Penultimate Website</h1>
<h2>The Official Homepage of Ian Witkowski</h2>
<p>Thank you for visiting my webpage!</p>
<dl>
<dt><h3>Ian Witkowski</h3></dt>
<dd>A cool dude</dd>
</dl>
<p>
Reasons Ian is cool;</p>
<ul>
<li>He is nice</li>
<li>He rides bikes</li>
<li>He likes computers</li>
<li>He can code his own website</li>
</ul>
<p>Here is a link for my arbitrary code test page;</p>
<ul>
<li>Ian2</li>
</ul>
</article>
</body>
</html>

CSS doesn't seem to be working in my HTML file. How come?

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.

Linking between a navigation list and headings

I'm having trouble linking from some nav lists to some h2 headings.
When I click the navigation bar in my document, I want it to jump down to the correct heading in the page. Here's my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Wisconsin Colleges and Universities</title>
<script src="modernizr-1.5.js"></script>
<link href="hestyles.css" rel="stylesheet" type="text/css" />
<base href="url" target="collegeWin"/>
</head>
<body>
<header>
<img src="highered.jpg" alt="Higher Education" />
</header>
<section>
<h1>Wisconsin Colleges and Universities</h1>
<nav>
<ul>
<li>Private Colleges and Universities</li>
<li>Technical College System</li>
<li><a>University of Wisconsin System</a></li>
</ul>
</nav>
<h2 id="private">Private Colleges and Universities</h2>
<ul>
<li>Alverno College</li>
<!-- ... -->
<li>Wisconsin Lutheran College</li>
</ul>
<h2 id="technical">Technical College System</h2>
<ul>
<li>Blackhawk Technical College</li>
<!-- ... -->
<li>Wisconsin Indianhead Technical College</li>
</ul>
<h2 id="public">University of Wisconsin System</h2>
<ul>
<li>UW-Green Bay</li>
<!-- ... -->
<li>UW-Whitewater</li>
</ul>
<footer>
Higher ♦ Ed: The Directory of Higher Education Opportunities
</footer>
</section>
</body>
</html>
As you can see, I've put IDs on the h2 headers and I try linking to them using #-prefixed fragment IDs. But for some reason I'm getting an error message stating "Cannot find. make sure the path or Internet address is correct."

This is because you have a tag base. Remove it and it'll work. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

Try like this
<li>Private Colleges and Universities</li>
<li>Technical College System</li>
<li>University of Wisconsin System</li>
</ul>