I am having trouble getting my HTML to properly link with my CSS while using Chrome OS

My website code is not linking with the CSS file

<!DOCTYPE html>
<html>
<head>
    <link href="main.css" rel="slylesheet" text="text/css">
<title></title>
</head>
<body>
    <header>
        <div class="container">
            <img src="beens.jpg" alt="logo" class="logo">
            <nav>
                <ul>
                    <li><a href="#">about</a></li>
                    <li><a href="#">games</a></li>
                    <li><a href="#">contact</a></li>
                    <li><a href="#">blog</a></li>
                </ul>
            </nav>
        </div>
        
    </header>
</body>
</html>

It worked when I used my flash drive, but not locally

.container {
    width: 80%;
    margin: 0 auto;
}
.header {
    background: rgb(51, 146, 153);
}
li {
  color: rgb(142, 15, 15);
}

The background of my website is still white, please help

I tried rewriting my link code and checking here

htmlcssgoogle-chrome-os

Answer №1

Looks like there's a small mistake in your code: 

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

The correct spelling should be stylesheet

Additionally, you are referencing your header as a class with .header, But if you want to target the tag itself without specifying a class, you should use:

header {
    background: rgb(51, 146, 153);
}

Answer №2

Here is an example to try:

.wrapper {
    width: 70%;
    margin: 0 auto;
}
body {
    background-color: rgb(255, 200, 100);
}
ul {
  list-style-type: none;
}
<!DOCTYPE html>
<html>
<head>
    <link href="styles.css" rel="stylesheet" type="text/css">
<title></title>
</head>
<body>
    <section>
        <div class="wrapper">
            <h1>Welcome</h1>
            <p>This is a sample text.</p>
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
        </div>
        
    </section>
</body>
</html>

Answer №3

Feel free to give this a shot

If that doesn't do the trick, the issue likely lies within the code after the

Answer №4

This is the basic code:

ul li {
  color: RGB(142, 15, 15);}

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 could be causing my Javascript clock to malfunction?

I am having an issue with my clock code, which is supposed to display the date and time set 2 weeks in advance. Unfortunately, it is not working on either local or server environments. Can anyone help me troubleshoot this problem? Here is the code that I ...

javascriptjqueryhtmlclock

From transitioning from a radio button's checked indicator to a complete button

I'm in the process of customizing my WordPress plugin and seem to be struggling with styling the radio buttons. For reference, you can find the code snippet here: https://jsfiddle.net/cd3wagvh/ The goal is to conceal the radio buttons and modify the ...

htmlcss

Drop-down selection triggering horizontal auto-scroll

Within my div element, I have a table with dropdowns. The div is set up to be horizontally scrollable. To create the dropdown functionality, I utilized Harvesthq Chosen. Let me provide some context. In Image 1, you'll notice that I've scrolled ...

javascriptjqueryhtmlcssharvest

Understanding how flex-wrap property works in flexbox is essential for creating

Take a look at the code snippet below: .flex-container { padding: 20px; margin: 20px; list-style: none; border: 1px solid silver; -ms-box-orient: horizontal; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -moz- ...

javascripthtmlcssflexbox

Is there a way to alter the background image of the logo specifically for mobile device viewing?

Here is a snippet of my HTML code: <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="{{ route('home') }}"> <img src="{{ asset('assets/images/logo-school-icon.png') }}" ...

cssmobilebootstrap-4

Can a div's style be modified without an id or class attribute using JavaScript or jQuery?

Is it possible to change the style of a div that doesn't have an id or class assigned to it? I need some assistance with this. Here is the div that needs styling: <div style="display:inline-block"> I would like the end result to look somethin ...

javascriptjqueryhtmlcss

Alphabetically sorting objects in an array using Angular

If your TypeScript code looks something like this: items: { size: number, name: string }[] = []; ngOnInit(): void { this.items = [ { size: 3, name: 'Richard' }, { size: 17, name: 'Alex' }, ...

htmlangulartypescriptsorting

Properly aligning text with checkboxes using HTML/CSS and tags like <span> or <div>

My goal is to have the text displayed as a block in alignment with the checkbox, adjusting based on the sidebar's width. For reference: Current Layout Preferred Layout I have shared the code on CodePen (taking into account screen resolution and wi ...

javascripthtmlcssangularjscheckbox

A guide on integrating functions into dynamically created buttons using the DOM

Is there a way to add functionality to the button labeled "CLICK ME TO EDIT"? I'm looking for some ideas on how to do this. var comment = prompt("Type content for new paragraph here", ""); var newParagraph = document.createElement('p'); new ...

javascripthtml

Is it possible to use JQuery ScrollTop while in the midst of an animation?

I am facing an issue with resizing containers and scrolling to elements. I have 2 containers that change width dynamically, each containing clickable elements. When a container is clicked, it animates the resize. However, when a clickable element is clicke ...

javascriptjqueryhtml

What are the implications of using :root along with the universal selector in CSS to overwrite Bootstrap variables?

As I work on theming my website, which utilizes Bootstrap, I am making adjustments to the Bootstrap variables. Some variables are defined against the :root element in a way that allows me to easily override them: :root { --bs-body-color: red; } Howeve ...

cssbootstrap-5

I'm noticing that the top border for my span is smaller than the bottom one. What could

I am struggling to create an arrangement of three triangles in a line, with the first and third pointing up and the middle one pointing down. The upper triangle seems to be too small - any ideas on how to adjust this? Is there another way to achieve this ...

htmlcss

Retrieve information from internet sources

I'm attempting to extract the initial paragraph from Wikipedia by utilizing only JavaScript. Essentially, my goal is to: document.getElementsByTagName("P")[0] However, this content is not present on my own website; instead, I aim to retrieve a speci ...

javascripthtmlwikipedia-api

Browser unresponsiveness triggered by excessive Ajax setInterval functionality

Here is the test code I am currently using: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Ajax - one variable test</title> <style> body{ font-size: 12px; font-family: Arial;} </styl ...

jqueryhtmlajax

Retrieve HTML content from Vuetify components without displaying it on the webpage

I have a project where I need to retrieve the HTML code from various Vuetify components. Instead of just as a HTML string, I actually need it as a DOM element that can be easily added to the body. This is necessary for me to be able to utilize these compon ...

javascripthtmlvue.jsdomvuetify.js

Implementing pagination within an Angular 11 Mat-table with grouping feature

Encountering an interesting issue with MatTable pagination and grouping simultaneously. I have two components each with a Mat-table featuring Pagination+Grouping. ComponentOne functions smoothly without any issues. When choosing to display 5 elements pe ...

javascripthtmlangulartypescriptangular-material

THREE.js: dual scenes sharing identical camera positions

I'm currently working on a project where I have two overlapping scenes. The top scene can be faded in and out using a slider, and users can rotate objects within the scene for a better view. My challenge is to keep the camera position consistent betw ...

javascripthtmlthree.js

Utilizing AngularJS to display an array of user inputs

Hey there, hope all is well with you! I have been working on an HTML form that looks like this: <div class="table-responsive " > <table class="table table-bordered"> <tr ng-repeat="x in [1, 2, 3, 4, 5]"> <td> <td align="center" ...

phphtmlangularjsformshttp-post

Is it possible to host three separate web pages within a single Firebase project on Firebase Hosting?

Imagine I have set up a project called ExampleApp on Firebase. I've designed a page with a form for users to submit data, hosted by Firebase. The Cloud Firestore database is storing this submitted data when the user completes the form and hits submit ...

htmlcssfirebasefirebase-authenticationfirebase-hosting

Is OpenLayers + Ajax causing issues or errors?

Utilizing the code provided below to showcase an OpenLayers map within a DIV container presents a peculiar issue. Upon initial load of the webpage, the map does not display consistently - requiring multiple page refreshes in order for it to become visible. ...

phpjqueryajaxhtmlopenlayers