Quick, weekly HTML & CSS tipshttps://html-css-tip-of-the-week.netlify.app/https://html-css-tip-of-the-week.netlify.app/tip/nesting-tips-tricks/https://html-css-tip-of-the-week.netlify.app/tip/nesting-tips-tricks/There are some handy things that you can do with nesting, espcially when you start moving the & placeholder around!Thu, 02 Oct 2025 00:00:00 GMThttps://html-css-tip-of-the-week.netlify.app/tip/mutliple-corner-radii/https://html-css-tip-of-the-week.netlify.app/tip/mutliple-corner-radii/Did you know you can control the border radius of both sides of a corner indepenently of one another? It might seem a little strange to do, but you can do some intersting things with it!Thu, 25 Sep 2025 00:00:00 GMThttps://html-css-tip-of-the-week.netlify.app/tip/the-picture-element/https://html-css-tip-of-the-week.netlify.app/tip/the-picture-element/Sometimes, designs have different images for large and small screen layouts. In those situations, it can be tempting to simply bring in multiple images and use a media query in your CSS to control when we see each one, but the <picture> element is purpose-built for these situations.Thu, 18 Sep 2025 00:00:00 GMThttps://html-css-tip-of-the-week.netlify.app/tip/single-color-gradients/https://html-css-tip-of-the-week.netlify.app/tip/single-color-gradients/It might seem strange, but single-colour gradients can come in handy in a few different ways!Fri, 12 Sep 2025 00:00:00 GMThttps://html-css-tip-of-the-week.netlify.app/tip/at-property/https://html-css-tip-of-the-week.netlify.app/tip/at-property/Register custom CSS properties with specific syntax to enable smooth animations and transitions.Thu, 10 Jul 2025 00:00:00 GMThttps://html-css-tip-of-the-week.netlify.app/tip/nth-last-child/https://html-css-tip-of-the-week.netlify.app/tip/nth-last-child/Select elements by counting backwards from the end using the :nth-last-child pseudo-class selector.Thu, 03 Jul 2025 00:00:00 GMThttps://html-css-tip-of-the-week.netlify.app/tip/object-fit-and-object-position/https://html-css-tip-of-the-week.netlify.app/tip/object-fit-and-object-position/Crop images in a similar to way background images by using object-fit and object-positionThu, 26 Jun 2025 00:00:00 GMThttps://html-css-tip-of-the-week.netlify.app/tip/calc-size/https://html-css-tip-of-the-week.netlify.app/tip/calc-size/We can now do calculations based on the intrinsic size of an elementFri, 20 Jun 2025 00:00:00 GMThttps://html-css-tip-of-the-week.netlify.app/tip/selection-pseudo-element/https://html-css-tip-of-the-week.netlify.app/tip/selection-pseudo-element/Add a little personality to your site by changing the selection stylesWed, 11 Jun 2025 00:00:00 GMThttps://html-css-tip-of-the-week.netlify.app/tip/output/https://html-css-tip-of-the-week.netlify.app/tip/output/Display calculation results and user interaction outcomes with semantic HTML using the output element.Fri, 06 Jun 2025 00:00:00 GMThttps://html-css-tip-of-the-week.netlify.app/tip/first-and-last-child/https://html-css-tip-of-the-week.netlify.app/tip/first-and-last-child/Style the first and last elements in a group without needing extra classes or JavaScript.Thu, 29 May 2025 00:00:00 GMThttps://html-css-tip-of-the-week.netlify.app/tip/datalist/https://html-css-tip-of-the-week.netlify.app/tip/datalist/Create autocomplete dropdowns with suggestions using the datalist element without JavaScript.Thu, 22 May 2025 00:00:00 GMThttps://html-css-tip-of-the-week.netlify.app/tip/out-of-range/https://html-css-tip-of-the-week.netlify.app/tip/out-of-range/A quick look at the :not-in-range psuedo-class.Thu, 15 May 2025 00:00:00 GMThttps://html-css-tip-of-the-week.netlify.app/tip/placeholder-shown/https://html-css-tip-of-the-week.netlify.app/tip/placeholder-shown/A quick look at the :placeholder-shown pseudo-class for styling form elements that are displaying placeholder text.Wed, 07 May 2025 00:00:00 GMThttps://html-css-tip-of-the-week.netlify.app/tip/interpolate-size/https://html-css-tip-of-the-week.netlify.app/tip/interpolate-size/Animate and transition to auto, and other intrinsic keyword values.Wed, 30 Apr 2025 00:00:00 GMThttps://html-css-tip-of-the-week.netlify.app/tip/the-color-input/https://html-css-tip-of-the-week.netlify.app/tip/the-color-input/Easily add a color picker to your page using an input with a type of color.Thu, 24 Apr 2025 00:00:00 GMThttps://html-css-tip-of-the-week.netlify.app/tip/only-child/https://html-css-tip-of-the-week.netlify.app/tip/only-child/Learn how to use the :only-child selector to style elements differently when they have no siblings. Perfect for adaptive designs with optional elements like figure captions. Plus, see how combining it with :has() creates powerful parent styling possibilities.Thu, 17 Apr 2025 00:00:00 GMThttps://html-css-tip-of-the-week.netlify.app/tip/min-and-max-functions/https://html-css-tip-of-the-week.netlify.app/tip/min-and-max-functions/The CSS min() and max() functions can be powerful alternatives to clamp() for responsive layouts.Wed, 09 Apr 2025 00:00:00 GMThttps://html-css-tip-of-the-week.netlify.app/tip/the-q-element/https://html-css-tip-of-the-week.netlify.app/tip/the-q-element/When creating quotes in HTML, most people are aware of the <blockquote> element, but for shorter quotes you might want an inline element, and that is where the <q> element comes inWed, 02 Apr 2025 00:00:00 GMThttps://html-css-tip-of-the-week.netlify.app/tip/input-type-number/https://html-css-tip-of-the-week.netlify.app/tip/input-type-number/Number inputs can be useful, but they aren't as straight forward as they might seem at first.Tue, 25 Mar 2025 00:00:00 GMThttps://html-css-tip-of-the-week.netlify.app/tip/fieldset-and-legend/https://html-css-tip-of-the-week.netlify.app/tip/fieldset-and-legend/Wed, 19 Mar 2025 00:00:00 GMThttps://html-css-tip-of-the-week.netlify.app/tip/in-range/https://html-css-tip-of-the-week.netlify.app/tip/in-range/Style inputs based on if the value is within specific range limitsWed, 12 Mar 2025 00:00:00 GMThttps://html-css-tip-of-the-week.netlify.app/tip/search/https://html-css-tip-of-the-week.netlify.app/tip/search/A quick look at the search element, a semantic element for search and filteringTue, 04 Mar 2025 00:00:00 GMThttps://html-css-tip-of-the-week.netlify.app/tip/has/https://html-css-tip-of-the-week.netlify.app/tip/has/The :has() relational selector allows you to select parents of elements, but also preceding elements, siblings, and much more!Tue, 25 Feb 2025 00:00:00 GMThttps://html-css-tip-of-the-week.netlify.app/tip/transition-to-and-from-display-none/https://html-css-tip-of-the-week.netlify.app/tip/transition-to-and-from-display-none/Two new CSS features, @starting-style and allow-discrete, making it quite easy to transition to and from display: none!Tue, 18 Feb 2025 00:00:00 GMThttps://html-css-tip-of-the-week.netlify.app/tip/focus-visible/https://html-css-tip-of-the-week.netlify.app/tip/focus-visible/:focus-visible is an improved version of :focus, meaning we don't have to fight those focus ringsTue, 11 Feb 2025 00:00:00 GMThttps://html-css-tip-of-the-week.netlify.app/tip/cqi-and-cqb/https://html-css-tip-of-the-week.netlify.app/tip/cqi-and-cqb/Responsive units that respond to local sizes, rather than the entire viewportTue, 04 Feb 2025 00:00:00 GMThttps://html-css-tip-of-the-week.netlify.app/tip/max-width-fit-content/https://html-css-tip-of-the-week.netlify.app/tip/max-width-fit-content/Text wraps, but only as a last resort!Tue, 28 Jan 2025 00:00:00 GMThttps://html-css-tip-of-the-week.netlify.app/tip/user-valid/https://html-css-tip-of-the-week.netlify.app/tip/user-valid/A new and improved version of :valid that only kicks in once the user has interacted with the fieldTue, 21 Jan 2025 00:00:00 GMThttps://html-css-tip-of-the-week.netlify.app/tip/kbd/https://html-css-tip-of-the-week.netlify.app/tip/kbd/An underused HTML element for when we want to show keyboard commands and user inputs.Tue, 14 Jan 2025 00:00:00 GMThttps://html-css-tip-of-the-week.netlify.app/tip/empty/https://html-css-tip-of-the-week.netlify.app/tip/empty/We can use CSS to find elements that don't have any content in them.Tue, 07 Jan 2025 00:00:00 GMT