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 More

The SASS allows developers to write more readable code and manipulate it in a better way. It contains multiple directives such as @media, @content, @include, @mixin, @extend, etc., providing some functionality so developers can write better code than normal CSS. In this tutorial, we will learn about the @directive in SASS. The @extend directive allows developers to extend the CSS code. However, mixins also extend the CSS code and avoid repetition. The @extend directive also allows us to avoid the repetitions of the code. For example, if you have a common CSS for the application's fonts and need different font ... Read More

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 More

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 More

Sometimes, the task is to store and display several items as a List. For this React Native component, Flatlist can be used. The FlatList can also be made selectable or clickable. In this article, the React native and javascript code is shown with two different examples where first the items of a list are stored as an array of key-value pairs identifiable with a unique id and then fetched and rendered. Algorithm Algorithm-1 Step 1 − Import FlatList, Text and View from 'react-native'. Step 2 − Make the App.js and write the code for storing a list. The list is ... Read More

In React native apps, multiple screens are often needed. And the user needs to go from one screen to the other screen. In this article, two different approaches are used to make the two-screen apps where the user can go from one screen to the other and back. In Example 1, the createStackNavigator module from 'react-navigation' is used to implement the navigation while in Example 2, for creating the navigation the createSwitchNavigator is used. Algorithm Algorithm 1 Step 1 − Import createStackNavigator from 'react-navigation' Step 2 − Make the App.js and write the code for navigation from one screen ... Read More

There are lots of ways to use data with apps made with Snack Expo. Sometimes the data is stored as JSON, that mean JavaScript Object Notation. In this format, the data can be stored easily as Key-Value pairs and can also be converted to a CSV file. In this article, using javascript on Snack, the methods to use JSON data are specified. In example 1, the method to read this data and to display it as a table is given. In the second example, the methods of saving the JSON data as a CSV file and to download it, is ... Read More

Jquery contains various methods, and CSS() is one of them. The CSS() method is used to get the value of the particular css property applied to the particular HTML element. Furthermore, it is also used to set the CSS property with its value for the particular HTML element. Developers can also update the CSS property value using the CSS() method. In this tutorial, we will learn to use Jquery's css() method to access and set the CSS property for the particular HTML element. Syntax Users can follow the syntax below to use Jquery's css() method. Var value = $('element').css(property); $('element').css(property, ... Read More

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 More

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 More