0

Since I added bootstrap and font awesome to my html file, most of the css done before just disappeared (background-color, google fonts)

<head>
    <meta charset="utf-8">
    <title>Games</title>
    <link rel="stylesheet" href="main.css">  
    <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

    <link href='https://fonts.googleapis.com/css?family=Orbitron:400,500' rel='stylesheet' type='text/css'>       
    <link href='https://fonts.googleapis.com/css?family=Homemade+Apple' rel='stylesheet' type='text/css'>
</head>

Does someone know why? Thanks!!

Steve
  • 9,335
  • 10
  • 49
  • 81
learningcoding
  • 187
  • 2
  • 14

1 Answers1

0

Move your main.css file declaration to after your bootstrap and font-awesome declarations. Since CSS is cascading the later styles are overwriting your custom styles.

<head>
    <meta charset="utf-8">
    <title>Games</title>
    <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

    <link href='https://fonts.googleapis.com/css?family=Orbitron:400,500' rel='stylesheet' type='text/css'>       
    <link href='https://fonts.googleapis.com/css?family=Homemade+Apple' rel='stylesheet' type='text/css'>

    <link rel="stylesheet" href="main.css">  
</head>
Steve
  • 9,335
  • 10
  • 49
  • 81
  • If the bootstrap css has a higher specificity, changing the order won't help a bit. – GolezTrol Apr 27 '16 at 00:39
  • @GolezTrol generally, Bootstrap doesn't use `!important` for precisely this reason. – Steve Apr 27 '16 at 00:39
  • 1
    I'm not talking about that. I said [Specificity](https://css-tricks.com/specifics-on-css-specificity/), which is much more than just adding `!important`. (And you should never use `!important` anyway) – GolezTrol Apr 27 '16 at 00:40
  • @GolezTrol I hadn't heard that term, but I get the concept. It could still be overwritten by a later file with the same (or higher) specificity. – Steve Apr 27 '16 at 00:42
  • I mean that if the Bootstrapper's specificity is higher, the later file won't overwrite the previous one, so just changing the order is probably not a full solution. Can't hurt to try, of course, maybe you're lucky. :) – GolezTrol Apr 27 '16 at 00:44
  • @GolezTrol I agree, custom styles should still be placed after framework styles, however. – Steve Apr 27 '16 at 00:45
  • @ Steve Thanks- moving the css after bootstrap worked for the color and the fonts, but now the order of elements got weird- so they are not at the same place they were before.. Its not a big problem since I can just change margins etc, but just wonder what the reason is! – learningcoding Apr 27 '16 at 00:49