Is there a glitch preventing the connection between HTML and CSS in Notepad++ even though the link is correct?

I have encountered a puzzling situation that has left me scratching my head in confusion. Despite being a rookie, I've had experience with linking CSS files before and can't understand why it's not working this time around. This issue is persisting across multiple projects and I'm starting to question my skills. Is it possible that there's a glitch or perhaps I need to take a step back and reassess? I typically use Sublime text but am currently using Notepad++. Could this be the source of the problem? Both my HTML and CSS files are located in the same folder on my desktop. Any guidance would be greatly appreciated.

Here is the source code for my first project:

Project 1:

<!DOCTYPE html>
<html lang="en">





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


    <title>HTML5/CSS3 Responsive Theme</title>


    <meta charset="utf-8" />    
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>


</head>;






<body class="body">

        <!--header and logo-->
        <header class="mainheader">
                <img src="logo.jpg"/>


                <!--navigationbar-->
                <nav><ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Portfolio</a></li>
                        <li><a href="#">Contact</a></li>                
                <ul><nav>

        </header>






        <!--main content header-->
        <div class="mainContent">
            <div class="content">
                <article class="topcontent">
                    <header>
                        <h2><a href="#" title="First post">First post<a/></h2>
                    </header>

                    <!--functions as secondary header-->
                    <footer>                        
                        <p class="post-info">This post is written by Isaiah</p>
                    </footer>

                    <content>
                        <p>
                        con·tent1
    kənˈtent/
    adjective
    1.
    in a state of peaceful happiness.
    "he seemed more content, less bitter"
     synonyms:  contented, satisfied, pleased, gratified, fulfilled, happy,           cheerful, glad; More
    verb
    1.
    satisfy (someone).
    "nothing would content her"
synonyms:   satisfy, please; More
noun
1.
a state of satisfaction.
"the greater part of the century was a time of content"
2.
a member of the British House of Lords who votes for a particular motion.
                        </P>
                    </content>                  
                </article>
            </div>
        </div>;



<!--sidebars-->
    <aside class="top-sidebar">
        <article>
            <h2>Top Sidebar</h2>
            <p>
            Meditation is a practice where an individual trains the mind or induces a mode of consciousness
            </P>
        </article>
    </aside>

    <aside class="middle-sidebar">
        <article>
            <h2>Middle Sidebar</h2>
            <p>
            Meditation is a practice where an individual trains the mind or induces a mode of consciousness
            </P>
        </article>
    </aside>

    <aside class="bottom-sidebar">
        <article>
            <h2>Bottom Sidebar</h2>
            <p>
            Meditation is a practice where an individual trains the mind or induces a mode of consciousness
            </P>
        </article>
    </aside>



<!--footer-->   
    <footer class="mainFooter">
        <p>Copyright Deez Nuts</p>
    </footer>

</body>

</html>

Answer №1

Kindly update the hyperlink to the one provided here:

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

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

Overlapping Bootstrap cards conundrum

Does anyone know how to align Bootstrap cards and make them responsive? I have them centered, but they are overlapping and sticking to the left side. This is for email development with a maximum width of 680px. Any assistance would be greatly appreciated! ...

Tips for resizing and positioning an image within an input field

Is it possible to have a button overlapped on an input field in a responsive website like this: https://i.sstatic.net/tnVmF.png I tried using an input group addons, but the result is not quite what I expected: https://i.sstatic.net/xpMgr.png This seems t ...

Interactive Icon Feature Instead of Annoying Pop-Ups in JavaScript

Hello there! I need assistance fixing a code issue. Currently, the code automatically pops up when the page is opened. Is there a way to make it clickable instead of popping up automatically? <script type="text/javascript" src="//www.klaviyo.com/media/ ...

The Django server fails to display the CSS files upon activation

Despite having all the static files in place, only the plain HTML loads without any styles for some unknown reason. I've attempted using collectstatic and even setting up a new project, but to no avail. STATIC_URL is also properly specified along with ...

The module 'nodemailer' could not be located

Currently working with the Zapier Code tool, my goal is to send an email with Trello parameters. I've been using JavaScript encoding in combination with node.js for this task. However, every time I attempt to locate the 'nodemailer' module, ...

Tips for obtaining the combined outcome of multiple arrays (3 to 5 arrays) in JavaScript

How can we transform an array of objects with nested arrays into a new array of objects with mixed values? Consider the following input: var all = [ { name: "size", value: [20, 10, 5], }, { name: "color", value: [ ...

Developing a dynamic modal using Angular and embedding Google Maps within an iframe

I'm currently working on implementing a modal in my Angular application that, when opened, displays Google Maps within an iframe. The problem I'm facing is that the iframe isn't loading and I'm receiving this error in the browser conso ...

Transform an HTML table string into JSON format

I discovered a useful library called table to JSON that allows me to convert an HTML Table to JSON using its ID (#testtable in the example below): var table = $('#testtable').tableToJSON(); alert(JSON.stringify(table)); However, I am interested ...

How to effectively trigger a function to load images in React

When my react app loads, I want the images to load immediately. This involves calling the function collectionChanged(e.target.value) on application start. Inside a .jsx file, there is a function named getHomePage() which contains 4 functions. Upon calling ...

Reload the Node.js webpage

Is there a method to automatically refresh a Node.js page following a socket.io event? var messageDynamic = "Initial status"; app.get("/", function(request, response) { response.setHeader('Content-Type', 'text/plain'); respons ...

Experiencing a DNS error while running a JavaScript script using Node.js

const { Client, EmbedBuilder, GatewayIntentBits, Collection, Events, Partials } = require("discord.js"); require("dotenv").config(); const { Guilds, GuildMembers, GuildMessages } = GatewayIntentBits; const { User, Message, GuildMember, ...

Choose a specific element by referencing the attribute of another element

I am currently working with an XML document that is structured like this: <CollectionMappingData> <ContentTypes> <ContentType ContentTypeName="Content Type Name" SomeAttr="ValueINeed" /> </ContentTypes> <CollectionGrou ...

What is the reason behind the undefined value of "this" in this particular class method?

I have scoured the depths of the internet in search of a solution, but I am still grappling with an issue related to a JS class I am developing for a Micro Service (still learning as I go). When attempting to call a method within a class on an instantiate ...

Unable to load the manually added module in the /node_modules/ folder

I'm trying to manually use a module that I placed in the /node_modules/ directory. After copying and pasting the files and installing dependencies with npm, I encountered an issue while using NWJS 0.16.0. When attempting var speech = require('sp ...

Unexpected behavior is being encountered with the else statement, and there are compatibility issues with IE and Mozilla Browser in the overall script

Script is functioning as expected in Google Chrome, but is not responsive in IE and Mozilla browsers JavaScript code: <script src="jquery.min.js"></script> <script> function Run() { if(jQuery('#inputtext').val() == '0 ...

Verify the presence of the element on the webpage before proceeding, utilizing Python to handle the scenario if

Having trouble resolving an issue that involves checking if a specific element is present on a page before executing a piece of code. Currently, when the element doesn't appear, the script fails with a 'Failed to find element' error. This i ...

Manipulate elements by adding and removing classes sequentially based on an array

Previously, some had difficulty understanding my question. I have an array of variables representing the ids of 5 divs. My goal is to change the color of each div sequentially for a brief moment before reverting back, mimicking the behavior of traffic ligh ...

Prevent animations on child elements with Vue.js

I am dealing with a scenario where I want to remove the fade transition on a child div within a <transition> component. The reason for nesting it is to prevent layout flickering, which can be demonstrated in a fiddle if necessary. In the fiddle belo ...

What are some methods for preventing JavaScript function calls from the browser console?

In the process of developing a web application using HTML and JavaScript, I'm looking for a way to prevent users from accessing functions through their browser console in order to maintain fairness and avoid cheating. The functions I want to protect a ...

The "hover" effect is not activating on a carousel

I'm having trouble with the hover effect inside the orbit slider. It's not working at all. What am I missing here? Check out the code and fiddle: http://jsfiddle.net/Bonomi/KgndE/ This is the HTML: <div class="row"> <div class="la ...