Author: Awais Farooq
-
RWD Viewport
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. Viewport can also be specified as the user’s visible area of the web page,…
-
RWD Introduction
Responsive Web Design (RWD) is a web-designing and development approach that makes the web pages render well and correctly on various devices with different screen sizes and resolutions. The motive of responsive web design is to ensure that the user experience is consistent and optimized regardless of whether the website is viewed on a mobile device,…
-
Custom Properties
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
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…
-
Style Image
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…
-
shape-outside
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…
-
Masking – mask
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…
-
Math Functions
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…
-
Value Functions
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…
-
Media Queries
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…