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
CSS Articles
Page 93 of 130
Change 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 MoreHow to add rounded corners to a button with CSS?
To add rounded corners to a button, use the border-radius property. This property allows you to control the curvature of your button corners, creating a more modern and polished appearance. Syntax button { border-radius: value; } Possible Values ValueDescription lengthDefines the radius in px, em, rem, etc. %Defines the radius as a percentage of the button's dimensions 50%Creates a circular button (if width equals height) Example: Basic Rounded Button You can try to run the following code to add rounded corners − ...
Read MoreArrow to the top of the tooltip with CSS
The CSS bottom property combined with border styling can be used to create an arrow pointing to the top of a tooltip. This creates a visual connection between the tooltip and its trigger element. Syntax .tooltip::after { content: ""; position: absolute; bottom: 100%; left: 50%; border-width: size; border-style: solid; border-color: transparent transparent color transparent; } Example The following example creates a tooltip with an arrow pointing ...
Read More