Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Web Development Articles
Page 655 of 801
CSS Relative units
CSS relative units are units whose values are relative to another measurement. Unlike absolute units, relative units scale based on their context, making them ideal for responsive design. The size of elements using relative units will adapt based on their parent element or viewport size. Syntax selector { property: value unit; } Common Relative Units UnitAbbreviationDescription Percent%Relative to the parent element EmemRelative to the font-size of the element Root emremRelative to the font-size of the root element ExexRelative to the x-height of the font CharacterchRelative to the width of ...
Read MoreWorking with CSS Units
CSS units are essential for defining measurements in web design such as width, margin, padding, font-size, and border-width. The length is specified using a numerical value followed by a unit such as px, em, rem, etc. Important: No white spaces are allowed between the numerical value and the unit. Syntax property: value + unit; /* Examples */ width: 300px; font-size: 1.5em; margin: 10%; Types of CSS Units CSS units are divided into two main categories − Absolute units − Fixed size units that don't change based on other elements Relative units − ...
Read MoreCSS3 font combinations
CSS3 font combinations allow you to specify multiple fonts in order of preference. If the browser cannot load the first font, it automatically tries the next font in the list, ensuring your text always displays properly. Syntax selector { font-family: "first-choice", "second-choice", generic-family; } Font Family Categories CategoryDescriptionExamples serifFonts with decorative strokesTimes, Georgia sans-serifFonts without decorative strokesArial, Helvetica monospaceFixed-width fontsCourier, Monaco cursiveScript-like fontsBrush Script fantasyDecorative fontsImpact, Papyrus Example: Sans-Serif Font Combination The following example demonstrates a typical sans-serif font stack − ...
Read MoreSet Media Queries for different CSS style rules for different size devices
CSS media queries allow you to apply different style rules based on device characteristics such as screen size, orientation, and resolution. This enables responsive design that adapts to various devices like mobile phones, tablets, and desktop computers. Syntax @media media-type and (condition) { /* CSS rules */ } Common Media Query Breakpoints DeviceScreen WidthMedia Query MobileUp to 768px@media (max-width: 768px) Tablet769px to 1024px@media (min-width: 769px) and (max-width: 1024px) Desktop1025px and above@media (min-width: 1025px) Example: Basic Media Query The following example changes the background color based on ...
Read MoreCSS Box Sizing Property
The CSS box-sizing property controls how the width and height of an element are calculated. By default, padding and border are added to the specified width and height, but this property allows you to change this behavior. Syntax selector { box-sizing: value; } Possible Values ValueDescription content-boxDefault. Width and height apply to content only border-boxWidth and height include content, padding, and border Default Behavior (content-box) By default, CSS follows this calculation − Total width = width + padding + border Total height = height ...
Read MoreCSS2 sizing property vs CSS3 box sizing property
Let us understand the difference between CSS2 sizing property and CSS3 box-sizing property. In CSS2, the width and height properties only apply to the content area, while CSS3 box-sizing property allows you to control how the total element size is calculated. Syntax selector { box-sizing: value; } Possible Values ValueDescription content-boxDefault CSS2 behavior - width/height applies only to content border-boxCSS3 behavior - width/height includes content, padding, and border CSS2 Default Sizing (content-box) In CSS2, the width and height properties apply only to the content area. Padding ...
Read MoreCSS3 Resize Property
The CSS3 resize property allows users to resize elements by dragging from the bottom-right corner. It provides control over which dimensions can be resized by the user. Syntax selector { resize: value; } Possible Values ValueDescription noneUser cannot resize the element (default) horizontalUser can resize horizontally only verticalUser can resize vertically only bothUser can resize in both directions Example 1: Both Directions The following example allows users to resize the element in both horizontal and vertical directions − ...
Read MoreSet the border image as rounded, repeated and stretched with CSS
The border-image-repeat property is used to set how the border image is repeated, stretched, or rounded along the border edges. This property controls the behavior of the border image segments between the corners. Syntax selector { border-image-repeat: value; } Possible Values ValueDescription stretchThe border image is stretched to fill the area (default) repeatThe border image is repeated to fill the area roundThe border image is repeated and scaled to fit the area perfectly spaceThe border image is repeated with spacing to fill the area Example 1: Round ...
Read MoreSet the image path with CSS
The CSS border-image-source property is used to set the path of an image that will be used as a border around an element. This property allows you to replace traditional solid borders with custom images for more creative styling. Syntax selector { border-image-source: url(path-to-image) | none; } Possible Values ValueDescription url()Specifies the path to the image file noneNo image is used (default value) Example: Setting Image Border Path The following example demonstrates how to set an image path for creating a decorative border − ...
Read MoreCSS border-image property
The CSS border-image property allows you to use an image as the border of an element instead of the standard border styles. This property is useful for creating decorative borders using custom images. Syntax selector { border-image: source slice width outset repeat; } Possible Values PropertyDescription sourceThe image to be used as border (url or gradient) sliceHow to slice the border image (in pixels or %) widthThe width of the border image outsetHow much the border extends beyond the border box repeatHow border image is repeated (stretch, repeat, round, ...
Read More