HTML, or Hypertext Markup Language, is used to create web pages and define their structure and content and CSS has the ability to style them. HTML has a verity of elements to create the web page including web form. Checkboxes are an important part of web forms and user interfaces. Checkboxes are used when more than one option is required to be selected. By default, checkboxes in HTML are small, which is sometimes not suitable for design requirements. However, the size of the checkbox can be adjusted as per the requirement using CSS. What is Checkbox? In HTML checkbox is ... Read More

To set color of progress bar, is an important part of website as progress bar displays progress of any process like file downloads, loading time, file uploads, and other similar tasks. In this article, we have a progress bar whose by default color is grey, our task is to change the color of the progress bar. Approaches to Set Color of Progress Bar Here is a list of approaches to set color of progress bar using html and css with step wise explaination and complete example codes. Progress Bar Color Using background Property ... Read More

CSS (Cascading Style Sheets) is a powerful tool for designing the visual effects of a website. The blur effect is one of the many features in CSS, which is used to blur any element using the blur property. To create a soft, dreamy effect or to draw attention to a specific element on a page, we can use the blur effect. Syntax css element { filter : blur (amount) } The Concept of Blur Distance in CSS Before discussing the practical aspect of setting blur distance, it is important to understand the concept of blur distance. ... Read More

CSS (Cascading Style Sheets) is a powerful tool for designing the visual appearance of a website. The background-image property is one of the many features in CSS, which is used to set the background image using the background-image property. In web development, the background image is an important part of the overall design of a website. The default background of the body element in HTML is white, but with a few lines of CSS code, the background of a webpage can be changed to any image. Setting background-image in CSS Setting a background image is a great way to enhance ... Read More

Tables are used to present data in a structured and organized format. It is an essential part of web design. Alternate row colors are used to enhance the readability and aesthetics of tables. Alternate row color is a design technique in which the background color of every other row in a table is different from the adjacent rows. This technique helps readers to differentiate rows and improves the overall look of the table. Basic CSS Syntax for Alternate Row Color The :nth-child() pseudo-class selector in CSS is used to set an alternate row color for a table. The nth-child selector ... Read More

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