Problems after seperating css from html

hello,

After moving out my css from my html into a seperate file, my css reset wasn’t working anymore and some elements with relative properties weren’t displaying properly either.

I could move the css back into the html but I would rather understand what is going on. If anyone could point me in the right direction to fix this I would grateful. :slight_smile:

Did you link the new css file in the html head tag?.

Like this - <link rel="stylesheet" href="style.css" />

If you did link it. Post the code below . I will look into it.

yes i did. Its not that my entire css aint applied, just bits and pieces arent working as they should anymore. Some relative sizes and paddings are off. And when i move the reset only back into my html file the reset works, some of the relative sizes are normal again but it throws other things off again. Like navigation which is supposed to be aligned right suddenly aligns left. This is why I am confused about the matter. Anyway here is my head section:

<head>
    
    <title>"Sphynx"</title>
    
    <link rel="stylesheet" href="css/drawing.css" type="text/css">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Charm|Freckle+Face|ZCOOL+XiaoWei" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
    
</head>

Hey @feo

Try adding the external stylesheet’s before the your main css. There are chances that they might override your styles.

That is how I ordered them initially so unfortunately thats not the cause.

Post your codepen link here. We will figure it out together.

Thanks alot for the help. When I was copying and pasting my code into a codepen I removed the style tags from my css. This fixed the problems. It didnt occur to me to do that when I moved the css out of my html. Sorry! :flushed:

1 Like

Hey Feo,

Great to hear you figured it out on your own.

1 Like