How to Open Hyperlink in a New Window
Hyperlinks are used to jump from one page to another. A hyperlink commonly opens in the same page by default. But it is possible to open hyperlinks in a separate window.
How to Animate the Background of the Progress Bar
In this snippet, we’re going to animate the progress bar created with the HTML <progress> tag. In our example, we style Shadow DOM elements, but one thing that may cause difficulties is animating the background which is represented as a repeating linear-gradient.
How to Create an Animation with a Delay in CSS
To delay an animation, we use the CSS animation-delay property, which specifies the time between an element being loaded and the start of an animation. But there can be some difficulties when delaying the animation, such as the problem when an element disappears after the animation. Let’s see the solution to this.
Which is Better to Use in CSS: px, em, or rem
First of all, we must understand that there isn’t any best option of measurement unit for all cases, and that’s why this question is mostly opinion-based. But let’s discuss each of the units.
Using px
CSS defines a reference pixel that measures the pixel size on a 96dpi display. On display with a dpi significantly different from 96dpi, the user agent will rescale the px unit so that its size will match the one of a reference pixel.
How to Disable Form Fields with CSS
You can disable form fields by using some CSS. To disable form fields, use the CSS pointer-events property set to “none”.
<!DOCTYPE html>
<html>
<head>
<title>How to Disable Form Fields with CSS</title>
<style>
input[name=yourName] {
pointer-events: none;
}
</style>
</head>
<body>
<input type="text" name="yourName" value="blog it">
</body>
</html>
How to create HTML <iframe> Tag
The <iframe> tag creates an inline frame for embedding third-party content (media, applets, etc.). Although the content of the frame and the web page are independent, they can interact through JavaScript.
<!DOCTYPE html>
<html>
<head>
<title>HTML <iframe> Tag</title>
</head>
<body>
<iframe src="http://blog-it.tn/"></iframe>
</body>
</html>
How to Make the Middle Item Stay Centered
It is possible to center the middle item regardless of the widths of siblings by using Flexbox. You need to use nested flex containers and auto margins. Below, you can see how it can be done.
How to Create a List With Dashes in HTML
If you want to have an unordered list styled with dashes instead of bullets, you can use the CSS :before pseudo-element with the content property.
In the example above, we set the list-style-type property of the <ul> element to “none”. Also, we added the position and margin-left properties to the <li> elements.
HTML5 Page Structure
A basic HTML page always begins with the declaration of the document type or doctype. It is a way to inform browsers about the type of document. The doctype is always the first element at the top of all HTML files. Then we have sections and subsections, each has its title and subtitle. These titles and section elements help the reader to perceive the meaning of the content.