Category: CSS3 Tutorials

Custom properties use names that start with —, such as –color-name. These properties can store values, which can then be used in other elements using the var() function. Custom properties are specific to elements, and their values follow the cascading rules, the value of a custom property is determined by the cascading algorithm. Possible Values Applies To All the…

Specificity in CSS is a calculation or algorithm that is understood and used by the browser to determine the CSS declaration that needs to be applied on an element. It chooses the selector with the highest specificity value and applies the styling accordingly on any HTML element. For instance, if two or more CSS rules are…

In this tutorial, we will learn about how to style an image to change its shape, size, and layout by using different CSS properties such as padding, borders, height, width, margins, etc. CSS Style Image – Rounded Images The following example demonstrates how to use border-radius: 20px property to create rounded border image − CSS Style Image…

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 CSS shape-outside – margin-box The following example demonstrates the proeprty shape-outside: margin-box property defines that content should wrap around the…

CSS mask is a shorthand property that masks and displays an image at a particular position to partially or completely hide an element. This property is a shorthand for the following CSS properties: Possible Values Applies to All elements. In SVG, it applies to container elements excluding the <defs> element and all graphics elements Syntax Keyword Values…

Mathematical expressions can be used in CSS to represent numeric values using math functions. Basic Arithmetic Functions CSS arithmetic functions allow stylesheets to dynamically modify property values by carrying out mathematical operations like addition, subtraction, multiplication, and division. Following table lists arithmetic functions: Function Description calc() Performs basic arithmetic calculations on numerical values. Comparision Functions The…

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 Transform Functions The CSS data type called <transform-function> represents visual transformations and is employed as a value within the transform property. Translate Functions Following table lists translate functions: Functions Description…

CSS media queries allow to apply CSS styles to a webpage based on the characteristics of the device or browser viewing the page. With media queries, we can create designs that adapt to different screen sizes, resolutions, and orientations. Media queries are defined using the @media rule. Media queries are used for the following: Syntax Here, media-type can be…

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. They are set using the — prefix, and accessed using the var() function. To declare a CSS variable, use the following syntax: To use a CSS variable with var() function, use the following…

CSS pagination is a technique for creating page numbers for a website, which allows users to easily navigate between large amounts of content. It is a simple and effective way to organize your website and make it more user-friendly. Step 1: Add HTML Markup To create a pagination element in HTML, you can use a…