Html and Css Linking Problem please help



I’m using brcackets and I’m having a hard time linking my html file to my css file I’ve included pictures of my code so if someone could explain I would appreciate it!cghjkl%3B'


As a general rule (convention) HTML attributes do not have any additional white space other than the leading space.

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

Given the document type declaration,

<!DOCTYPE html>

we have told the browser to parse this according to the HTML5 specification in which a couple of assumptions are given as moot…

  1. The style sheet language (MIME type) defaults to “text/css”.
  2. The default MIME type of the HTML is “text/html”.

Give these two considerations, we can leave off both the type attribute and the closing slash as they are neither one needed.

<link rel="stylesheet" href="style.css">

The above is perfectly valid HTML so long as the file is served as text, not XML. As stated, text is the default.

Something that should be menthioned is the general necessity of character encoding which today is pretty much universally adopted as UTF-8, but it is not the default of the browser (the standard character set of the local machine is the default) so we must declare it. As well, we should also declare the human written language so the user agents know what to expect.

<!doctype html>
<html lang="en">
    <meta charset="utf-8">
    <title>The Geeks Production</title>
    <link rel="stylesheet" href="style.css">
    <div class="nav">
      <ul id="menu_1">


Notice above that the attribute value for id is, a) quoted, and, b) written with underscore. An ID cannot contain a space, and by convention is written in quotes (as are most attribute values).

Most importantly, to address the direct question, the index.html file and style.css file (for this particular instance) need to be in the same directory.




Okay, we can see in your style sheet that menu1 is a single term. That fix can be made easily in the HTML by adjusting the attribute as advised above.

Couple other things of note…

.nav ul, li, a {}

The above selector group will target ALL list items and ALL link elements in the document. If you wish to narrow down the scope, then write them with the class combinator.

.nav ul,
.nav li,
.nav a {}

There is a spelling error in the margin property in .nav {}. There are also several missing semi-colons. The browser stops parsing the rule set when a syntax error is encountered.

As a side consideration, though not a sticking point, 0 is an undefined quantity we take to be none. As a number it is of importance, obviously, but as a value or representation it has no units. Any quantity of 0 in CSS may be written as itself.

margin-bottom: 0;

It’s worth noting, but bears some testing to narrow down the field, that 0 and none are interchangeable in many instances.


This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.