# Can't connect my css to the html



## wmorri (May 29, 2008)

Hi,

I feel really stupid right now. I am trying to connect my css to my html and it really isn't working. I have been working on this for a couple of hours today and it isn't working. I will post my html and let you all look at it and I can post my css too if you need it. both files are in my var/www/topta folder if you need to know.


```
<!DOCTYPE html>

<html lang="en">

<head>

<meata charset="utf-8" />

<title>Smashing HTML5!</title>



<link rel="stylesheet" href="main.css" type="text/css" />



<!--[if IE]>

	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

<!--[if lte IE 7]>

	<script src="js/IE8.js" type="text/javascript"></script><![endif]-->

<!--[if lt IE 7]>



	<link rel="stylesheet" type="text/css" media="all" href="css/ie6.css"/></[endif]-->

</head>



<body id="index" class="home">

<header id="banner" class="body">

	<h1><a href="#">Smashing HTML5! <strong>HTML5 in the year <del>2022</del> <ins>2009</ins></strong></a></h1>



	<nav><ul>

		<li class="active"><a href="#">home</a></li>

		<li><a href="#">portfolio</a></li>



		<li><a href="#">blog</a></li>

		<li><a href="#">contact</a></li>

	</ul></nav>



</header><!-- /#banner -->



<aside id="featured" class="body"><article>

	<figure>

		<img src="images/temp/sm-logo.gif" alt="Smashing Magazine" />

	</figure>

	<hgroup>



		<h2>Featured Article</h2>

		<h3><a href="#">HTML5 in Smashing Magazine!</a></h3>

	</hgroup>

	<p>Discover how to use Graceful degradation and Progressive Enhancement techniques to achieve an outstanding, cross-browser <a href="http://dev.w3.org/html5/spec/Overview.html" rel="external">HTML5</a> and <a href="http://dev.w3.org/html5/roadmap/" rel="external">CSS3</a> website today!</p>

<article></aside><!-- /#featured -->



<section id="content" class="body">



	<ol id="posts-list" class="hfeed">



		<li><article class="hentry">

			<header>

				<h2 class="entry-title"><a href="# rel="bookmark" title="Permalink to the POST TITLE">This be the title</a></h2>

			</header>



			<footer class="post-info">

				<abbr class="published" title="2005-10-10T14:07:00-07:00"><!-- YYYYMMDDThh:mm:ss+ZZZZ -->

					10th October 2005

				</abbr>



				<address class=vcard author">

					By <a class="url fn" href="#">Enrique Ramirez</a>



				</address>

			</footer><!-- /.post-info -->



			<div class="entry-content">

				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vernenatis nunc vitae libero iaculis elementum. Nullam et justo <a href="#">non sapien</a> dapibus blandit nec et leo. Ut ut malseuada tellus.</p>



			</div><!-- /.entry-content -->

		</article></li>



		<li><article class="hentry">

			...

		</article></li>



		<li><article class="hentry">

			...

		</article></li>

	</ol><!-- /#posts-list -->



</section><!-- /#content -->



<section id="extras" class="body">

	<div class="blogroll">

		<h2>blogroll</h2>

		<ul>

			<li><a href="#" rel="external">HTMl5 Doctor</a></li>

			<li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>

			<li><a href="#" rel="external">Smashing Magazine</a></li>



			<li><a href="#" rel="external">W3C</a></li>

			<li><a href="#" rel="external">Wordpress</a></li>

			<li><a href="#" rel="external">Wikipedia</a></li>



			<li><a href="#" rel="external">HTML5 Doctor</a></li>

			<li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>

			<li><a href="#" rel="external">Smashing Magazine</a></li>



			<li><a href="#" rel="external">W3C</a></li>

			<li><a href="#" rel="external">Wordpress</a></li>

			<li><a href="#" rel="external">Wikipedia</a></li>



			<li><a href="#" rel="external">HTMl5 Doctor</a></li>

			<li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>

			<li><a href="#" rel="external">Smashing Magazine</a></li>



			<li><a href="#" rel="external">W3C</a></li>

			<li><a href="#" rel="external">Wordpress</a></li>

			<li><a href="#" rel="external">Wikipedia</a></li>

		</ul>

	</div><!-- /.blogroll -->



	<div class="social">

		<h2>social</h2>

		<ul>



			<li><a href="http://delicious.com/enrique_ramirez" rel="me">delicious</a></li>

			<li><a href="http://digg.com/users/enriqueramirez" re="me">digg</a</li>

			<li><a href="http://facebook.com/enrique.ramirez.velez" rel="me">facebook</a></li>



			<li><a href="http://www.lastfm.ex/users/enrique-ramirez" rel="me">last.fm</a></li>

			<li><a href="http://website.com/fee" rel="alternate">rss</a></li>

			<li><a href="http://twitter.com/enrique_ramirez" rel="me">twitter</a></li>

		</ul>

	</div><!-- /.social -->

<section><!-- /#extras -->



<footer id="contentinfo" class="body">

	<address id="about" class="vcard body">

		<span class="primary">

			<strong><a href="#" class="fn url">Smashing Magazine</a></strong>



			<span class="role">Amazing Magazine</span>

		</span><!-- /.primary -->



		<img src="images/avatar.gif" alt="Smashing Magazine Logo" class="photo" />

		<span class="bio">Smashing Magazine is a website and blog the offers resources and advice to web developers and web designers. It was founded by Sven Lennartz and Vitaly Friedman.</span>



		</address><!-- /#about -->

		<p>2005-2009 <a href="http://smashingmagazine.com">Smashing Magazine</a>.</p>

</footer><!-- /#contentinfo -->



</body>

</html>
```
Cheers!


----------



## DJ-Zep (Mar 11, 2006)

Remove the doctype and tell me what happens. It's not in the correct format.

Also, you spelled meta wrong in one of your tags.


----------



## wmorri (May 29, 2008)

Hey Zep,

I will try that. I am working with HTML5 but I am sure that you can see that already.

I just tried that and it didn't help at all.

Cheers!


----------



## DJ-Zep (Mar 11, 2006)

Hmm...Can you please post the css?


----------



## wmorri (May 29, 2008)

Hi,

There it is.


```
/* Imports */

@import url("reset.css");

@import url("global-forms.css");



/**** Global ****/

/* Body */

	body {

		background: #F%F#EF url('.../images/bg.png');

		color: #000305;

		font-size: 87.5%; /* Base font size: 14px */

		font-family: 'Trebuchet MS', trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;

		line-height: 1.429;

		margin: 0;

		padding: 0;

		text-align: left;

	}

	

/* Heading */

h2 {font-size: 1.571em} /* 22px */

h3 {font-size: 1.429em} /* 20px */

h4 {font-size: 1.286em} /* 18px */

h5 {font-size: 1.143em} /* 16px */

h6 {font-size: 1em} /* 14px */



h2, h3, h4, h5, h6 {

	font-weight: 400;

	line-height: 1.1;

	margin-bottom: .8em;

}



/* Anchors */

a {outline: 0;}

a img {border: 0px; text-decoration: none;)

a:link, a:visited {

	color: #C74350;

	padding: 0 1px;

	text-decoration: underline;

}

a:hover, a:active {

	background-color: #C74350;

	color: #fff;

	text-decoration: none;

	text-shadow: 1px 1px 1px #333;

}



/* Paragraphs */

p {margin-bottom: 1.143em;}

* p:last-child {margin-bottom: 0;}



strong, b {font-weight: bold;}

em , i {font-style: italic;}



::-moz-selection {background: #F6CF74; color: #fff;}

::selection {background: #F6CF74; color: #fff;}



/* Lists */

ul {

	list-style: outside disc;

	margin: 1em 0 1.5em 1.5em;

}



ol {

	list-style: outside decimal;

	margin: 1em 0 1.5em 1.5em;

}



dl {margin: 0 0 1.5em 0;}

dt {font-weight: bold;}

dd {margin-left: 1.5em;} 



/* Quotes */

blockquote {font-style: italic;}

cite {}



q {}



/* Tables */

table {margin: .5em auto 1.5em auto; width: 98%;}



	/* Thread */

	thread th {padding: .5em .4em; text-align: left;}

	thread td {}

	

	tbody .alt td {}

	tbody .alt th {}

	

	/* Tfoot */

	tfoot th {}

	tfoot td {}



/* HTML5 tags */

header, section, footer, aside, nav, article, figure {

	display; block;

}



/***** Layout *****/

.body {clear: both; margin: 0 auto; width: 800px;}

img.right, figure.right {float: right; margin: 0 0 2em 2em;}

img.left, figure.left {float: right; margin: 0 0 2em 2em;}



/*

	Header

********************/

#banner {

	margin: 0 auto;

	padding: 2.5em 0 0 0;

}



	/* Banner */

	#banner h1 {font-size: 3.571em; line-height: .6;}

	#banner h1 a:link, #banner h1 a:visited {

		color: #000305;

		display: block;

		font-weight: bold;

		margin: 0 0 .6em .2em;

		text-decoration: none;

		width: 427px;

	}

	#banner h1 a;hover, #banner h1 a:active {

		background: none;

		color: #C74350;

		text-shadow: none;

		}

		

	#banner h1 strong {font-size: 0.36em; font-weight: normal;}

	

/* Main Nav */

#banner nav {

	background: #000305;

	font-size: 1.143em;

	height: 40px;

	line-height: 30px;

	margin: 0 auto 2em auto;

	padding: 0;

	text-align: center;

	width: 800px;

	

	border-radius: 5px;

	-moz-border-radius: 5px;

	-webkit-border-radius: 5px;

}



/*

	Featured

*******************/

#featured {

	background: #fff;

	margin-bottom: 2em;

	overflow: hidden;

	padding; 20px;

	width: 760px;

	

	border-radius: 10px;

	-moz-border-radius: 10px;

	-webkit-border-radius: 10px;

}



#featured figure {

	border: 2px solid #eee;

	float: right;

	margin: 0.786em 2em 0 5em;

	width: 248px;

}

#featured figure img {display: block; float: right;}



#featured h2 {color: #C74451; font-size; 1.714em; margin-bottom: 0.333em;}

#featured h3 {font-size: 1.429em; margin-bottom: .5em;}



#featured h3 a:link, #featured h3 a:visited {color: #000305; text-decoration: none;}

#featured h3 a:hover, #featured h3 a:active {color:#fff;}



/*

	Body

**************************/

#content {

	background: #fff;

	margin-bottom: 2em;

	overflow: hidden;

	padding: 20px 20px;

	width: 760px;



	border-radius: 10px;

	-moz-border-radius: 10px;

	-webkit-border-radius: 10px;

}



/*

	Extras

**************************/

#extras {margin: 0 auto 3em auto; overflow: hidden;}



#extras ul {list-style: none; margin: 0;}

#extras li {border-bottom: 1px solid #fff;}

#extras h2 {

	color: #C74350;

	font-size: 1.420em;

	margin-bottom: .25em;

	padding: 0 3px;

}



#extras a:link, #extras a:visited {

	color: #444;

	display: block;

	border-bottom: 1px solid #F4E3E3;

	text-decoration: none;

	padding: .3em .25em;

}



	/* Blogroll */

	#extras .blogroll {

		float; left;

		width: 615px;

	}

	

	#extras .blogroll li {float; left; margin; 0 20px 0 0; width: 185px;}



	/* Social */

	#extras .social {

		float: right;

		width: 175px;

	}



#extras li:last-child /* last <li> */

#extras li:last-child a /* <a> of last <li> */

{border: 0;}

#extras .blogroll li:nth-last-child(2),

#extras .blogroll li:nth-last-child(3),

#extras .blogroll li:nth-last-child(2) a,

#extras .blogroll li:nth-last-child(3) a {border: 0;}



#extras div[class='social'] a {

	background-repeat: no-repeat;

	background-position: 3px 6px;

	padding-left: 25px;

}



/* Icons */

.social a[href='delicious.com'] {background-image: url('../images/icons/delicious.png');}

.social a[href*='digg.com'] {background-image: url('../images/icons/digg.png');}

.social a[href*='facebook.com'] {background-image: url('../images/icons/facebook.png');}

.social a[href*='last.fm'], .social a[href*='lastfm'] {background-image: url('../images/icons/lastfm.png');}

.social a[href*='/feed/'] {background-image: url('../images/icons/rss.png');}

.social a[href*='twitter.com'] {background-image: url('../images/icons/twitter.png');}



/*

	About

**************************/

#about {

	background: #fff;

	font-style: normal;

	margin-bottom: 2em;

	overflow: hidden;

	padding: 20px;

	text-align: left;

	width: 760px;



	border-radius: 10px;

	-moz-border-radius: 10px;

	-webkit-border-radius: 10px;

}



#about .primary {float: left; width: 165px;}

#about .primary strong {color: #C64350; display: block; font-size: 1.286em;}

#about .photo {float: left; margin: 5px 20px;}



/* Blog */

.hentry {

	boder-bottom: 1px solid #eee;

	padding: 1.5em 0;

}

li:last-child .hentry, #content > .hentry {border; 0; margin: 0;}

#content > .hentry {padding: 1em 0;}



.entry-title {font-size: 1.429em; margin-bottom: 0;}

.entry-title a:link, .entry-title a:visited {text-decoration: none;}



.hentry .post-info * {font-style: normal;}



	/* Content */

	.hentry footer {margin-bottom: 2em;}

	.hentry footer address {display: inline;}

	#posts-list footer address {display: block;}



	/* Blog Index */

	#posts-list {list-style: none margin: 0;}

	#posts-list .hentry {padding-left; 200px; position: relative;}

	#posts-list footer {

		left: 10px;

		position: absolute;

		top: 1.5em;

		width: 190px;

	}

	#posts-list .hentry:hover {

		background: #C64350;

		color: #fff;

	}

	#posts-list .hentry:hover a:link, #posts-list .hentry:hover a:visited {

		color: #F6CF74;

		text-shadow: 1px 1px 1px #333;

	}

#banner h1 {line-height: 1;} /* Fixes Logo overlapping */



#featured figure {display: inline;} /* Double margin fix */

#posts-list footer {left: -190px;} /* Positioning fix */



/* Smaller width for Social block

so it won't jump to next line */

#extras .social {width: 165px;}
```
Cheers!


----------



## DJ-Zep (Mar 11, 2006)

In your heading, you did not append a semicolon to the end of your statements. That may be affecting the rest of the css document. Sorry if it seems as though this isn't going anywhere, I'm just confused on why this wouldn't be working, just as you are...

If this correction doesn't change anything, you may want to look through the other stylesheets you imported for errors. At this point, it seems as though a syntax error could be the only explanation.


----------



## Sarah0817 (Jan 18, 2011)

Use link instead or import. 

<link rel="stylesheet" type="text/css" href="../pathto/theme.css" />

Sent from my iPhone using Tech Help


----------

