I have a quick question about HTML and CSS. Recently, I started using Twitter's Bootstrap framework and added this code snippet to the head of my index.html file:
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet"> <!-- Custom CSS Overwrite-->
<style type="text/css">
html{overflow-y:scroll;} <!-- Fixes "page shift" issue -->
</style>
The bootstrap.css file contains the following styles for 'html':
html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
I'm wondering if the CSS declared in my html file appends or overwrites the existing html{} style from bootstrap.css. I hope it appends as overwriting could potentially cause issues in the future.
I prefer not to edit the bootstrap.css file directly because I've heard that it's best practice to avoid such edits for smoother upgrades in the future.
For those curious, the overflow-y:scroll property is used to always display a vertical scrollbar in the browser, regardless of whether there is scrollable content or not. This simple fix prevents the irritating "page shift" problem, providing an easy solution.