CODEWITHSUNDEEP
htmlcsscascading
Andrue
Andrue

Reputation: 707

CSS Not Taking Effect on Page

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>

Upvotes: 5

Views: 6241

Answers (3)

Andrue
Andrue

Reputation: 707

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.

Upvotes: 5

Renish Khunt
Renish Khunt

Reputation: 5824

try this i hope this is working.

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

Upvotes: 2

Renato Zannon
Renato Zannon

Reputation: 29941

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.

Upvotes: 3

Related Questions