In CSS, the ‘overflow’ property is used to specify the overflow of the content of the HTML element. For example, if the height of the div element is ‘500px’, and the height of the inside content is ‘1000px’, we need to make the content scrollable. In this tutorial, we will learn the difference between the ‘auto’ and ‘scroll’ values of the CSS ‘overflow’ property. Overflow: auto in CSS In CSS, overflow: auto sets the overflow of the HTML element to auto. It means if the content of the div is overflowing, it sets the ‘scroll’ as a value of ... Read More

In this tutorial, we will learn to shake a button when the user hovers using HTML and CSS. Creating a shaking button makes the UX of the application more attractive. We need to create a custom animation using the CSS ‘keyframes’ rules to shake any HTML element. After that, we can use custom keyframes as a value of the ‘animation’ CSS property to shake the button when the user hovers over the button. Syntax Users can follow the syntax below to shake a button on hover using HTML and CSS. .btn:hover { animation: key_frame_name animation_time ... Read More

We can use the ‘iFrame’ in HTML to embed the document in the HTML web page. For example, we can embed youtube videos in the web page using the ‘IFrame’ HTML tag. The ‘iFrame’ contains the border by default. In this tutorial, we will learn various approaches to removing the border from the IFrame using CSS. Use the Frameborder HTML Attribute The ‘IFrame’ contains the ‘frameborder’ HTML attribute. It can have either ‘0’ or ‘1’ as a value. Using the ‘0’ as a value of the ‘frameBorder’ HTML attribute removes the border; otherwise, it adds the border to the ... Read More

Generally, the developer uses JavaScript to add the behaviour to the HTML code. Sometimes, we can also add behaviour to the HTML code using CSS. For example, we can create a slideshow using HTML and CSS rather than using JavaScript with HTML. We can create custom keyframes to animate the slides and create a slideshow. Syntax Users can follow the syntax below to create a slideshow using only HTML and CSS. .slides { width: calc(716px * 2); animation: slideShow 10s ease infinite; } @keyframes slideShow { 30% {margin-left: 0px;} ... Read More

It is important to add animations to icons or images to improve the UX of the application. In this tutorial, we will learn to add animation to the icons. Also, we will learn to reduce or increase the size of the icon during the animation. We will use the ‘transform: scale’ property to change the dimensions of the icon during the animation. Syntax Users can follow the syntax below to reduce the size of an icon during the animation. img { animation: icon 5s infinite; } @keyframes icon { 0% {transform: scale(1);} ... Read More

In CSS, selectors are used to selecting the elements by class name, id, tag, etc. There are also some wildcard selectors available in CSS, which we can use to define the queries to select the HTML elements. Wildcard selectors allow us to select an HTML element containing the particular substring in the value of the particular attribute, such as class or id. In this tutorial, we will learn to use the *, ^, and $ wildcard selectors for classes and id. Contains (*=) wildcard selector in CSS The contains (*=) wildcard selector allows developers to find all HTML elements ... Read More

The SCSS allows developers to write CSS in a more structured way. Also, we can create multiple files for CSS while using the SCSS and import the required file in the main SCSS file. In this tutorial, we will see the objective to put ‘_’ before the filename in SCSS. When should we put ‘_’ in front of the filename in SCSS? Whenever we put the -_’ before the filename in the SCSS, the compiler ignores the file while compiling the SCSS. The file becomes partial if the filename starts with the ‘_’ character. For example, we have two ... Read More

What is SASS? The full form of the SASS is Syntactically Awesome Style Sheets. It is a preprocessor or compiler which we can use to compile the SCSS. Now, the question is that what is the SCSS? The SCSS allows developers to write CSS code in a better way as it contains the variables, nested rules, functions, etc., and similar advanced features. For example, we can use variables in SCSS, so we don’t need to write a single value multiple times but can access it using the variable name. Similarly, we can create functions in SCSS and stop ... Read More

In HTML 4, the and tags were included, but in HTML 5, only the tag exists as the tag is removed by developers. Why tag exists but not tag in the HTML 5 The tag was useful to make the font size bigger than the normal fonts. For example, if the default font size in the browser is small, the big tag makes it medium. The tag is used to make a font size smaller than the normal fonts. If the default font size is medium in the browser, the ... Read More

Developers can use JavaScritp or JQuery to manipulate the style of the HTML elements. For that, first, developers need to access the HTML elements using JQuery and then use various methods to set the style for selected HTML elements. Sometimes, we require to manage elements styles using JQuery. For example, when users click the button, we need to change the text's colour, image dimensions, etc. In this case, we can use the JQuery methods below to change the HTML elements' style. Use the CSS() method of JQuery to set styles on selected elements The first method is the css() ... Read More