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 Abhishek
Page 6 of 7
How to set the order of flexible items using CSS?
The CSS order property allows you to change the visual order of flex items without altering their position in the HTML source. This property only works on elements that are children of a flex container (an element with display: flex or display: inline-flex). NOTE − The order property only works with flex items inside a flex container. Syntax selector { order: integer; } Possible Values ValueDescription integerAny integer value (positive, negative, or zero). Default is 0. Items are arranged in ascending order of their order values. ...
Read MoreHow to set the inset shadow using CSS?
The CSS box-shadow property creates shadows around elements, and by default applies shadows outside the element. However, by adding the inset keyword, you can create shadows that appear inside the element, giving it a recessed or indented appearance. Syntax selector { box-shadow: inset x-offset y-offset blur spread color; } Parameters ParameterDescription insetMakes the shadow appear inside the element x-offsetHorizontal shadow offset (required) y-offsetVertical shadow offset (required) blurBlur radius (optional, default is 0) spreadSpread distance (optional, default is 0) colorShadow color (optional, default is current text color) Example ...
Read MoreHow to set the content as a counter?
CSS counters allow you to automatically number elements on a web page without JavaScript. They work by creating variables that can be incremented and displayed as content using pseudo-elements like ::before and ::after. Syntax /* Reset/create counter */ parent-element { counter-reset: counter-name; } /* Increment and display counter */ element::before { counter-increment: counter-name; content: counter(counter-name); } CSS Counter Properties counter-reset − Creates or resets a counter to zero (or specified value) counter-increment ...
Read MoreHow to set position of an image in CSS?
In general, the default position of an image is left aligned on the web page. But you can change the position of an image according to your needs and set the position of an image manually on the web page where you have to show that particular image. Let us now discuss about the ways of positioning an image on the webpage using CSS. There are two methods or approaches in general to position an image on the web page using CSS that are listed below − Using the float property of CSS ...
Read MoreHow to set padding inside an element using CSS?
Padding in CSS creates space between an element's content and its border. This inner spacing helps improve readability and visual appeal by preventing content from touching the element's edges directly. Syntax /* Shorthand property */ padding: value; padding: top-bottom left-right; padding: top left-right bottom; padding: top right bottom left; /* Individual properties */ padding-top: value; padding-right: value; padding-bottom: value; padding-left: value; Possible Values Value TypeDescriptionExample LengthFixed units like px, em, rem10px, 1.5em PercentageRelative to parent element's width5%, 10% autoBrowser calculates paddingauto Method 1: Using Shorthand Padding Property The shorthand ...
Read MoreHow to set padding around an element using CSS?
The CSS padding property is used to create space between an element's content and its border. This inner spacing appears inside the element, making the content appear further from the edges. Syntax /* Individual properties */ padding-top: value; padding-right: value; padding-bottom: value; padding-left: value; /* Shorthand property */ padding: value; /* all sides */ padding: vertical horizontal; /* top/bottom left/right */ padding: top horizontal bottom; /* top left/right bottom ...
Read MoreHow to use margin, border and padding to fit together in the box model?
The CSS box model defines how margin, border, padding, and content work together to determine the total space an element occupies. Understanding how these properties fit together is essential for controlling layout and spacing in CSS. Syntax selector { margin: value; border: width style color; padding: value; } Box Model Components Content − The actual content of the element (text, images, etc.) Padding − Space between the content and the border (inside the element) Border − The outline around the element Margin ...
Read MoreHow to make the cursor to hand when a user hovers over a list item using CSS?
The CSS cursor property allows you to change the appearance of the mouse cursor when hovering over HTML elements. This is especially useful for list items to indicate they are interactive or clickable. Syntax selector:hover { cursor: value; } Possible Values ValueDescription pointerA pointing hand cursor, typically used for clickable elements grabAn open hand cursor, indicating something can be grabbed grabbingA closed hand cursor, indicating something is being dragged ...
Read MoreHow to add a custom right-click menu to a webpage?
A custom right-click menu allows you to replace the browser's default context menu with your own styled menu. This provides better control over user interactions and creates a more integrated user experience. The process involves preventing the default browser behavior and displaying your custom menu at the cursor position. Syntax /* Hide custom menu by default */ #custom-menu { display: none; position: absolute; } /* JavaScript events */ document.oncontextmenu = function(event) { event.preventDefault(); /* Show custom menu */ }; ...
Read MoreCSS units – %, em, rem, px, vh, vw
CSS units determine how we measure and size elements on web pages. The most commonly used units include pixels (px), em, rem, percentages (%), and viewport units (vh, vw). Each unit has specific use cases and behaviors that affect responsive design and accessibility. Syntax selector { property: value unit; } Absolute Units Pixels (px) Pixels are fixed-size units representing the smallest display unit. While reliable for precise control, they don't scale with user preferences or viewport changes − .px-box ...
Read More