Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language.
Equal width columns except the last one, using flex in CSS
13 Sep, 2024
To create CSS flex columns with equal width except for the last one, you can use this combination of flexbox properties.
Flex 100% width in CSS for a row
6 Sep, 2024
To set a flex container with flex-direction: row and ensure it takes up 100% width, you can do it like in this snippet. With flex-direction: row, the flex items (the children) will be aligned in a...
CSS: next flex item to go to new line
16 Aug, 2024
To force the next flex item to go to a new line in a CSS flex container, you can use the break-after property.
CSS: selector from custom attribute and its value
10 Aug, 2024
In CSS, you can select elements based on custom attributes and their values using attribute selectors. To select an element with a specific value of a custom attribute, you use the [attribute="value...
CSS: Differentiate between keyboard and mouse focus
10 Aug, 2024
In CSS, you can differentiate between keyboard and mouse focus using different pseudo-classes and selectors. :focus-visible - This pseudo-class targets elements that should be visibly focused,...
Add outline offset in Tailwind 2
10 Aug, 2024
Tailwind CSS 2 doesn't natively support the outline-offset utility, so you'll need to add it through a custom plugin. Use the utility-first approach by extending the configuration in the tailwind....
Responsive grid with infinite columns in CSS
5 Aug, 2024
Creating an infinite grid using grid-template-columns: repeat(auto-fit, minmax(minimum, 1fr)) is a common CSS technique to build responsive grid layouts. This method allows the grid to adjust the...
Limit text to n lines in CSS
5 Aug, 2024
To limit a div to a maximum of two rows of text in CSS, you can use the combination of line-clamp, display: -webkit-box, and other related properties. In this example I set the width to 50px for the...
Center inline block vertically in CSS
22 Feb, 2024
In this layout structure, the parent element is set to display as inline-block, creating a container that adapts to the size of its content. Similarly, the content within the parent element is styled...
Negate a selector in CSS
19 Oct, 2023
To negate a selector in CSS, you can use the :not() pseudo-class. This allows you to select elements that do not match a specific criteria. It's mostly used with overwrites. This is widely supported...
Center content inside a div in CSS
7 Sep, 2023
Center content, both horizontally and vertically, inside a div. To center text both horizontally and vertically inside a div block using Flexbox and defining both width and height, you can follow...
Use CSS to add chevron right
1 Aug, 2023
To add a chevron right icon using CSS, you can use a pseudo-element like ::before or ::after to create the shape and style it accordingly. Using the content property is necessary when adding an icon...
Round Corners for HTML Divs in CSS
12 Sep, 2010
This tutorial shows you how to make round corners for divs. From scratch with and without jQuery UI library.
100% layout with footer bottom of the page
3 Sep, 2010
This tutorial shows how you can make 100% height and width layouts with footer that stays always at the bottom of the page.