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 616 of 801
text-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 MoreUnderstanding the CSS3 Filter Functions
The filter functions are used to set visual effects on elements like contrast, brightness, hue rotation, opacity, on images, etc. Let us now see some filter functions. Syntax filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url(); As you can see above, with the filter property, we can set the following effects: blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, saturate, sepia, and url. Invert The invert() function is used to invert the color samples in an image. ...
Read MoreSet areas within the grid layout in CSS
The CSS grid-template-areas property allows you to define named grid areas within a grid layout, making it easy to position grid items by name rather than line numbers. This property works with grid-area to create intuitive and maintainable grid layouts. Syntax .grid-container { display: grid; grid-template-areas: "area-name area-name . . ." "area-name area-name . . ."; } .grid-item { grid-area: area-name; } Key Properties ...
Read MoreChanging the Default Display Value using CSS
Every element in CSS has a default display value that determines how it appears on the webpage. We can easily change this default behavior by explicitly setting the display property to a different value. Syntax selector { display: value; } Common Display Values ValueDescription blockElement takes full width and starts on new line inlineElement takes only necessary width and flows with text inline-blockCombines properties of both inline and block noneElement is completely hidden Example 1: Changing List Items to Inline Display By default, list items () ...
Read More