CSS Not Taking Effect on Page

StackOverflow https://stackoverflow.com/questions/19872493

  •  29-07-2022
  •  | 
  •  

Question

I'm a new web design student and I just learned about Cascading Style sheets and how to link them externally; however, I'm encountering a problem. I have the file linked in my <head> with no problem and the file directory is correct, but my changes are not showing up. If I had a <style> tag or attribute then my CSS works, but not from the external file. Any help?

<!DOCTYPE html>
<html>
<head>
<title>Protein Structures</title>
<link href="styles/main.css">
</head>
Was it helpful?

Solution

I make this same mistake when I'm in a rush. The problem is, you're linking the file correctly, but the browser doesn't know how to interpret the file. Is it a stylesheet, icon, alternate stylesheet? You need to add the rel attribute and set it equal to stylesheet.

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

I'm not sure if type="text/css" is still mandatory. I know that when doing Javascript you don't have to have type="text/javascript".

Here's a good link explaining why.

OTHER TIPS

You need to add what the relationship of the link is. Change your <link> tag to:

<link href="styles/main.css" rel="stylesheet">

You might want to take a look at the documentation for link types to understand why the rel is necessary.

try this i hope this is working.

<link type="text/css" rel="stylesheet" href="styles/main.css" media="all">
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top