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 53 of 130
Changing Layouts Based on Screen Size using CSS
To change layouts based on screen size in CSS, we use Media Queries to create responsive designs that adapt to different devices such as tablets, mobiles, and desktops. This technique allows us to modify element dimensions and positioning based on screen breakpoints. Syntax @media screen and (max-width: breakpoint) { selector { property: value; } } Steps to Change Layouts Based on Screen Size We will follow these steps to create a responsive layout − ...
Read MoreReordering Individual Flex Items using CSS3
The CSS order property allows you to reorder individual flex items without changing their HTML structure. This property only works on flex items and accepts integer values to determine the visual order. Syntax .flex-item { order: integer; } Possible Values ValueDescription integerAny positive or negative integer. Default is 0. 0Default value (normal document order) Example: Reordering Flex Items The following example demonstrates how to reorder flex items using the order property. The third div will appear first, followed by the first div, then the second div ...
Read MoreAlign Flex Items along Cross Axis using CSS3
We can easily align the flex items along cross axis, but first let us understand what cross axis is. The cross axis is perpendicular to the main axis. The main axis is like the flex direction − Main Axis (flex-direction: row) Cross Axis ...
Read MoreControlling the Dimensions of Flex Items in CSS
To control the dimensions of Flex Items in CSS, use the flex property. Consider flex as the length on flexible items. The flex includes the following properties − flex-grow − A number is set for the flex grow factor i.e., how much the item will grow relative to the other flexible items. flex-shrink − A number is set for the flex shrink factor i.e., how much the item will shrink relative to the other flexible items. flex-basis − The initial size of a flex item. Syntax ...
Read MoreHow to change the color of the placeholder attribute with CSS?
To change the color of the placeholder attribute with CSS, we use the ::placeholder pseudo-element which allows us to style the placeholder text that appears inside form input fields. Syntax selector::placeholder { color: value; } Example: Changing Placeholder Color Here is a complete example that demonstrates how to change the placeholder color using the ::placeholder pseudo-element − .custom-input { width: 300px; padding: 10px; ...
Read MoreHow to create different device looks (smartphone, tablet and laptop) with CSS?
Creating different device looks (smartphone, tablet, and laptop) with CSS allows you to showcase responsive designs or create device mockups. This technique uses CSS styling to mimic the appearance of real devices with borders, rounded corners, and proper proportions. Syntax .device { position: relative; width: device-width; height: device-height; border: border-width solid color; border-radius: corner-radius; } Example 1: Smartphone Device The following example creates a smartphone-like appearance with a home button ? ...
Read MoreHow to create a custom scrollbar with CSS?
Custom scrollbars allow you to style the appearance of scrollbars to match your website's design. Using CSS pseudo-elements, you can customize the scrollbar's width, colors, and hover effects. Syntax /* Webkit-based browsers only */ ::-webkit-scrollbar { width: value; } ::-webkit-scrollbar-track { /* Track styling */ } ::-webkit-scrollbar-thumb { /* Handle styling */ } ::-webkit-scrollbar-thumb:hover { /* Handle hover styling */ } CSS Scrollbar Properties PropertyDescription ::-webkit-scrollbarDefines the overall scrollbar container ::-webkit-scrollbar-trackStyles the scrollbar track ...
Read MoreHow to create a browser window example with CSS?
Creating a browser window mockup with CSS is a great way to showcase web content in a realistic browser interface. This involves styling elements to resemble the typical browser components like window controls, address bar, and content area. Syntax /* Browser window structure */ .browser-window { border: solid color; border-radius: radius; } .browser-header { background: color; padding: value; } .browser-controls { display: inline-block; border-radius: 50%; } Example The ...
Read MoreHow to stretch elements to fit the whole height of the browser window with CSS?
To stretch elements to fit the whole height of the browser window, use the height property and set it to 100%. This technique requires setting the height on both the HTML document and the container element. Syntax html, body { height: 100%; margin: 0; } .container { height: 100%; } Method 1: Using Percentage Height The most common approach is to set the HTML document and body to 100% height, then apply the same to your container element − ...
Read MoreHow to create different shapes with CSS?
CSS allows you to create various geometric shapes on web pages using properties like border-radius, border, and clip-path. These properties can transform simple HTML elements into circles, rectangles, squares, triangles, and more complex shapes. Syntax /* Basic shape properties */ border-radius: value; border: width style color; clip-path: shape-function; Create a Circle A circle is created by setting border-radius to 50% on a square element − .circle { width: 100px; ...
Read More