To embed a PDF in HTML is an easy task and there are various ways. Let us see them one by one. Embed PDF in HTML using iframe. Embed PDF in HTML using the embed tag. Embed PDF in HTML using the object tag. Embed PDF in HTML using iframe Set the src attribute of the iframe tag and add the link of the PDF to embed − Example Let us now see an example to ember PDF using − Embed PDF ... Read More

In this article, we will set the left-most inner div to determine the height of the outer div. Consider the following two example − Set the height of an outer div to always be equal to a particular inner div using Flex Set the height of an outer div to always be equal to a particular inner div using CSS Grid Set the height of an outer div to always be equal to a particular inner div using Flex Example Let us see the example using Flex − ... Read More

To disable autofill option specially on Google Chrome, use the autocomplete attribute and set it to − autocomplete="chrome-off" We will see an HTML form and for the fields we will disable the autofill, first for the form − Now, disable the autofill for each input type − Example Let us see an example − input { width: 315px; display: block; margin: 1rem auto; ... Read More

To prevent parents of floated elements from collapsing, first, we will try to understand what the problem is. After that, we will work around the examples i.e. How parents of floated elements collapse? Prevent parents of floated elements to collapse using the Overflow Property Prevent parents of floated elements to collapse using the Height Property How parents of floated elements collapse Example Let us first understand how parents of floated elements collapse. Here’s an example − Example div{ ... Read More

We need to keep the two side-by-side div the same height, so that if more content is added to any of the div, the size of the other div matches it. The following two examples are covered − Keep two side-by-side div elements the same height using HTML Keep two side-by-side div elements the same height using JavaScript Let us see the example one by one − Keep two side-by-side div elements the same height using HTML Example We will use the following code to keep two side-by-side div elements the same height - ... Read More

The !important rule overrides all previous styling rules. It is based on the concept of priority or specificity. The !important rule provides a way to make your CSS cascade. It also includes the rules that are to be applied always. A rule having the !important property will always be applied, no matter where that rule appears in the CSS document. Let us see an example − Priority - Without Using !important Example Let us first see an example how the specificity and priority works without using the !important − ... Read More

We can easily center an absolute position element horizontally and vertically in Python. For that, use the following CSS properties. For horizontal center, use the following properties − left margin-left For vertical center, use the following properties − top margin-top Horizontal center an absolute position element Example To horizontal center an absolute position element, use the following code − div.center{ width:200px; height: 50px; ... Read More

To create a custom scrollbar, we will use the following pseudo element to create a responsive custom scrollbar using CSS − :-webkit-scrollbar Create a custom scrollbar First, set the width of the scrollbar − ::-webkit-scrollbar { width: 12px; } Set the color of the scrollbar − ::-webkit-scrollbar-thumb { background: skyblue; } Set the hover color of the scrollbar − ::-webkit-scrollbar-thumb:hover { background: blue; } Example Let us now see the complete example to create a responsive custom scrollbar − ... Read More

With CSS, we can make horizontal line with words in the middle. Additionally, we can also make horizontal line with headings and even image. Let us see some examples − Make a horizontal line with words in the middleExample In this example, we will create a horizontal line with words in the middle using flex − p { display: flex; flex-direction: row; } ... Read More

Yes, according to HTML5 Specifications, we can place a div inside an anchor tag, for example − Another example − this now becomes a link The HTML5 allows tag to be wrapped around a element. Therefore, the will be visible inside the tag.Example Let us see an example for div inside the tag − .container { position: relative; background-color: orange; width: 200px; height: 200px; } .container a { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 999; } Demo Heading div one div two Output Click on the orange colored div and the link will open −