Author: Saim Khalid

CSS Variables are custom properties that allows you to store and reuse values throughout your CSS program. CSS variables are similar to variables in other programming languages. Table of Contents How to declare a Variable in CSS? CSS variables are typically defined using :root selector. Following is syntax to declare a CSS variable: :root{–variable-name: value;} To…

CSS pagination is a technique of creating page numbers for a website. This help users to easily navigate between large amounts of content. In this chapter, we will learn how to setup and style pagination using CSS. CSS Pagination Example Here is a example of pagination styled using CSS. 12345 First Page Table of Contents…

Buttons are interactive elements that allow users to perform actions on your website or application. Buttons are commonly either rectangular or circular in shape and have a text label that says what will happen when you click on them. While browsing web pages, you may have come across various interactive elements, such as submit buttons. In…

CSS Tooltips are small pop-up boxes that appears when user hovers over an element, providing additional information or more context. Tooltips are styled and positioned using CSS properties inset, translateX, translateY etc. In this tutorial we will learn how create, position and style tooltips using CSS. Demo Tooltip Examples The following section shows examples of…

The box-sizing property in CSS is used to define how the total width and height of an element is calculated. By default, the width and height of an element includes its content, padding, and border. However, with the box-sizing property, you can alter this behavior to include or exclude the padding and border from the width and height calculation.…

CSS provide several properties to design multiple column layout for webpages. The multiple column layout is used generally for layout designing in newspapers, online blogs, books, etc. In this chapter we will discuss how to create and style multiple column layout using HTML and CSS. Table of Contents CSS Create Multiple Columns In CSS, we…

CSS animations allows to create smooth transitions between different styles without using JavaScript. For example, What is CSS Animation? In CSS we can dynamically change styles of elements based on time duration, user interaction or state changes called CSS animations. It is implemented using the @keyframes rule to create the animation and the animation property to apply it to…

CSS transition property allows you to animate changes in an element’s style properties over a specified duration. They provide a simple and efficient way to add animations to web elements without the need for complex JavaScript code or external libraries. CSS transition property is a shorthand property for Possible Values Applies to All elements, ::before and ::after pseudo-elements. Syntax…

CSS Styling Text involves modifying the appearance of text content by setting proper color, alignment, letter-spacing, and indention to make it more visually appealing. This chapter demonstrates how to style texts on web pages using CSS properties. How to Style Text in CSS? We can style text in the following ways to style texts in…

The text-shadow property is used to add a shadow effect to text. It allows you to specify the color, offset, blur-radius, and spread-radius of the shadow. Possible Values Applies to All the HTML elements. DOM Syntax object.style.textShadow = “5px 5px 3px red”; CSS text-shadow – Simple Shadow Effects Following is the example which demonstrates how to set…