unable to alter color using CSS

So I've heard that the CSS code is good. Here is the HTML code I am using:

<DOCTYPE! html>
 <html lang="nl">
    <head>
    <title>The White Stripes!</title>
    <link rel="stylesheet" type="text/css" href="home.css">
    </head>
<body background="white.jpg">

<h1 style="color:white;">Welcome to the White Stripes Website by Max Wijtmans</h1>
<h3 style="color:white;">On this website, you can find a lot of information about the band Seven Nation Army. You can also contact me if you'd like.
<br/><h3 style="color:white;">Here's a video of their biggest hit, Seven Nation Army.</h3> <br/> <iframe width="640" height="480" src="https://www.youtube.com/embed/0J2QdDbelmY" frameborder="0" allowfullscreen></iframe><br/>
<ul>
<li> <a href="facts.html" target="blank">Facts about the band</a>
<li> <a href="history.html" target="blank">the band's history</a>
<li> <a href="albums.html" target="blank">all albums by the band</a>

<

</body>
 </html>

The actual ending has </body> and </html>, but it's not showing up properly in this post. My apologies for that. Also, please excuse any Dutch sentences.

htmlcss

Answer №1

From what I gather, the CSS is stored in a separate file but still begins with <style>. This setup makes the start of the CSS file appear like this:

<style>
/* unvisited link */
a:link {

In this scenario, the browser interprets it as a selector looking for <style> a:link, which obviously doesn't correspond to any element.

The presence of <style> tags is essential only when inserting CSS directly into the HTML without using <link>.

Update: Following your edits to the question: Have you confirmed that the stylesheet is loading properly? Add the following snippet at the beginning of the stylesheet:

* { background: pink !important; }

If everything turns pink, then the stylesheet is loaded correctly. If not, double-check the href in the <link> element until the page background changes to pink.

Answer №2

As far as my understanding goes, you should already have a separate .css file saved in the same location as your .html file.

Avoid inserting HTML code directly into your CSS file to prevent any issues; refrain from using <style> tags within the .css file.

To confirm if the CSS file is properly linked to your HTML page, check the following:

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

Ensure that this link is placed within the <head> section and that the href attribute points to the correct directory and file.

If everything checks out, your CSS code is most likely error-free.

Answer №3

I'm not sure if you've already added the css file, but here's the correct way to do it. In your html file, make sure to include the link tag within the head section:

<html>
  <head>
    <link rel="stylesheet" media="screen" type="text/css" href="/style.css" />
  </head>
  <body>
    <a href="#">This is my test</a>
  </body>
</html>

The style.css file should be placed in the root folder of your website (you may want to move it to a public assets directory). For this example to work, the css file should only contain the following styles:

a {
    color: white;
}

a:hover {
    color: blue;
}

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

Issue with text not truncating in nested flexbox, and min-width is ineffective

I've been struggling for hours to implement text truncation in a flexbox layout (mainly with Bootstrap 5) but have had no success. I've come across suggestions to use min-with: 0 on the parent div, but despite trying various combinations, I can&a ...

htmlcssbootstrap-5

The HTML button renders all JavaScript functions as null and void

After adding a button line to enable a clock in HTML and the corresponding function in a <script> tag (which may or may not work), suddenly all functions on the page become undefined. There is only one other function on that page, so it could be caus ...

javascripthtmlcss

Customizing the attribute of an HTML tag using EJS or jQuery

Within my express server, I am rendering a page with the following data: app.get('/people/:personID', function (req, res) { res.render("people/profile", {person: req.person }); }); Inside my profile.ejs file, I can display the data within an ...

javascriptjqueryhtmlexpressejs

Send image data in base64 format to server using AJAX to save

My goal is to store a base64 image on a php server using the webcam-easy library (https://github.com/bensonruan/webcam-easy). I added a button to the index.html file of the demo: <button id="upload" onClick="postData()" style=" ...

javascriptphphtmlajaxbase64

Mastering the art of creating this particular design with CSS

I'm currently working on a web design project and I'm facing some challenges. In the past, I used tables to align elements on the page, but I know that's outdated now in 2011. CSS is the way to go these days, however, I'm struggling to ...

css

Safari on IOS transition transform feature malfunctions

Every time I try to apply some code to make a div move, for example using the latest iOS Safari browser, it fails to transition between the two rules set. I have experimented with different values other than percentage but still haven't been able to m ...

csssafaricss-transitionsvendor-prefix

enhancing the appearance of the initial sentence in the closing passage through CSS styling

Is there a way to make only the first sentence in the final paragraph bold using CSS? Specifically, I would like to add extra padding to the top of this last paragraph so that it wraps around an image. However, when I increase the bottom padding of the flo ...

htmlcsscss-selectors

Toggle the visibility of all elements using jQuery by creating multiple buttons for each action

I have a group of 4 buttons that control the visibility of images on the page. Each button toggles between showing and hiding all images when clicked. When a button is clicked, it changes its text from "HIDE ALL" to "DISPLAY ALL." The issue I'm facin ...

javascripthtmljquerybutton

Angular 2's Multi-select dropdown feature allows users to select multiple options

Recently, I encountered an issue with customizing CSS for angular2-multiselect-dropdown. I found the solution in this link: https://www.npmjs.com/package/angular2-multiselect-dropdown. I have included my code below. Any assistance in resolving this matter ...

javascripthtmlcssangular

In Firefox mobile, a fixed positioned element will move with the page until the scrolling comes to a halt

I am facing an issue with a CSS element set to position: fixed. While it works perfectly on desktop browsers, it behaves poorly on mobile browsers, especially Firefox. The main problem is that the fixed element scrolls along with the page and then abrupt ...

javascriptjqueryhtmlcssfirefox

What is the best way to line up a Material icon and header text side by side?

Currently, I am developing a web-page using Angular Material. In my <mat-table>, I decided to include a <mat-icon> next to the header text. However, upon adding the mat-icon, I noticed that the icon and text were not perfectly aligned. The icon ...

htmlcssangulartypescriptangular-material

What is the method for triggering two actions within a single linked tag?

I have a link tag structured like this: <a href="<?php echo base_url().'dashboard' ?>" class="check_session">Home</a> Upon clicking the "Home" link, it should navigate to the dashboard. At the dashboard page, I want to check i ...

javascriptjqueryhtmlcsscodeigniter

CSS Issue: When nesting divs, text moves to the top of the second page

Currently, I am using the following HTML and inline CSS: <div style="width: 975px; clear: both; float: left; text-align: left; margin: 0; background-color: #D3D3D3;"> <div style="width: 384px; float: left; height: 20px; margin: 0;"> ...

asp.netcss

Ways to create adaptive images using Bootstrap 5

On my website, there are some cards that look great on large and medium screens. However, on small screens, the images appear stretched vertically! I am using Bootstrap 5 and here is the code snippet: <div class="col-12 mb- ...

htmlcssbootstrap-5

Reveal a hidden div sliding in from the left within a parent div that contains multiple divs with the same class

I have come across a situation where I have multiple divs containing several hidden divs. The goal is to reveal each hidden div when hovering over a specific link. The problem I am facing is that the current code shows and hides all hidden divs at once. W ...

javascriptjqueryhtml

Positioning a div absolutely within a targeted div

Is there a way to set a div as absolute within a specific relative div rather than just the parent? For instance, I have a div that's nested inside of a row. However, I would like it to be positioned absolutely in the section instead of the row. Both ...

htmlcsscss-position

The item starts blinking as it is being moved

Hey everyone, I'm facing an issue that's been bothering me. Whenever I try to drag an element, it flickers a lot and it's really annoying. I've been struggling to figure out what's causing this problem. Below is the code snippet: ...

javascriptcss

Is all of the CSS stored in one or multiple files?

Will the number of CSS files on my website impact its performance? I understand the necessity of having a separate file for print styles, but I'm wondering about the other CSS files. Is it better to have all my styles in one file or split them into mu ...

cssweb

Tips for preventing page breaks (when printing or saving as a PDF) in lengthy HTML tables

Here is the link to a single HTML file (including style and scripts): FQ.html The problem I'm facing can be seen in this image: https://i.sstatic.net/Nr4BZ.png I've tried several solutions, the latest of which involves the following CSS... @me ...

javascripthtmlcsspdfpage-break

The HTML video controls in Safari take precedence over the window.name attribute

When using Safari 8.0.5, the controls attribute for the video element will change the value of window.name to "webkitendfullscreen". This is significant because I rely on using window.name to store client-side data in Safari's private mode, where loca ...

javascripthtmlsafari