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 karthikeya Boyini
Page 45 of 143
How to specify the target media within the document language with CSS
CSS media attributes allow you to specify which devices or media types should apply specific styles. This helps create responsive designs that work across different platforms like screens, printers, and handheld devices. Syntax /* In CSS */ @media media-type { /* CSS rules */ } /* In HTML link tag */ Common Media Types Media TypeDescription screenComputer screens, tablets, phones printPrinters and print preview allAll media types (default) speechScreen readers and speech synthesizers Example: Using Media Attribute in HTML The following example shows how ...
Read MoreCSS cue-after Property
The CSS cue-after property specifies a sound to be played 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 assistive technologies to provide audio cues that help separate content elements. Syntax selector { cue-after: value; } Possible Values ValueDescription url()Specifies the URL of a sound file to be played noneNo sound will be played (default value) Example The following example demonstrates how to add audio cues after different elements − ...
Read MoreFade In Right Big Animation Effect with CSS
The CSS Fade In Right Big animation effect creates a dramatic entrance where elements start completely transparent and positioned far off-screen to the right, then smoothly animate to full opacity while sliding into their final position. Syntax @keyframes fadeInRightBig { 0% { opacity: 0; transform: translateX(2000px); } 100% { opacity: 1; transform: translateX(0); ...
Read MoreConvert the colors of the object to 256 shades of gray with CSS
The CSS grayscale() filter is used to convert the colors of an element to 256 shades of gray. This filter is part of the CSS filter property and allows you to remove color saturation from images, text, and other elements. Syntax selector { filter: grayscale(value); } Possible Values ValueDescription 0 or 0%No grayscale effect (original colors) 1 or 100%Completely grayscale (no color) 0.5 or 50%50% grayscale effect Example: Grayscale Effect on Image and Text The following example applies a grayscale filter to both an image and ...
Read MoreCSS Alpha Channel filter
The CSS Alpha Channel filter is a legacy Internet Explorer filter that alters the opacity of an element, creating transparency effects and gradient blending with the background. While this filter is obsolete in modern web development, it was historically used to create alpha transparency effects. Syntax filter: Alpha(opacity=value, finishopacity=value, style=value, startX=value, startY=value, finishX=value, finishY=value); Parameters Parameter Description Opacity Level of the opacity. 0 is fully transparent, 100 is fully opaque. finishopacity Level of the opacity at the other end of the object. Style The shape of ...
Read MoreHow to change the color of focused links with CSS
Use the :focus pseudo-class to change the color of focused links. This styling applies when a user clicks on a link or navigates to it using keyboard tabbing. Possible values could be any color name in any valid format. Syntax a:focus { color: value; } Example You can try to run the following code to implement the color of the focused link − a:focus { color: #0000FF; ...
Read MoreUsage of :first-child pseudo-class in CSS
The CSS :first-child pseudo-class is used to select and style an element that is the first child of its parent element. This selector only targets the very first child element, regardless of its type. Syntax selector:first-child { property: value; } Example: Basic Usage The following example demonstrates how :first-child selects the first paragraph inside a div element − div > p:first-child { text-indent: 25px; ...
Read MoreUsage of :visited pseudo-class in CSS
The :visited pseudo-class is used to add special styling to links that have already been visited by the user. This allows you to provide visual feedback indicating which links have been previously clicked. Syntax a:visited { property: value; } Possible Values PropertyDescription colorChanges the text color of visited links background-colorChanges the background color of visited links text-decorationAdds or removes underlines, strikethrough, etc. Example The following example changes the color of visited links to green − a:link ...
Read MoreUsing CSS z-index property
The CSS z-index property is used along with the position property to create an effect of layers. You can specify which element should come on top and which element should come at the bottom. Syntax selector { z-index: value; } Possible Values ValueDescription autoDefault value. Stack order is inherited from parent integerSets the stack order (higher values appear on top) Example: Layering Elements The following example demonstrates how to use z-index to control which element appears on top − ...
Read MoreWhat to do when an element's content might be larger than the amount of space allocated to it?
The CSS overflow property controls what happens when an element's content is too large to fit in the allocated space. This property allows you to specify whether content should be clipped, scrollable, or visible. Syntax selector { overflow: value; } Possible Values ValueDescription visibleContent overflows the element's boundary (default) hiddenContent is clipped and hidden scrollAdds scrollbars to view overflowing content autoAdds scrollbars only when needed Example: Using Scroll and Auto Values The following example demonstrates how overflow: scroll and overflow: auto handle content that exceeds container ...
Read More