htmlcsscascading

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>

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.