Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 623
Andrue Avatar asked Nov 09 '13 04:11

Andrue


People also ask

Why are my CSS changes not working?

If you are not seeing changes that you have applied to your website, you may need to clear your browser cache and/or the CDN cache.

Why are my CSS changes not reflecting?

Force the refresh of the browser-cached resource by pressing CTRL F5 . HINT: This Q&A explores the subject. Force the refresh of the server-cached resource by entering the URL of the static resources in the Address Bar and pressing CTRL F5 on that page (that is the CSS file).

Why is my CSS style not being applied?

Make sure that you add the rel attribute to the link tag When you add an external CSS file to your HTML document, you need to add the rel="stylesheet" attribute to the <link> tag to make it work. If you omit the rel attribute from the <link> tag then the style won't be applied to the page.

Why is my CSS not working in PHP?

Putting PHP code in a CSS file will not work. You will have to create a PHP file first, and let that output CSS code.


2 Answers

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.

like image 123
Andrue Avatar answered Oct 03 '22 08:10

Andrue


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.

like image 29
Renato Zannon Avatar answered Oct 03 '22 07:10

Renato Zannon