What's the best approach when it comes to declaring CSS in an HTML document: should you

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.

htmlcss

Answer №1

It will be attached to the end of it. (Unless Bootstrap has modified the overflow-y attribute of the html element.)

This is a common occurrence in CSS.

For example:

.foo {
    background-color: red;
}
.foo {
    color: green;
}

Is equivalent to:

.foo {
    background-color: red;
    color: green;
}

The exception occurs when you modify the same value, as CSS does not allow multiple values for properties.

I am unsure if Bootstrap includes an additional overflow-y property on the <html> tag. If it does, your page shifting issue css will override it. If not, it will be "appended" to it.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Brick-themed HTML/CSS elements drift away from each other

I'm currently designing an image collage for my website and attempted to use masonry for the layout. However, when I adjust the size of the blocks, they seem to drift apart, creating large gaps between each block. Any suggestions on how to resolve thi ...

javascripthtmlcssmasonry

Error encountered when using Symfony 2 command line interface

Just started learning Symfony2 and encountered a problem. I made changes to my CSS and when I try to re-install them in Eclipse shell, I get this error message: 'C:\wamp\www\Symfony' is not recognized as an internal or external ...

csssymfony

Troubleshooting a dysfunctional Vue.js component

I am currently facing a challenge in getting components to function properly. Interestingly, without the component, everything seems to be working fine (as per the commented code). Here is my HTML snippet: <strong>Total Price:</strong> <sp ...

javascripthtmllaravelcomponentsvue.js

Ensuring IconButton is perfectly aligned with Text in one straight line

I want to display IconButtons alongside plain text in a single block of text, but the result didn't turn out as I had hoped. Here is what I attempted: JS(ReactJS): <div> <span> <h3>Title</h3> <IconButton className ...

cssreactjsmaterial-uifrontend

Adding a new element with Jquery when a dropdown option is selected

What is causing this issue to not function properly? <script> $(document).ready(function(){ $('#custom_field option').click(function(){ $('#custom_field_input').append('<tr><td></td> ...

phpjavascriptjqueryhtmlforms

Switching between height: 0 and height:auto dynamically with the power of JavaScript and VueJS

Currently, I am changing the height of a container from 0px to auto. Since I do not know the exact final height needed for the container, using max-height could be an option but I prefer this method. The transition from 0 to auto works smoothly, however, ...

javascriptcssvue.jscss-transitions

Is there a way to listen for the validation of an HTML5 form before it is submitted?

I've been trying to figure out a way to detect if a form has been validated, but so far, no luck. For example: User clicks the submit button The form is invalid, so the submit event doesn't occur At this point, I want to add the class .form-fe ...

javascriptjqueryhtml

Misunderstandings between HTML and CSS

Can someone please clarify how the functionality of the active-slide class? Code: <div class="slider"> <div class="slide active-slide">..</div> <div class = "slide slide-feature">..</div> <div class = "slide">..</di ...

javascriptjqueryhtmlcss

The navigation bar at the top of the page is causing content to be blocked on mobile screens, but not on desktop screens

My Fixed-Top navbar is causing an issue on mobile screens, as it is covering the top content of the page. This problem doesn't occur on PC screens. When I resize the browser width to fit a mobile screen, the navbar overlaps with the body content... &l ...

htmlcssnavbarbootstrap-5fixed

Learn how to dynamically alter the background color of a webpage by utilizing a JSON API for random color selection

My goal is to trigger a javascript function onload that will dynamically change the background color of the webpage using random colors fetched from a JSON file. ...

javascripthtmljson

Unable to eliminate top padding without using universal selector

Trying to remove the top padding on a webpage, but encountering some difficulty. Here's the HTML code: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> <title&g ...

htmlcssmarginpadding

showing sections that collapse next to each other

I am currently designing a portfolio website using HTML, CSS, and vanilla JavaScript. I have implemented collapsing sections that expand when clicked on. However, the buttons for these sections are stacked vertically and I want to place them side by side. ...

javascripthtmlcss

Webpage expands its reach beyond the confines of the HTML element

I've recently added a background gradient to my webpage to make it easier on the eyes, but now I've noticed that the page extends past the <html> element and continues scrolling. This also causes the background gradient to repeat below the ...

htmlcss

Tips for displaying two input decorations in Material UI beside one another within a text field

In the Text Field demonstration, I noticed input adornments at the start and end. However, I am looking to have two input adornments at the end specifically. I attempted to add them using endAdornment: {InputAdornment InputAdornment}, but encountered an er ...

javascriptcssreactjsmaterial-ui

The website is unresponsive and fails to adapt to mobile screen sizes

For practice, I designed this layout that is not responsive to mobile screens. The text is supposed to be below the image, but it is not adjusting as expected. To make it responsive, I used Bootstrap, but it seems to not be working properly. Below is the ...

htmltwitter-bootstrapbootstrap-5

The fixed position setting does not anchor the elements to the bottom of a container

When applying the following styles: #fullpage-menu > .gradient { position: fixed; bottom: 0; left: 0; width: 100%; height: 0.3rem; } To the element with ID #fullpage-menu, which is styled as follows: #fullpage-menu { height: 100 ...

javascripthtmlcss

When a link is entered into a textbox, the desired outcome is for it to display as a clickable link when viewed on a web page

I am looking to create a text box where I can input a link, store it in a MySQL database using PHP, and then display the link on a PHP page so that it behaves like the original link. For example: <form> <input type="" name="text" /> <input ...

phphtml

HTML5 pattern grouping feature is not functioning as expected

I am attempting to validate this regular expression pattern="([a-zA-Z]+[0-9]*){4,}", which essentially means: It must always start with an alphabetic character. If a number is included, there must be at least 4 characters in total; for example, aaaa would ...

regexhtml

Is it possible to create a collapse and expand animation that does not involve transitioning the `height

After extensively researching, I have come across numerous articles advocating for the use of transform and opacity for achieving smooth CSS transitions. An example can be found here: The prevailing notion always revolves around: ...the optimization ...

javascripthtmlcssreactjsstyled-components

Leveraging strings as URLs to embed PDFs in Wordpress using PDF Embedder

I'm encountering an issue related to a Wordpress plugin called PDF Embedder, as well as concatenating/using a string with document.write. My goal is to make this code work: <script src="http://nooze.org/wp-content/uploads/scripts/dateGetter.js"> ...

javascriptphphtmlwordpresspdf