As a newcomer to the world of web design, I recently embarked on a journey with Bootstrap and also started exploring the platform Codepen. However, after working on a project in Codepen and attempting to transfer my code to Sublime, some unexpected changes occurred. Suddenly, my footer became oversized and certain text turned gold, despite me not specifying such styles in my CSS.
I noticed that the placement of my CSS link and Bootstrap script within the HTML file seemed to impact how my page displayed. Even when I rearranged them, the desired outcome remained elusive. This left me pondering – why does the location of these elements matter if they are both housed in the head section?
Prior to encountering this issue, I had just installed Emmet and was beginning to experiment with Github by pushing files to the repository. While I'm unsure if these factors are connected to the current problem, they seem worth noting.
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="realsite/styles.css">
<link href='http://fonts.googleapis.com/css?family=Marcellus+SC' rel='stylesheet' type='text/css'>