Learning HTML and CSS integration through Codecademy is a fundamental part of the course

After following the instructions from an old HTML and CSS introduction on , I successfully created my first website. However, the code works perfectly on a special constructor page, but once I try to view it on a browser, the HTML and CSS don't seem to link up. I attempted to upload the files to a server, followed various tutorials, but still can't figure out the issue.

Could someone please point out where I might be going wrong? Could it be related to the CSS style sheet references at the top of the HTML?

Below is my HTML and CSS code:

    <!DOCTYPE html>
<html>

  <head>
    <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">

    <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
    <link rel="stylesheet" href="main.css">

  </head>

  <body>
    <div class="nav">
      <div class="container">
        <ul class="pull-left">
          <li><a href="#">Home</a></li>
          <li><a href="#">About us</a></li>
        </ul>
        <ul class="pull-right">
          <li><a href="#">Services</a></li>
          <li><a href="#">Prices</a></li>
          <li><a href="#">FAQ</a></li>
          <li><a href="#">Contact us</a></li>
        </ul>
      </div>
    </div>

    ...

    <p class="neighborhood-guides">...</p>
    ...

</body>
</html>

...

.nav a {
  color: #5a5a5a;
  font-size: 11px;
  font-weight: bold;
  padding: 14px 10px;
  text-transform: uppercase;
}

.jumbotron {
  background-image:url('http://pcmedcenter.com/wp-content/uploads/2015/03/banner12-1920x600.jpg');
  height: 470px;
  background-repeat: no-repeat;
  background-size: cover;
}

...

.neighborhood-guides p {
    font-size: 15px;
    margin-bottom: 13px;
}

Answer №1

When using a relative path for the third stylesheet, it is important to verify that the path is accurate and that there is a main.css file located in the same directory as your html file.

Answer №2

Hey there, here are a couple of tips to help you stay organized!

First, make sure to save a copy of your CSS code locally. Create a dedicated web project folder and then a themes subfolder to store all your CSS files.

C:\web

C:\web\index.html

C:\web\themes\classic\style.css

Avoid using BootStrap as it can complicate things. Stick to HTML and CSS along with plain JavaScript to build a strong foundation. Adding unnecessary dependencies can make your code weaker and limit your understanding. Focus on mastering the basics before diving into third-party tools.

It's important to know that browsers use two parsers, HTML and XML. Serve your code appropriately to avoid errors. Mozilla Firefox is a great tool for working with the XML parser. Utilize resources like Mozilla Developer Network for guidance and refer to sites like caniuse.com to explore available technologies. Good luck on your coding journey!

Answer №3

Here is some valuable advice for ensuring your HTML document is properly styled:

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

If the styling of your HTML document is not appearing as expected, be sure to check that the href attribute in your stylesheet link is accurately directing to the correct destination of your stylesheet file. If your CSS file is located in the same directory as your HTML file, you can utilize the following code snippet to verify that it is displaying correctly on your local machine:

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

Furthermore, ensure that you have actually created a separate file named main.css and transferred your CSS code into it. This step is crucial for proper styling implementation.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

C++ displaying results through web interfaces

Is it possible to write a C++ program that displays "Hello World!" on a webpage? #include <iostream> using namespace std; int main () { cout << "Hello World!"; return 0; } And is it possible to integrate this program into an HTML webpage ...

Combining mouse interactions with animated bar transitions

I want to create a graph with dynamic bar height transitions whenever it is drawn or redrawn. Once the bars are displayed, I would like mouse events (mouseenter, mouseleave, and mousemove) to trigger a tooltip showing information about the specific bar bei ...

What is the best way to align this div tag with the right side of the box?

https://i.sstatic.net/ezRuE.png .left { width: 50%; display: inline-block; float: left; } /* Second user block */ .right { border-color: lightskyblue; background-color ...

Are your divs getting truncated?

Currently faced with a perplexing issue where inserting elements into a div causes scaling problems, resulting in most of the divs being cut off. This glitch occurs when two new elements are added. Despite changing page sizes and thoroughly debugging by o ...

Toggle Form Section Visibility

I am working on a table with five rows that have upload buttons. Each time I submit a row, the page refreshes, but I want to hide all but one row at a time. When the first submit button is clicked, it should show the next row and hide the previous ones. Th ...

Mastering the art of transitioning between DIV elements

I am looking to implement a rotating three-card display on click, and have come up with the following code: $('.box1').click(function(){ $('.box1').toggleClass('removeanimate'); $(this).toggleClass('go'); ...

What is the best way to make HTML adjust to SVG scaling?

After applying a scale transform to an SVG, I noticed that the surrounding HTML does not adjust its size accordingly. Here is the SVG in question: <div> <svg height="300" width="300" viewbox="0 0 300 300" transform="scale(1.55)" xmlns= ...

Incorporate a span element within the PHP code located in the final div

Having trouble with adding a span in PHP The last div is not functioning correctly. **In need of help on how to insert a span within PHP code.** echo" <tr> <td>$id</td> <td>$name</td> <td>$la ...

Aligning HTML form elements side by side

I am having trouble displaying multiple Bootstrap elements and buttons in a single line. Here is an example of what I have: <span><input class="form-control" id="filename" value="Select a ZIP file to upload..." disabled style="display: inline"> ...

Encountered a SyntaxError stating 'Unable to use import statement outside a module' while attempting to utilize three.js

I'm facing difficulties with incorporating three.js into my project. Initially, I executed: I am referring to the guidelines provided here: In my VS Code terminal for the project folder, I ran the following command: npm install --save three Subsequ ...

"Designing with Vue.js for a seamless and adaptive user experience

I'm looking to customize the display of my data in Vuejs by arranging each property vertically. Instead of appearing on the same line, I want every item in conversationHistory to be displayed vertically. How can I achieve this in Vuejs? Can anyone off ...

When using CSS to vertically align elements, it only works properly if a <span>

a { display: block; padding: 0 10px; /* background: rgba(0,0,0,0.5); */ height: 100%; border-left: 1px solid rgba(0,0,0,0.1); text-decoration: none; color: white; background-color:rgba(0,0,0,0.5); height:100px; } img { ...

How to align the navbar toggle button and list items to the right in Bootstrap 5

I'm struggling with a simple html page that has a fixed navbar at the top. Everything looks great when viewed in full-screen mode, with centered links. However, when the page size is reduced, it collapses to a toggle button on the left side. What I re ...

Adjust the display of inline-block divs to disregard line breaks

I am having an issue with three side-by-side divs using the display:inline-block property. When the divs are empty, they all align perfectly on the same horizontal level. However, once I add <p> tags and some line breaks (<br/>) to the first ...

How to Correctly Align Links in Bootstrap Navbar

I am currently utilizing Bootstrap 5 and I am looking to perfectly center some links within the navigation bar. <header> <nav class="navbar navbar-expand-lg py-5"> <div class="container"> ...

Synchronize MySQL database structure with HTML5 local storage to enable querying

After researching HTML5 local storage, I am considering mirroring a MySQL database's structure for use in an application that requires a large amount of data for a single user. Why would I want to do this? As a web game developer in my spare time, I ...

Hide the selection box when hovering over the Div

Looking for a quick solution. I want the option drop down to close when another div element is hovered over. First, open the drop down and hover over the red element on the right side. When hovering over the red element, I would like the drop down to clos ...

Elements appearing distorted in Firefox and Internet Explorer

I'm completely new to the world of web development and I am attempting to construct a website for my company all by myself. However, I am encountering an issue with a "red info box" on one of my pages. While it displays perfectly on Chrome, it appear ...

How to incorporate a JavaScript file into a Handlebars template

I am having trouble receiving calls to my JavaScript file. What could be the issue? Using MVC. Here is the code in view file, file.hbs: <div class="container"> <h2 onClick="test()">Title</h2> {{>list}} </div> <script sr ...

Divs displayed using inline-block do not align seamlessly

I am having an issue with the alignment of 4 divs displayed inside a main container. Despite all having a fixed height of 100px, some of them have text that is one line longer than the others. In theory, this should not affect their positioning on the same ...