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
Articles by Chandu yadav
Page 23 of 81
CSS background-origin property
The CSS background-origin property specifies the positioning area of background images. It determines whether the background image starts from the border box, padding box, or content box of an element. Syntax selector { background-origin: value; } Possible Values ValueDescription padding-boxBackground starts from the padding edge (default) border-boxBackground starts from the border edge content-boxBackground starts from the content edge Example: Content Box Origin The following example demonstrates the background-origin: content-box property − .demo { ...
Read MoreGive the object a sine wave distortion to make it look wave with CSS
The CSS wave effect uses Internet Explorer's proprietary filter to give objects a sine wave distortion, making them appear wavy. This filter was specific to older IE browsers and is not supported in modern web standards. Syntax selector { filter: Wave(Add=value, Freq=value, LightStrength=value, Phase=value, Strength=value); } Parameters ParameterDescription AddA value of 1 adds the original image to the waved image, 0 does not FreqThe number of waves LightStrengthThe strength of the light on the wave (from 0 to 100) PhaseAt what degree the sine wave should start (from 0 ...
Read MoreCSS pause-after property
The CSS pause-after property specifies a pause to be observed after speaking an element's content in speech synthesis. This property is part of CSS Speech Module and is used by screen readers and other speech synthesis applications. Syntax selector { pause-after: value; } Possible Values ValueDescription timeExpresses the pause in absolute time units (seconds and milliseconds) percentageRefers to the inverse of the value of the speech-rate property noneNo pause after the element x-weakVery short pause weakShort pause mediumMedium pause (default) strongLong pause x-strongVery long pause Example: Using ...
Read MoreSet printing double-sided documents with CSS
When printing double-sided documents, the page boxes on the left and right pages should be different. CSS provides pseudo-classes to define different styles for left and right pages, allowing you to set appropriate margins for binding. Syntax @page :left { /* Styles for left pages */ } @page :right { /* Styles for right pages */ } Example The following example sets different margins for left and right pages to accommodate book binding − @page ...
Read MoreRole of media attribute on the LINK element
The media attribute on the LINK element specifies the target media or device type for which an external style sheet is intended. This allows you to apply different styles for different output devices like screens, printers, or mobile devices. Syntax Possible Values Media TypeDescription allSuitable for all devices (default) printIntended for printed material screenIntended for computer screens handheldIntended for handheld devices Example: Print-Specific Styles The following example links a CSS file specifically for print media − Media Attribute Example ...
Read MoreWhich element is used to add special style to the first letter of the text in a selector with CSS
The CSS :first-letter pseudo-element is used to apply special styling to the first letter of the first line in a block-level element. This is commonly used to create drop caps or emphasize the beginning of paragraphs. Syntax selector:first-letter { property: value; } Example The following example demonstrates how to style the first letter of paragraphs with different effects − p:first-letter { font-size: 3em; color: ...
Read MoreCommonly used pseudo-classes in CSS
CSS pseudo-classes allow you to style elements based on their state or position without adding extra classes to your HTML. These powerful selectors help create interactive and dynamic styling effects. Syntax selector:pseudo-class { property: value; } Commonly Used Pseudo-Classes Pseudo-ClassDescription :linkStyles unvisited links :visitedStyles visited links :hoverStyles elements when mouse hovers over them :activeStyles elements when being clicked/activated :focusStyles elements that have keyboard focus :first-childStyles the first child element of its parent :langStyles elements based on their language attribute Example: Link States The following example demonstrates ...
Read MoreUsage of :link pseudo-class in CSS
The :link pseudo-class is used to add special style to an unvisited link. This pseudo-class targets anchor elements that have an href attribute and have not been visited by the user yet. Syntax a:link { property: value; } Possible Values You can apply any CSS property to :link, but commonly used properties include: PropertyDescription colorSets the text color of the unvisited link text-decorationControls underlining, overlining, or strike-through background-colorSets the background color of the link font-weightControls the thickness of the link text Example: Basic Link Styling ...
Read MoreUsage of CSS visibility property
The CSS visibility property controls whether an element is visible or hidden. Unlike display: none, hidden elements with visibility: hidden still occupy space in the layout. Syntax selector { visibility: value; } Possible Values ValueDescription visibleThe element and its contents are shown to the user (default) hiddenThe element and its content are invisible, but still affect the page layout collapseUsed only with table rows and columns to remove them from display Example: Visible vs Hidden Elements The following example demonstrates how visibility: hidden hides elements while ...
Read MoreCSS min-width property
The CSS min-width property sets the minimum width that an element can have. This property ensures that an element will never become smaller than the specified minimum width, even if the content would normally make it narrower. Syntax selector { min-width: value; } Possible Values ValueDescription lengthDefines minimum width in px, em, rem, etc. %Defines minimum width as a percentage of the parent element autoDefault value; browser calculates the minimum width Example: Setting Minimum Width The following example demonstrates how min-width prevents an element from becoming ...
Read More