What's new
By:
Filters
Photoshop Gurus Forum

Welcome to Photoshop Gurus forum. Register a free account today to become a member! It's completely free. Once signed in, you'll enjoy an ad-free experience and be able to participate on this site by adding your own topics and posts, as well as connect with other members through your own private inbox!

I can't connect my HTML file with CSS file!!


J

Janifar

Banned
Messages
159
Likes
24
HTML
--------
<html>
<head>
<title>This is page title</title>

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

</head>

<body>
<div class="hellow">
<div class="mainmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Others</a></li>
<li><a href="#">Media</a></li>
</ul>
</div>
<div class="header">
<img src="https://www.facebook.com/photo.php?fbid=683449761680400&set=a.152734361418612.27375.100000461469043&type=1&source=11"/>
</div>

<div class="maincontent">
<div class="content">
<h2>This is content Title</h2>
<p>Clipping Path India (CPI) provides professional image manipulation and Photoshop
graphic design offshore outsourcing services with 30 years of combined experience that
is done overnight and with care by hand-drawn method and provides 24/7 and 365 days
services. Including glamour retouching service, background remove, hair masking service,
ghost mannequin service , raster to vector, image cropping, magazine ads design, background
knockout,image cut out, digital make up, image masking service, clipping path.</p>
</div>

</div>
<div class="footer">
<p>&copy; Nahin Foundation 2013</p>
</div>
</div>
</body>
</html>
----------------
CSS
=====================

{margin:0;padding:0}
body {font-family:Arial;font-size:14px;line-height:20px;color:#000;}
.hellow
{
width:960px;
margin:20px auto;
display:block;
overflow:hidden;
}
.header{}
.header img{
width:960px;
margin: 4px;
}
.mianmenu{
background:#ededed;
overflow:hidden;
}
.mianmenu ul
{
margin:0;
padding:0;
list-style:none
}
.mianmenu ul li
{
float:left;
}
.mianmenu ul li a
{
display:block;
color:#000;
padding:10px
}
.mianmenu ul li a:hover{}
.sider{}
.miancontent{}
.footer{}
 
inkpad.t

inkpad.t

Guru
Messages
1,015
Likes
823
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Make sure you have targeted your style sheet as above... where it says mystyle.css must correspond with what ever you named your style sheet. also make sure the code is as this code with correct spelling, spacing etc.
 
J

Janifar

Banned
Messages
159
Likes
24
inkpad.t said:
your css code doesn't look right either. too many brackets...

it should look something like this.

p
{
color:red;
text-align:center;
}
Click to expand...
Ops can you correct all non-required bracket? Please just color those which are unnecessary.
 
Carson

Carson

Power User
Messages
266
Likes
35
I personally add a single closing tag for my <link> tag. For example,

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

Also, the href= is case sensitive. So if your folder is 'Style' then you go to 'Style'. Also, this selects from your index page. So if your index page isn't in the same folder as 'style' then it's going to need additional path parameters.


Other then that inkpad.t has told you what you needed to look at.
 
Last edited:
sprucemagoo1

sprucemagoo1

Guru
Messages
2,006
Likes
1,187
It's not just brackets, as you have styles in brackets, but no rule name before them, so a browser won't know what elements to style.
What are you doing this in may I ask?

I think you really need to go to w3school for a couple of hours, and you will understand the way CSS is put together, as the stuff you have done so far needs redoing completely. The link provided will direct you to all you need to know and more. Good Luck.
 
Inkz

Inkz

Guru
Messages
2,358
Likes
1,554
You've also misspelled mainmenu in the css code...

If you still can't link the css to the html. Add <style></style> to the html, just below the title and add your css there. Not good practice, but still works.
 
mattmorz

mattmorz

Well-Known Member
Messages
130
Likes
26
First is, try this W3C CSS Validation, then you can perhaps optimize and format you CSS by using this site, it's a bit messy.

And then make sure the path is correct, better use softwares like Dreamweaver in creating webpages.
 
sprucemagoo1

sprucemagoo1

Guru
Messages
2,006
Likes
1,187
Why are people still answering this, when the only problem here, is the person doesn't have a clue about css in the first place?

The first thing they need to do is learn how to do css, not to validate the rubbish posted here. A link to tutorials has been given. It isn't even that hard for somebody with a tiny bit of intelligence to Google how to do css, then an hour latter, be able to do css.

If somebody is so ridiculously stupid that they can't use Google, how do you suspect they will validate and optimize code?
 
You must log in or register to reply here.

Top