Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
Articles by Shubham Vora
Page 29 of 80
What is Float Containment in CSS?
First, let’s understand float containment before starting this tutorial. So, Float containment is a technique used in the CSS to control the layout of the web page elements. Whenever we set the ‘float’ property for any HTML element, it automatically gets removed from the original document flow of the web page, but it remains in the viewport. So, developers can face issues like the parent div element not expanding according to the dimensions of the child div element. Let’s understand it via the example below. Example In the example below, we have a ‘parent’ div element containing the text and ...
Read MoreWhat does the CSS rule “clear: both” do?
We use the ‘float’ property in CSS to keep elements floating on the left or right side. So, whenever we set the ‘float’ property for any HTML element, it is taken out from the document's normal flow, and sometimes it can create lots of problems. The ‘clear’ CSS property allows developers to set the position of the element which is next to the floating element. However, it always pushes the next element below the floating elements. The ‘clear’ property of CSS can have 4 different values: ' left’, ‘right’, ‘both’, and ‘inherit’. The ‘left’ value is used to push the ...
Read MoreWhat can be done with style sheets that can not be accomplished with regular HTML ?
Developers can use CSS to describe the presentation of the web page content. The stylesheet contains the CSS code, which we link with the web page for a better representation of the web page. Why do we Require to use a Stylesheet with an HTML Web Page? For beginners, the first question comes to mind is that why do we require to use the stylesheet? Can’t we create web pages without using the stylesheet? The answer is yes. You can create a web page without using the stylesheet. HTML is only used to add content to the web page, and ...
Read MoreWhat is the use of CSS ruleset?
CSS stands for the cascading style sheet. It is used to style the HTML element. HTML is used to create web pages or add content to web pages. After that, the developer uses CSS to render the HTML content in a particular style to make it look awesome. The CSS ruleset contains mainly two parts. One is a CSS selector, and another is a declaration block. The CSS selector is used to select HTML elements, and the declaration block contains the CSS properties in the key-value format to apply to the HTML element. Syntax Users can follow the syntax ...
Read MoreWhat is the difference between “screen” and “only screen” in media queries?
In CSS, media queries play an important role in creating a responsive web design, and nowadays responsive design is one of the important things every website requires to attract visitors. In general, we can write media queries using the @media CSS rule. However, we can use the different conditions and keywords in a media query to target different devices. For example, mobile devices, desktop devices, printer screens, etc. In this tutorial, we will learn the difference between the ‘screen’ and ‘only screen’ in media queries. What is a Screen in Media Queries? In CSS, we use the ‘screen’ keyword inside ...
Read MoreWhat is the Outline Effect to Text?
Sometimes, we require to show only the text's outline and remove the text's fill. We can also say it is the outline effect. We can use various CSS properties to generate an outline effect for the text. For example, we can add a border to the text and remove the fill colour of the text to add an outline effect to the text. Here, we have three different approaches to showing text with outline effects using HTML and CSS. Using the Various CSS Properties In this approach, we will use the three CSS properties to add an outline effect to ...
Read MoreWhat is the difference between position:sticky and position:fixed in CSS?
In CSS, the ‘position’ property is used to set the position in the viewport for the HTML element. It can have values such as ‘fixed’, ‘sticky’, ‘static’, ‘absolute’, ‘relative’, etc. In this tutorial, we will learn the difference between the ‘position: fixed’ and ‘position: sticky’. What is Position: Fixed in CSS? The ‘fixed’ value for the position property is used to set any element at the fixed position in the HTML viewport. Whenever we set the fixed position for any HTML element, it comes out from the document flow. It sets the position based on the viewport, even if we ...
Read MoreWhat is styling text input caret ?
In the text input of the HTML, you can observe the marker showing at the editing position in the text, called the text input caret. Also, it is known as a text input cursor. In this tutorial, we will learn to style the text input caret. However, we can only change the color of the text input caret as changing shape is not supported by modern browsers. Syntax Users can follow the syntax below to use the ‘caret-color’ CSS property to change the color of the text input caret. caret-color: color; In the above input, ‘color’ can be the ...
Read MoreWave inside Text using pure CSS
Developers can use CSS to add animation to the HTML element. Here, we will use CSS to add a wavy effect inside the text. It will look like a real wave in text Here, we have three approaches to add a wavy effect to the text. We will take a look at all approaches one by one. Syntax Users can follow the syntax below to add a wavy effect to the text. @keyframes wavey { 0%, 100% { /* add initial clip-path */ } ...
Read MoreWhat is tree shaking in JavaScript?
What is Tree Shaking? If you are an experienced JavaScript developer, you may hear about tree shaking. It is a common technique to remove unused codes from the application and also, and it removes unused imports from the application. Here, the ‘Tree shaking’ term is introduced by shaking a tree, removing unnecessary branches of the code, and keeping the required code in the final bundle. Basically, tree shaking is used to eliminate the dead or unused code. Why do we Require Tree Shaking? As we have seen in the above part of the tutorial, tree shaking is used to remove ...
Read More