To arrange text in multi-columns we are using the “column-count” property of CSS3. The “column-count” property is used to divide an HTML element’s content into the number of columns specified. Here we are going to use two different example to demonstrate the application of “colum count” property of CSS to arrange text in 2 and 3 columns. Syntax column-count: n; Here, “n” is the positive integer value that represents the number of columns we want to arrange the text into. Example 1 In this example, we will arrange a “p” tag’s content into 3 columns by using ... Read More

For Applying Styles to Muitliple classes at once we are going to use dot(.) selector and comma(, ). In this article, we will use the dot (.) selector and select all the elements with their class names using the selector and separated by a comma (, ). A “class” is an HTML attribute that accepts a list of classes separated by space. These classes can then be used in CSS to style the particular elements, or in javascript to manipulate those HTML elements. Example 1 In this example, we will apply the font color “red” to the HTML elements that ... Read More

We can apply a shadow effect on a text element using the “text-shadow” property given by CSS. The “text-shadow” property takes a list of values that represents X and Y offsets of the shadow from the element, the blur radius of the shadow, and the color of the shadow. These values are listed in the syntax below − Syntax text-shadow: offset_y offset_x blur-radius color Here the values and their meanings are listed below − Offset-x − It represents the distance of the shadow from the element in the horizontal direction Offset-y − It represents the distance of the ... Read More

Inline CSS is writing the styles for a particular HTML element inside its “style” attribute. The styles here are unique to the element itself, and generally override the CSS provided internally or externally. CSS is used to apply styling to the HTML elements in a web application, and there are various ways through which we can achieve this. One of the ways of applying custom styles is by using inline CSS. Syntax Here, “tag_name” refers to any HTML tag name, and the “style” attribute of the HTML tag allows us to add inline styles to the element directly. ... Read More

We can apply the hover effect over the button using SASS with the help of the :hover CSS selector.SASS stands for Syntactically Awesome Stylesheet and is a CSS pre-processor, which implies one can generate CSS from its respective SASS code. Using SASS instead of just writing CSS comes with its own set of advantages, like more readable code and easy-to-learn code syntax, and one can leverage these to style the HTML elements, more easily and efficiently, in a web application. In this article, we will give styling to a button element with the help of SASS. First, we will write ... Read More

We can use glyphicons in a bootstrap project by simply giving a glyphicon-specific class to a “span” tag in HTML. Glyphicons are basically font icons that can be used anywhere in your web application, for example, in buttons, forms, inputs, texts, etc. They are provided by Bootstrap and usually consist of symbols, fonts, or graphic icons. Syntax Here, the “glyphicon” class is a Bootstrap class that allows us to use glyphicon icons in the web application, and “icon_name” refers to the particular glyphicon icon that we want to embed and use in the application. Approach 1: Using CSS ... Read More

We can use jquery’s .css() method to apply CSS style on the given webpage. jQuery is a javascript library that helps us manipulate the DOM easily and efficiently using its various helper methods and properties. It allows us to add interactivity to the DOM as well as add and change the CSS styles of the DOM elements. Syntax $(selector).css(property, value) OR $(selector).css({ property: value, property: value, … }) JQuery css() method accepts either an argument of type object, with key as the CSS property name and value as the desired property value to be set to, or ... Read More

HTML classes are global attributes that are used by HTML tags to specify a list of classes that are case-sensitive in nature. These classes are then used by CSS, to apply styling to that particular tag that has the class, and by Javascript, to manipulate the HTML element’s behavior, interactivity, or styles. Approach 1; Using the dot(.) selector In this approach, we will simply use the dot (.) selector to select multiple elements having the same class names, and apply the same set of styles to them using CSS. Example In this example, we will select a “p” tag and ... Read More

First, we look into what filters in angularjs and then how to use them. Filters are used to format the value of an expression to display on the UI to the user without changing the original format. Filters will be added to an expression using the pipe | operator. Like, {{expression | filterName}} Angularjs provides some built-in filters to format the data. Like, as currency, uppercase, lowercase, number, orderBy, limitTo, json, filter, and date. Now, we look into how to use them in our code using angularjs. AngularJS Currency Filter This filter is used to format the data into ... Read More

Directives in Angular 8, are classes that can add new behavior to the elements in the template. Directives are used to manipulate the DOM. We can change the behavior and appearance of the DOM elements using directives. Simply we can use the HTML using directives. Using directives, we can achieve reusability, readability and maintainability. Directives will give the high-level of reusability throughout the application. This will help in large application like same functionality required by many places. There are 3 types of directives − Component directives Attribute directives Structural directives We can also create custom directives based on ... Read More