CSS or Cascading Style Sheets, is a powerful tool that provides a range of properties for aligning and positioning fonts on a web page. The font declaration property is one of the many properties available in CSS. In CSS, all font properties can be set in one declaration using the shorthand property. This property allows specifying the font style, variant, weight, size, line height, family, text decoration, and text transform all in one line of code. Setting Font Properties in CSS CSS provides a variety of font properties for styling text, which are used to style text on a web ... Read More

CSS or Cascading Style Sheets is a powerful tool that provides a range of properties for aligning and positioning elements on a web page. The align-self property is one of the many properties available in CSS, which is used to adjust the alignment of individual flex items within a flex container. By default, align-self is set to auto, which means that the element will inherit the alignment of its parent container. However, this behavior can be changed for individual flex items by setting the align-self property. scc selector{ align-self: auto; } The align-self Property in CSS Before we discuss ... Read More

Overview The progress bar is the main component for any web application. The progress tells the completion of a certain project or task. In this module we will build the progress bar using the HTML and will style it through the CSS. We will also provide the progress animation to our progress bar. In this task we will use the @keyframes to make the progress bar animated. Using the animation styling property such as animation duration, name, timing, etc. Algorithm Step 1 − Create a HTML boilerplate in your text editor. Step 2 − Create the parent div container ... Read More

Overview A portfolio gallery can be a collection of any types of photos and videos that represent the past work of the organization. To build a portfolio gallery we will use HTML and CSS. The HTML will help us in building the skeleton of the portfolio gallery and CSS is used to make the styling of the portfolio. As the portfolio will also be the main component of our website so we will make this page responsive using some CSS properties. Algorithm Step 1 − Create a HTML boilerplate on your text editor. Step 2 − Create a container ... Read More

In CSS, the padding property allows us to add extra space between the HTML element’s border and its content. The right padding means only adding the space between the element’s content and the right border. Here, we will learn two different properties to specify the right padding of an element. Use the padding-right CSS Property The ‘padding-right’ property specifies the right padding of an element in CSS. Whenever we specify the right padding for an element, the width of the element becomes equal to the actual width + right padding. Syntax Users can follow the syntax below to specify the ... Read More

In CSS, the ‘background-image’ property is used to set the background image of an element using CSS. The background-image property takes 4 different properties, as explained below. Url () − It takes an image path or remote url to fetch the image from a particular location and set it as a background. None − Users can use none as a value of the background-image property to remove the background. Initial − It sets the initial background, which will be none in most cases. Inherit − It sets the same background image as the parent elements. Syntax Users ... Read More

In CSS, we can use the ‘font-style’ property to set the style of the font. We can use the different styles as a value of the font-style property, and ‘oblique’ is one of them. Basically, the ‘oblique’ font is a sloppy version of the text, and we set the angle to decrease or increase the slope of the text. Here, we will make a font oblique in the various examples. Syntax Users can follow the syntax below to make a font oblique using the font-style property of CSS. font-style: oblique; Example 1 In the example below, we have created ... Read More

In CSS, the ‘border’ property is used to add a border to the HTML elements. We can add a border of widths, styles, and colours to the HTML element. Two border values come to mind when we need to remove the border from any element. The first value is ‘none’, and the second is ‘0’. Sometimes, it creates confusion about which value we should use, and in this tutorial, we will clear that doubt. Syntax Users can follow the syntax below to use the ‘none’ or ‘0’ as a value of the ‘border’ property. border: none; border: 0; Border: ... Read More

In CSS, the z-index property is used to put one element on another. For example, we can create a stack of multiple HTML elements using CSS. If you have ever used the z-index property, you must have seen its value like 9, 99, 999, 0, -9, -99999, etc. Have you ever asked yourself what could be the maximum value of the z-index, and have you researched about that on the internet? If not, go through this guide. The maximum value of the z-index property is equal to 2147483647, and the minimum value is -2147483647. The number 2147483647 equals 232, the ... Read More

To set the opacity only to background color not on the text in CSS, it can help in creating overlays cards or popups. We can decrease the background color's opacity by decreasing the alpha variable's value while assigning the color value to the background color property. In this article, we are having three div boxes with background color, our task is to set the opacity only to background color not on the text in CSS. Approaches to Set the Opacity only to Background Color Here is a list of approaches to set the opacity only to background color not on ... Read More