My index.html not successfully linking to the CSS file

I'm new to this and still learning, so please bear with me. I'm having trouble linking my CSS file to my index.html document in order to create a black banner at the top of the page. I've tried opening it in both Chrome and Explorer but nothing is happening. Can someone assist me with this? Here are the snippets of my CSS and HTML code:

/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
html {
    font-family: volkorn;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
}

.top-section {
    padding: 30px 0;
    margin-bottom: 0;
    color: #000000;
    background-color: #000000;
    background-size: cover;
}

.top-section {
padding-top: 100px;
padding-bottom: 100px;
}   
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
<title>Upload Festival</title>  
    <head>
  
      <!-- Meta -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="">
    <meta name="googlebot" content="index,follow">
        
    <!--css-->
    <link href="css/customization.css" rel="custom" style="text/css">
  </head>
<body class="index">
<header class="top-section" role="banner"></header>
</body>
</html>

htmlcssindexingstylesheet

Answer №1

If you're just starting out, it's best to begin with the fundamental concepts...
Here is a basic HTML page template for you to use:

<html>
    <head>

        <title>Page Title</title>
        <!--Link to an external resource-->
        <link rel="stylesheet" type="text/css" href="css-folder/css-file.css">

    </head>
    <body>
        <header class="top-section" role="banner"></header>
    </body>
</html>

Place your style sheets in a separate file. For example:

css-folder/css-file.css: 

html {
    font-family: volkorn;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
}

.top-section {
    padding: 30px 0;
    margin-bottom: 0;
    color: #000000;
    background-color: #000000;
    background-size: cover;
}

.top-section {
    padding-top: 100px;
    padding-bottom: 100px;
}

For now, you don't need to worry about conditional comments, doctypes, and meta datas!
Best of luck on your coding journey.

Answer №2

There appears to be an issue with the way your CSS is linked, particularly in the rel attribute and the style attribute (which does not exist). You currently have this:

<link href="css/customization.css" rel="custom" style="text/css">

It should be like this instead:

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

For more information on linking CSS files to your website, please visit: http://www.w3schools.com/css/css_howto.asp

Additional information about the LINK tag can be found here: http://www.w3schools.com/tags/tag_link.asp

Have a wonderful day!

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

What is the best method for submitting an ajax form post when it is dynamically loaded within a bootstrap modal window?

Need some help with a Bootstrap modal form that is not submitting via AJAX as intended. When the form is submitted, the entire page reloads instead of having the data posted in the background. How can I fix this while keeping the page state? Below is the c ...

javascriptjqueryajaxhtmltwitter-bootstrap-3

Ajax immediately going to the error section

I'm having trouble with my ajax as it always goes straight to the error part. Below is my code along with comments on the lines I'm unsure about: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script&g ...

javaphphtmlajax

obtain data in JSON format from a Node.js server and display it on an HTML

I am currently working on a feature that involves sending an AJAX request to the server and receiving the output of a MySQL query on the page http://localhost:3000/result.html upon clicking a button. <body> <form action="/setLocation" method=" ...

javascripthtmlnode.jsajaxexpress

Prevent jQuery UI default styling from being applied

I'm curious about how to prevent jQuery UI from adding any classes when initializing $.tabs(). This is the structure of my HTML: <link href="smoothness/jquery-ui-1.8.20.custom.css" rel="stylesheet" type="text/css" /> ... <link href="estilos ...

jqueryhtmlcssjquery-uijquery-ui-tabs

Tips for Adjusting the Position of a DIV Element Slightly Upwards

I am having trouble positioning the home-link image in my hovering navigation bar. The URL to my blog is: . Ideally, I want the image to be aligned with the text tabs next to it, but no matter what I try, I can't seem to move the "home" icon up by abo ...

htmlcssblogger

two elements with the inline-block property not properly displaying inline and behaving like block elements

Having a CSS issue - attempting to display two code blocks with numbers on the sides next to each other, then stack them after a certain screen size. However, there seems to be an error occurring when the screen size is smaller. I'm open to making an ...

htmlcss

Creating dynamic stripes on MUI LinearProgress for lively animations

I'm looking to add animation to MUI LinearProgress. I have the animation keyframes code, but I'm not sure how to implement the stripes effect. Any advice would be appreciated. Here is the code snippet I have: import React, { FunctionComponent } ...

cssreactjssassmaterial-ui

Aligning a single component in the center vertically with the appbar positioned at the top of the screen using Material

As a beginner with material UI, I am facing challenges in centering a component both horizontally and vertically on my screen while including an AppBar for navigation at the top. While I have come across solutions like this example using a grid system, i ...

htmlcssreactjsmaterial-ui

Combining text and images in XSLT using CSS: A comprehensive guide

Greetings! I am facing a situation where I have an XML file containing image tags like this: <pb facs="ciao.jpg">. Additionally, I have an XSL file that includes a JavaScript snippet as shown below: <script type="text/javascript> function ...

cssimagetext

Issue with HTML not being displayed during Eclipse Eclipse html not showing up on

This is an example of a servlet: package userInterface; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servle ...

htmleclipsejsp

Apache Wicket - Utilizing HTML5 details element within a RepeatingView to save open property

In my repeatingview, I have HTML5 detail elements that can be opened or collapsed by the user. However, when I remove certain elements from the repeatingview and then reload it using target.add(container), all elements end up being collapsed again. How c ...

javahtmlwicket

In Internet Explorer 7, a newline within a <pre> tag may cause display issues

Within my ASP.NET MVC 3 project, I am working with the following code: <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" ty ...

htmlasp.net-mvc-3newlineinternet-explorer-7pre

Enhance your inline content by adding adjacent inline blocks

My objective is to include a "Read More" link alongside a text block, which should appear next to the text without forming a new line or block. The challenge lies in the fact that the content of the text block is created using TinyMCE, resulting in various ...

css

Updating the global CSS styles that were inherited from the node_modules folder in a Next.js project

I've been attempting to customize the CSS style for a rc-pagination component that was included in a CSS file I already imported in the root component _App. However, despite my efforts to override the styles in the index.css file of this component, no ...

cssreactjsnext.jsnode-modulesstyling

Is there a way to have the span update even if the input stays the same? Currently, it only changes when the input is different

Retrieve results of 3 lines (Ps) by entering a word in the text area and clicking search. If the word is found after clicking the button, a span will be displayed with the count of occurrences as well as the highlighted P(s) where it was found. If the wo ...

javascripthtmlcss

After swapping out "div" with "input" and then replacing "input" with

My goal is to create a function where a user can edit text within a div. The idea is to replace the current text with an editable input field, and then convert it back into a div after the user hits enter. I've encountered an issue while trying to im ...

javascriptjqueryhtml

Shadow effect is present under every cell in the table row

I am struggling to create an HTML table with proper vertical spacing between rows and a shadow effect beneath each row. Unfortunately, the shadow always ends up overlapping other table content. I have tried adjusting the positioning of elements and setti ...

htmlcssz-indexstacking-context

Using the power of Selenium's XPath, we can easily navigate through a table to access

Looking for assistance in creating selenium xpath for the various column links within a table. Each row has a unique identifier and contains information about a product, including the name. Based on the product name, I need to locate other links within the ...

cssxpathselenium

Troubleshooting Owl Carousel's width problems upon initial loading

Currently, I am utilizing the Owl Carousel and have the following script: $("#owl-demo").owlCarousel({ items : 3 }); My intention is for the container to display 3 images. However, upon initial load, this is what appears: Oddly enough, when I resize ...

jquerycsscarouselowl-carousel

Ways to resolve the issue with TypeError: CSS2Properties lacking an index property setter for '0'

I'm currently working on application development using ReactJs and Material UI. When I try to open the application in Mozilla Firefox, an error message pops up saying "TypeError: CSS2Properties doesn't have an indexed property setter for ' ...

cssreactjscross-browsermaterial-ui