htmlcssexternalinternal

External CSS not working


I need help again. I'm watching some tutorials, and I have an easy code that works fine with internal CSS, but I doesn't with external CSS. I think I'm doing everything right, since I don't change a single word of the code, excep for the external css reference. Any ideas why is it not working? Thanks for your answers! (By the way, I read all the post relationed with my problem, but nothing work out.) Here's the code:

div.box
{
width:320px;
padding:10px;
border:10px solid green;
margin:0px;
font-family: Arial, Helvetica, Sans-Serif;
font-weight: bold;
font-size: large;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="new 1.css">
</head>
<body>
<div class="box">This text in a box example uses css.<br /><b>Note:</b> there is a
DOCTYPE declaration (above the html element), so it displays correctly in all browsers.
</div>
</body>
</html>

It work out here! It is driving me insane. I tried it in Notepepad++, Brackets, and text editors. I really can't figure out what's happening.


Solution

  • You can't have spaces in a URL, try changing the space to its ASCII character: %20 so it would look like this:

    <link rel="stylesheet" type="text/css" href="new%201.css">
    

    Or what I would normally do is use proper file naming conventions, either camel case (every word [ besides the first one] starts with an upper case letter) or use underscores between the names.