Member Avatar for Michal_2

Hello guys. I have a small problem with the following code:

main.html

<html>
    <head>
    <link rel="style" href="main.css" >
    </head>
<body>
<ul>
<li>Home</li>
  <li>About</li>
  <li>
    Portfolio
    <ul>
      <li>Web Design</li>
      <li>Web Development</li>
      <li>Illustrations</li>
    </ul>
  </li>
  <li>Blog</li>
  <li>Contact</li>
</ul>
</body>
</html>

main.css

body {
  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  padding: 20px 50px 150px;
  font-size: 13px;
  text-align: center;
  background: #E3CAA1;
}

ul {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
ul li {
  font: bold 12px/18px sans-serif;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  background: #fff;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
ul li:hover {
  background: #555;
  color: #fff;
}
ul li ul {
  padding: 0;
  position: absolute;
  top: 48px;
  left: 0;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
ul li ul li { 
  background: #555; 
  display: block; 
  color: #fff;
  text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover { background: #666; }
ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

Whatever I do , I cannot get the Css to change the look of the html.It just displays basic html, and non of the css seams to work. Im sure its somting very obvious, I just cannot see it.
code source

  • 2 Contributors
  • 3 Replies
  • 241 Views
  • 53 Minutes Discussion Span
  • Latest Post Latest Post by minitauros

Dani AI

Generated

Good catch by — the page looked unstyled because the browser never treated the linked file as a stylesheet. That explains the plain HTML output even though a CSS file was present. Beyond that immediate fix, a short checklist and a few gotchas help avoid the same confusion later and make debugging faster.

  1. Verify the stylesheet link and path: open the stylesheet URL directly in the browser to confirm the file is returned (not a 404 or an HTML error page). Remember many servers are case sensitive.
  2. Use developer tools: Network -> filter for CSS to check status and Content-Type, and Console for parse errors. The Styles/Computed panel shows which rules are applied and the source file.
  3. Clear cache or do a hard reload; cached responses often hide fixes. A cache-busting query string can help during development.
  4. Check server headers: make sure .css is served with the correct MIME type (text/css). A wrong Content-Type can cause browsers to ignore the sheet.
  5. Look for syntax problems or stray characters at the start of the CSS file (BOM or accidental HTML). Also scan for typos in vendor-prefixed properties — a misspelling like "transiton" will silently fail for that rule.
  6. Confirm document context: an HTML5 doctype and a properly placed link in the head keep browsers in standards mode and avoid odd rendering differences.

For this thread: the link issue pointed out by is the root cause; after that, correcting small CSS typos (especially in the submenu transition lines) will restore the intended effects. Using DevTools is the fastest way to see whether the stylesheet is actually loading and which rules are winning.

Recommended Answers

All 3 Replies

Member Avatar for minitauros

Try replacing <link rel="style" href="main.css" > with <link type="text/css" rel="stylesheet" href="main.css">, and check if main.css is in the same folder as your main.html =).

Edited by minitauros
Member Avatar for Michal_2

You are absolutely correct Mr.Minitauros. Its always the little things that get us. Live long and prosper.

Member Avatar for minitauros

Well same to you ^^.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.