Can anyone shed some light on why the CSS code is not functioning properly within my HTML file?

My CSS doesn't seem to be working in my HTML. I have linked it correctly, but it's not displaying properly - even showing empty in the CSS tab of Chrome Inspector. The links are there, so I'm not sure why it's not functioning correctly. Any ideas on what might be causing this issue would be greatly appreciated. Thank you!


    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Quierra Marriott</title>

      <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
      <link rel="stylesheet" type="text/css" href="main.css">
</head>


    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 10px
    font-family: 'Roboto', sans-serif;
    color: #eee;``
}

body {
    width: 100%;
    height: 100%;
    background: url() no-repeat center fixed;
    background-size: cover;
}

Answer №1

Uh-oh! Looks like your CSS has a few errors:

html {
    font-size: 10px /* You forgot a semicolon here */
    color: #eee;`` /* Avoid using unnecessary backticks in CSS rules */
...

You might want to consider using a tool like the W3C CSS validator to catch these mistakes: W3C CSS Validator.

Answer №2

The issue lies in the missing semicolon and empty string, which is only impacting the font-size property of the HTML selector.

If you intended to set a background for the body, make sure to provide an image URL:


body {
    width: 100%;
    height: 100%;
    background: url('http://image-url.com/image') no-repeat center fixed; 
    background-size: cover;
}

This is the main cause of the blank page display.

Answer №3

I didn't find a 'body' tag in your HTML code, which is likely why it's not functioning correctly.

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

Utilizing CSS in JS for nested hover styles with Material UI: a step-by-step guide

I am currently utilizing Material UI and in the process of converting regular CSS classes into a JavaScript file. .nav { list-style-type: none; margin: 0; padding: 0; overflow: hidden; } .navItem { float: left; flex: 1; } .navLin ...

The Feedback Form jQuery is not providing any data

I'm facing an issue with my html page that includes an ajax query to a php file. The purpose of this php file is to send a message and then return a response to the ajax query. However, no matter what I try, I am unable to receive any response from th ...

The title attribute fails to display the entirety of the content

My div has a title attribute with 4000 characters, but when I hover over it, the full content is not displayed. Is there a way to show the complete text? https://codesandbox.io/s/strange-hugle-mvwu5 ...

Adjust webpage display with JavaScript

Utilizing the mobile-first approach of Zurb Foundation, I successfully created a responsive design. However, my client now requires a direct link labeled "View desktop version" in the footer for when the website is accessed on mobile devices or tablets. T ...

Unable to change the background color of h1 tag in a ReactJS project

import React from 'react' export default function Home(){ return<div> <h1 className="bg-dark text-white p-3">Home Page</h1> </div> } I am attempting to modify the background color of the h1 tag in my Reac ...

Navigating through pages: How can I retrieve the current page value for implementing next and previous functions in Angular 7?

Greetings, I am a new learner of Angular and currently working on custom pagination. However, I am facing difficulty in finding the current page for implementing the next and previous functions. Can anyone guide me on how to obtain the current page value? ...

"Can we have selection options or drop-down menus that are in line with today

Currently working on a website project for a client where I, as a designer learning to code, have integrated three select options. This is how it appears: The client's new requirement is that the arrival date should automatically display as the curr ...

Adjust the font size based on the dimensions of the container

I'm currently working on a script that dynamically sets the font-size based on the container's dimensions and the length of the text. This is what I have implemented so far. window.onload = function () { var defaultDimensions = 300; ...

Cleaning up HTML5 video content

I have been on the search for a solution that would allow me to "scrub" through HTML5 video. So far, I have not come across one and was considering developing my own. However, before diving into that process, I wanted to seek advice from the community here ...

Two scenarios for tag class and just class are considered in this discussion

FOUND THE SOLUTION. Sending a huge shoutout to @JHeth and @Marko Vucurovic for their invaluable help! This query may seem lengthy, but the concept is straightforward. Let's break it down into 2 scenarios: Scenario I <html> <head><titl ...

Unable to apply the CSS styles on the webpage

I'm having trouble adjusting the CSS for a specific div with the class .cropper inside a component named image-cropper, and I can't figure out why it's not taking effect. Here is an image of the particular div. Below is the CSS code I atte ...

Use jQuery to smoothly scroll a div

I created a container using a <div> element which is divided into 3 inner divs. The first two inner divs are meant to serve as previous and next buttons, with ids of prev and next respectively. At the bottom, there are 3 more inner divs, each with un ...

Placing a group of input fields and a button based on the data-id attribute of the element

I have a form that appears when a button is clicked, and the save button saves input values into an object. Is there a more efficient way to write this function if I need to create 9 more buttons with different data-id attributes (e.g. data-id="2" and so ...

How to retrieve the time duration in minutes between a start and end time in JavaScript to

I have conducted a thorough search on Stack Overflow and other platforms but could not find an answer to my specific question. While I did come across posts related to this topic, they did not address the issue I am facing. Problem: My challenge involves ...

Teaching sessions along with the implementation of functions

I've created a set of input fields with the class replaceInput. The idea is to have a simple function that clears the value when the user focuses on the field, and then returns it to 'X' if the field is empty on focus out. My query is, coul ...

What is the best way to limit the number of visitors allowed on a webpage?

I'm in the process of working on an application that includes an edit button: Here's my edit button: <th title="Edit task" class="edit" style="float: right; $color;"> <?php echo "<a href=edit.php?id=" . $row["id"] . "> ...

Incorporating an SVG with CSS styling from a stylesheet

After exploring various articles and questions on the topic, I am yet to find a definitive solution. I have an external file named icon.svg, and my objective is to utilize it across multiple HTML files with different fill colors and sizes for each instanc ...

Using Angular JS to retrieve specific information from a JSON file

I am in the process of developing an AngularJS app that showcases notes. The notes are stored in a note.json file, and the main page of the app only displays a few fields for each note. I want to implement a feature where clicking on a specific note opens ...

Is it possible to print a document without it ever showing on the screen

I am developing a feature on my page that allows users to print. The challenge I am facing is that when the user clicks print, I want to generate a new page in the background called "Printable.aspx" and only display the print dialog for it without disrupti ...

Submitting a form with missing required information because the placeholder attribute is being used

I'm encountering an issue with my form where required fields can be submitted without any input. I want to use placeholder text, but it seems to be treated as a value, causing the form to submit successfully. I am utilizing the HTML5 'placeholde ...