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

In SASS, the directive is a special symbol that starts with the ‘@’ character. There are various kinds of directives that are used in the SCSS code, instructing the compiler to process the code in a particular way. In this tutorial, we will learn about the @error and @debug directives used to throw an error or debug the code, respectively. @error directive in SASS The error directive is represented like ‘@error’, and we can use it whenever we require to throw an error. For example, if some condition doesn’t meet, we require to throw an error. Syntax Users ... Read More

The shimmer effect is an animation effect, and many websites add the shimmer effect in the loading indicator. It is an illusion of movement in the web page or HTML element. We can create a shimmer effect using various CSS properties such as linear gradients, keyframes, animation, background position, transform, etc. Basically, the shimmer effect adds alternative light and dark moving lines. Here, we will learn to create a shimmer effect using CSS. Syntax Users can follow the syntax below to create a shimmer effect using the CSS. .shimmer-div { background: linear-gradient animation: ... Read More

While creating the responsive design for the application, it is also necessary to create a responsive card designs. Sometimes, developers require to add a hover effect on the card. So, when the user hovers over the card, it should change the style of the card. Here, we will learn to add a hover effect on the card and change the CSS whenever the user hovers over the card. Syntax Users can follow the syntax below to add the hover effect to the card. .card:hover { /* add css to set to element on hover */ ... Read More

To make a responsive design of the application, we also require to make an image responsive. If images are not responsive, overflow occurs in the app, and it looks worst. So, we also require to increase or decrease the images' dimensions proportional to the parent element's dimensions. Here, we will learn various ways to resize images proportionally with CSS. Syntax Users can follow the syntax below to resize the image proportionally using the ‘width’ CSS property. img { width: 100%; height: auto; } In the above syntax, we have set 100% width ... Read More

Sometimes, the task is to find the user’s current position and then to show the location coordinates on the webpage or show the location on a map. Using HTML and javascript code this process of getting the current location of the user in an HTML page is demonstrated in this article. This is shown by using two different examples. In the first example, the current location of the user can be fetched and then the location coordinates are displayed on the HTML page. In the second example, an open-source Leaflet map library is used to fetch and then display the ... Read More

Sometimes, the task is change the page themes and to use different CSS files on the same page content. In such tasks the need is to fetch a CSS and load it dynamically while selecting a theme. In this case the CSS file has to be accessed, loaded and even selected through a javascript program. Using HTML and javascript code this process of loading the CSS file is demonstrated in this article. This is shown by using two different examples. In the first example, a CSS file is selected on the windows load event. In the second example, two buttons ... Read More

Sometimes, the task is to click a link in one container and to display the content in another container. In HTML, iframes are used to easily show the content in specified area on the page. In this article, using two different examples, links are used to load an iframe using another iframe links. In example 1, the links in the upper Iframe are used to display two different pictures in the bottom iframe. In example 2, using the links in the upper iframe the video content is displayed both in the bottom iframe as well in the upper iframe. ... Read More