Author: Saim Khalid

A viewport, in the context of responsive web design, is a virtual area used by the browser to render a web page. The viewport is essential to web development and creation of responsive designs that adapt to various devices and screen sizes. What is a Viewport? Viewport is the visible area for a user in the…

Responsive Web Design (RWD) is an approach of designing web applications that render accurately on various devices with different screen sizes and resolutions. What is Responsive Web Design? Example of Responsive Webpage Here is a complete example code explaining how to develop a simple responsive webpage using HTML and CSS. In the code given below,…

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…