Category: Advanced Features

Custom Properties are variables in CSS that are used to store and reuse values in stylesheet. These are same as variables in other programming languages. Declaring Custom Properties in CSS The following code show how to declare custom properties in CSS. :root{–primary-color: #3498db;–font-size-large: 1.5rem;}body{background-color:var(–primary-color);font-size:var(–font-size-large)} Here are few things to be considered when using custom properties…

Imagine what will happen if we declare a property multiple times in CSS using different selectors. CSS uses specificity order for selectors in order to determine which selector have highest preference to be used. For instance, if two or more CSS rules are specified on an HTML element using a class selector and ID selector, the property…

CSS provides several properties to style images in a HTML webpages. In this tutorial we will learn how to style any type of image using CSS properties. Table of Contents How Style an Image in CSS? Set Image Dimensions The height and width property is used to set the dimensions for an image. These properties can have a value…

CSS shape-outside property is used to define a shape around which inline content (such as text or images) should wrap. This property is particularly useful for creating non-rectangular or complex text wrapping shapes. Possible Values Applies to Floats. Syntax shape-outside = none | margin-box | content-box | border-box | padding-box | circle() | ellipse() | inset() |…

CSS mask property masks and displays an image at a particular position to partially or completely hide an element. The property is a shorthand for the CSS properties: mask-clip, mask-composite, mask-image, mask-mode, mask-origin, mask-position, mask-repeat and mask-size Syntax mask: <mask-image> <mask-mode> <mask-composite> <mask-clip> <mask-origin> <mask-position> <mask-repeat> <mask-size> | initial | inherit; Property Values Value Description mask-image It specifies an image for the mask layer for an…

CSS math functions allow you to perform mathematical calculations directly in your CSS stylesheets. These functions can be used to manipulate values such as lengths, angles, colors, and more. div{width:calc(100% – 40px);/* 100% width minus 40px for padding */width:max(200px, 50%);/* Set width to the maximum value between 200px and 50% of the viewport width */}</pre>…

CSS value functions allow you to generate values for CSS properties dynamically. These functions take parameters and return a value that can be used in place of a static value. Syntax selector { property: function([argument]? [, argument]!); } Transform Functions The CSS data type called <transform-function> represents visual transformations and is employed as a value within the transform property. Translate Functions…

Media queries in CSS are used to apply different CSS styles based on the screen size, resolution, and other characteristics of the user device. Media queries uses @media rule to include a extra block of CSS properties when a certain conditions are met. Media queries can also be used to style printable version of page separately. Syntax…

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…