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
Front End Technology Articles
Page 529 of 652
Role of CSS flex-wrap property no-wrap value
The CSS flex-wrap property with nowrap value prevents flex items from wrapping to new lines, keeping all items on a single row even if they overflow the container. Syntax selector { flex-wrap: nowrap; } Example The following example demonstrates how nowrap forces all flex items to stay on one line − .mycontainer { display: flex; background-color: orange; ...
Read MoreChange the padding of a button with CSS
The CSS padding property allows you to control the space between a button's content (text or icon) and its borders. This spacing is crucial for creating visually appealing and user-friendly buttons that are easy to click. Syntax button { padding: value; } Possible Values ValueDescription lengthDefines padding in px, em, rem, etc. %Percentage of the containing element's width top right bottom leftFour values for each side individually vertical horizontalTwo values for vertical and horizontal padding Example 1: Different Padding Values The following example shows buttons with ...
Read MoreChange the font size of a button with CSS
To change the font size of a button with CSS, you can use different properties to control text appearance. The font size affects button readability and visual hierarchy on your webpage. Syntax button { font-size: value; } Method 1: Using font-size Property The CSS font-size property directly controls the text size inside buttons. This is the most straightforward approach − Example .normal-btn { font-size: 16px; ...
Read MoreRole of CSS flex-wrap property wrap-reverse value
The CSS flex-wrap property with wrap-reverse value allows flex items to wrap to new lines in reverse order. When flex items exceed the container width, they wrap from bottom to top instead of the default top to bottom behavior. Syntax .container { display: flex; flex-wrap: wrap-reverse; } Example The following example demonstrates how wrap-reverse wraps flex items in reverse order − .mycontainer { display: flex; ...
Read MoreChange the background color of a button with CSS
To change the background color of a button, use the background-color property in CSS. This property allows you to set any color value to customize the button's appearance. Syntax button { background-color: value; } Possible Values ValueDescription Color namePredefined color names like red, blue, yellow Hex codeHexadecimal values like #FF0000, #00FF00 RGBRGB values like rgb(255, 0, 0) HSLHSL values like hsl(120, 100%, 50%) Example: Yellow Background Button The following example demonstrates how to change a button's background color to yellow − ...
Read MoreRole of CSS Grid Container
The CSS Grid Container is the parent element that establishes a grid formatting context for its children. When you apply display: grid to an element, it becomes a grid container, and all its direct children automatically become grid items. Syntax .container { display: grid; grid-template-columns: value; grid-template-rows: value; } Key Properties PropertyDescription display: gridCreates a grid container grid-template-columnsDefines the number and size of columns grid-template-rowsDefines the number and size of rows grid-gapSets spacing between grid items Example: Basic Grid ...
Read MoreCSS object-fit Property Values
The CSS object-fit property is used to specify how an image or video should be resized to fit its container. This property is particularly useful when you need to maintain aspect ratios or control how content fills its allocated space. Syntax selector { object-fit: value; } Possible Values ValueDescription fillContent is stretched to completely fill the container (default value) containContent is scaled to maintain aspect ratio while fitting entirely within container coverContent is scaled to maintain aspect ratio while covering entire container (may be clipped) noneContent retains its original ...
Read MoreHow an or should be resized to fit its container with CSS?
The CSS object-fit property is used to resize an image to fit its container while maintaining control over how the image is scaled and positioned. This property is essential for creating responsive layouts where images need to adapt to different container sizes without distorting their appearance. Syntax selector { object-fit: value; } Possible Values ValueDescription fillStretches the image to fill the container (may distort aspect ratio) containScales image to fit inside container while maintaining aspect ratio coverScales image to cover entire container while maintaining aspect ratio scale-downActs as either ...
Read MoreFlip an image on mouse over with CSS
The CSS transform property can be used to flip an image horizontally when a user hovers over it. This creates an engaging interactive effect by using the scaleX(-1) value to mirror the image along its X-axis. Syntax selector:hover { transform: scaleX(-1); } Example: Horizontal Image Flip on Hover The following example demonstrates how to flip an image horizontally when the mouse hovers over it − .flip-image { width: 300px; ...
Read MoreHow to position text to top right position on an image with CSS
To position text to the top right corner of an image, you need to use CSS positioning properties. This involves making the container element relatively positioned and the text absolutely positioned with top and right properties. Syntax .container { position: relative; } .text-overlay { position: absolute; top: value; right: value; } Example The following example demonstrates how to position text in the top right corner of an image − ...
Read More