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 on Trending Technologies
Technical articles with clear explanations and examples
Which property specifies the width of a border in CSS?
In CSS, the border-width property specifies the width of a border. You can set uniform width for all sides or specify different widths for each side of an element. Syntax border-width: value; border-width: top right bottom left; border-width: top-bottom left-right; Method 1: Using border-width Property The border-width CSS property allows you to define the width of borders. You can pass one to four values to control different sides − Example: Uniform Border Width The following example sets a 5px border width for all four sides ? ...
Read MoreWhich property specifies the distance between nearest border edges of marker box and principal box?
The CSS marker-offset property specifies the distance between the nearest border edges of the marker box and the principal box. The marker refers to the bullet points or numbers in lists. However, it's important to note that this property was deprecated and removed from CSS specifications due to limited browser support. Important: The marker-offset property is obsolete and no longer supported in modern browsers. For similar functionality, use padding-left or margin-left on list items instead. Syntax selector { marker-offset: value; } Example 1: Unordered List with Marker Offset ...
Read MoreWhich property is used to underline, overline, and strikethrough text using CSS?
In CSS, the text-decoration property is used to underline, overline, and strikethrough the text. Underlining the text means drawing a line below the text, and overlining the text means drawing a line above the text. Striking through the text means drawing a line on the text to show text is crossed out or erased. In this tutorial, we will learn to use the different values of the text-decoration CSS property to style text differently. Syntax text-decoration: decoration-line decoration-style decoration-color decoration-thickness; Possible Values PropertyValuesDescription decoration-lineunderline, overline, line-throughType of decoration decoration-stylesolid, dotted, dashed, ...
Read MoreWhich property is used as shorthand to specify a number of other font properties in CSS?
The CSS font property serves as a shorthand for specifying multiple font-related properties in a single declaration. Instead of writing separate properties for font-style, font-weight, font-size, line-height, and font-family, you can combine them all using the font property. Syntax selector { font: font-style font-weight font-size/line-height font-family; } Values PropertyDescriptionExample Values font-styleSpecifies the style of the fontnormal, italic, oblique font-weightSpecifies the weight (boldness) of the fontnormal, bold, 100-900 font-sizeSpecifies the size of the fontpx, em, rem, % line-heightSpecifies the line height (optional)normal, numbers, px, em font-familySpecifies the font familyArial, serif, ...
Read MoreWhat is the difference between overflow: auto and overflow: scroll in CSS?
In CSS, the overflow property controls how content that exceeds an element's dimensions is handled. When content overflows, you can choose to show scrollbars automatically or always display them. The auto and scroll values provide different scrollbar behaviors. In this tutorial, we will learn the difference between the auto and scroll values of the CSS overflow property. Syntax selector { overflow: auto | scroll; } Overflow: auto The overflow: auto property shows scrollbars only when the content actually overflows the container. If the content fits within the element's dimensions, ...
Read MoreShake a Button on Hover using HTML and CSS
To shake a button on hover using HTML and CSS, we should have basic understanding of CSS animations and keyframes. We will be understanding how to utilize CSS animation and keyframes to apply shaking effect to a button on hovering. Syntax .button:hover { animation: shake-name duration timing-function iteration-count; } @keyframes shake-name { 0%, 100% { transform: transform-function(start-value); } 50% { transform: transform-function(end-value); } } Method 1: Rotational Shake Effect The following example creates a button that shakes by rotating left and ...
Read MoreHow to remove border from Iframe using CSS?
To remove border from iframe using CSS can be useful when you don't want unwanted borders when integrating content from other sources on your webpage like YouTube videos, other webpages, etc. An iframe is an inline frame that allows us to embed another document within the current HTML document. In this article, we will discuss various approaches to remove borders from iframes using CSS. We have an iframe window which displays the content of other webpages in our HTML document. Our task is to remove the border around the iframe window. Syntax iframe { ...
Read MoreProgramming a slideshow with HTML and CSS
Programming a slideshow using HTML and CSS, we should have a basic understanding of HTML and CSS animations. Slideshow displays a series of content in a sequential manner with smooth transitions. In this article, we will discuss how to create a slideshow using HTML and CSS without using JavaScript. We are having a set of div elements having textual content or images as slides. Our task is to program a slideshow using HTML and CSS. Basic Syntax /* Container for the slideshow */ .slideshow-container { overflow: hidden; width: ...
Read MoreBackward iteration in Python
Sometimes we need to iterate through a list in reverse order − reading the last element first, then the second-to-last, and so on. Python provides three common approaches: range() with negative step, slice notation [::-1], and the reversed() built-in function. Using range() with Negative Step Start from the last index and step backwards by -1 until index 0 ? days = ['Mon', 'Tue', 'Wed', 'Thu'] for i in range(len(days) - 1, -1, -1): print(days[i]) Thu Wed Tue Mon range(3, -1, -1) generates indices 3, 2, 1, ...
Read MoreReduce the size of an icon during the animation
It is important to add animations to icons or images to improve the UX of the application. In this tutorial, we will learn to add animation to the icons. Also, we will learn to reduce or increase the size of the icon during the animation. We will use the transform: scale() property to change the dimensions of the icon during the animation. Syntax img { animation: icon 5s infinite; } @keyframes icon { 0% {transform: scale(1);} 100% {transform: scale(0.6);} } In the above syntax, ...
Read More