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
CSS Articles
Page 75 of 130
Working with CSS Display Property
The CSS display property is used to set how an element is displayed on a web page. With this property, you can create grid layouts, flex containers, inline elements, and more. It controls the layout behavior of elements and how they interact with other elements. Syntax selector { display: value; } Possible Values Property Value Description inline Displays an element as an inline element. block Displays an element as a block element. contents Makes the container disappear, making the child elements children ...
Read MoreText Transformation using CSS
The CSS text-transform property is used to control the capitalization of text content. You can transform text to uppercase, lowercase, capitalize the first letter of each word, or leave it unchanged. Syntax selector { text-transform: value; } Possible Values ValueDescription noneNo transformation (default) capitalizeCapitalizes the first letter of each word uppercaseTransforms all text to uppercase lowercaseTransforms all text to lowercase initialSets to default value inheritInherits from parent element Example 1: Uppercase Transformation The following example transforms all text to uppercase − ...
Read MoreThe CSS3 scale3d() Function
The CSS3 scale3d() function is used to scale an element in 3D space along the X, Y, and Z axes. This transform function allows you to resize elements while maintaining their proportions or creating unique scaling effects. Syntax transform: scale3d(x, y, z); Parameters ParameterDescription xScaling factor for the X-axis (horizontal) yScaling factor for the Y-axis (vertical) zScaling factor for the Z-axis (depth) Note: Values greater than 1 increase size, values less than 1 decrease size, and negative values flip the element. Example: Basic 3D Scaling The following example demonstrates ...
Read Moretext-justify Property in CSS
The CSS text-justify property controls how justified text is aligned when text-align is set to justify. It determines the method used to distribute space between words or characters to achieve full justification. Syntax selector { text-justify: value; } Possible Values ValueDescription autoBrowser determines the best justification method inter-wordAdjusts spacing between words inter-characterAdjusts spacing between characters noneDisables justification Example 1: Inter-word Justification The following example uses inter-word to justify text by adjusting space between words − .inter-word-example ...
Read MoreAdjusting the Image Contrast using CSS3
The CSS filter property allows you to apply visual effects to HTML elements, including adjusting image contrast. The contrast() function specifically controls the contrast level of images, making them appear more or less vibrant. Syntax selector { filter: contrast(value); } Possible Values ValueDescription 0%Completely gray image (no contrast) 100%Original image contrast (default) >100%Increased contrast
Read MoreThe CSS scale() Function
The CSS scale() function is used to define a transformation that resizes an element on the 2D plane. You can specify the amount of scaling in the X and Y directions as parameters to create larger or smaller versions of elements. Syntax transform: scale(x-scale, y-scale); transform: scale(uniform-scale); Possible Values ValueDescription x-scaleHorizontal scaling factor (1 = original size) y-scaleVertical scaling factor (optional) uniform-scaleSingle value for both X and Y scaling Example: Increasing Image Size The following example uses scale(1.2, 1.3) to increase the image width by 20% and height by 30% ...
Read MoreFormatting Text Using CSS
To format text in CSS, you can change the text color, text decoration, line height, text direction, text alignment, etc. CSS provides numerous properties to control the visual appearance of text content. Syntax selector { text-align: value; line-height: value; text-decoration: value; } Text Alignment To set text alignment using CSS, use the text-align property. Following are the possible property values − ValueDescription leftAligns text to the left (default) rightAligns text to the right centerCenters the text justifyStretches lines to have ...
Read MoreThe CSS rotate() Function
The CSS rotate() function is used to rotate an element around a fixed point. It is applied through the transform property and accepts angle values in degrees, radians, or other angle units. Syntax transform: rotate(angle); Possible Values ValueDescription degDegrees (360deg = full rotation) radRadians (2π rad = full rotation) gradGradians (400grad = full rotation) turnTurns (1turn = full rotation) Example: Rotate an Element by 45 Degrees The following example rotates a text element by 45 degrees − .box { ...
Read Morewriting-mode Property in CSS
The CSS writing-mode property controls the direction in which text flows within an element. It's particularly useful for creating layouts that match different language writing systems or for creating unique design effects. Syntax selector { writing-mode: value; } Possible Values ValueDescription horizontal-tbContent flows horizontally from left to right and vertically from top to bottom (default) vertical-rlContent flows vertically from top to bottom and horizontally from right to left vertical-lrContent flows vertically from top to bottom and horizontally from left to right Example 1: Vertical Writing (Right to ...
Read MoreSetting Text Color using CSS
The CSS color property is used to set the text color of HTML elements. You can specify colors using various formats including color names, hexadecimal values, RGB values, or HSL values. Syntax selector { color: value; } Possible Values Value TypeDescriptionExample Color NamePredefined color namesred, blue, green Hexadecimal6-digit hex code#FF0000, #00FF00 RGBRed, Green, Blue valuesrgb(255, 0, 0) HSLHue, Saturation, Lightnesshsl(0, 100%, 50%) Example: Using Color Names This example demonstrates setting text color using predefined color names − ...
Read More