To help developers customize their websites with a mix of JavaScript and CSS, new CSS properties have been developed and now support popular browsers. Some of these are listed below −focus-withinIt aims to solve focus-accessibility within elementsscroll-snapThis enables native scroll and deceleration@media(prefers-*)Helps set both UI and UX of page according to device preferences of the user, thereby, allowing higher level of personalization.* can denote light-level, forced-colors, color-scheme, contrast, reduced-motion and reduced-transparencyposition: stickyTo keep UI within the viewport.logical properties for having a standard layoutAllows us to have dynamic directional spacing within and around the elements.gap propertyThis property is now available for ... Read More

We can change the output of scrolling a webpage’s boundary area using the CSS overscroll-behavior property. Through this, we can disable Pull-to-Refresh on browsers. Syntax The syntax of CSS overscroll-behavior property is as follows − Selector { overscroll-behavior: /*value*/ } The Overscroll-behavior The following example illustrate CSS overscroll-behavior property. It sets what a web browser does after reaching the boundary of a scrolling area. Here, we have set the overflow-behavior-y for the div to set the web browser's behavior when the vertical boundary of a scrolling area is reached. The value contain is set for ... Read More

By changing the text-color and background color of a page, we can add dark/light mode for our website.SyntaxThe following syntax can be used to apply dark mode.Selector {    color: white;    background-color: black }Example Live Demo                    div {             font-size: 1.4em;             text-align: center;          }          .dark {             color: white;             background-color: black;          }       ... Read More

With the introduction of the following text-decoration properties, we can now style text in more ways than before. The text-decoration is the shorthand for text-decoration-thickness, text-decoration-color, text-decoration-line and text-decoration-style. text-decoration-skip, text-decoration-skip-ink, text-decoration, text-underline-offset and text-underline-position need to be specified explicitly. Syntax The syntax of CSS text-decoration is as follows − Selector { text-decoration: /*value*/ } The text-decoration Shorthand Property The text-decoration is the shorthand for text-decoration-thickness, text-decoration-color, text-decoration-line and text-decoration-style. text-decoration-skip, text-decoration-skip-ink, text-decoration, etc. Example Let us see an example to use the shorthand property to decorate text − ... Read More

The CSS text-decoration-color is used to change the link color. The underline is set using the text-decoration property. To change the link underline color, the same text-decoration-color property is used. Syntax The syntax of CSS text-decoration-color property is as follows − Selector { text-decoration-color: /*value*/ } Set the Links To set a link on a web page, we use the element with the href attribute. Add the link in the href attribute − Access our Java Tutorial for free Access our Python Tutorial for free ... Read More

We will now be able to explicitly set display type of elements by two valued syntax of CSS display. This will allow us to change the flow layout of element. Display an Inline Element The following examples illustrate CSS display property with multi-keyword − display: inline flow-root; The inline displays an element as an inline element whereas with the flow-root, the element generates a block box that establishes a new block formatting context. Example Let us see the example − body, div, span { ... Read More

By specifying grayscale value to the filter property of CSS we can create a black and white image. filter property can be used to apply special effects like blur, drop-shadow to images.SyntaxThe syntax of CSS filter property is as follows −Selector {    filter: grayscale(100%);    -webkit-filter: grayscale(100%); }ExampleThe following examples illustrate CSS filter property. Live Demo                    img {             margin: 2%;             border-radius: 25%;          }          img:nth-of-type(even) {             filter: grayscale(100%);             -webkit-filter: grayscale(100%);          }                               This gives the following outputExample Live Demo                    img {             margin: 2%;          }          img:nth-of-type(odd) {             filter: grayscale(100%);             -webkit-filter: grayscale(100%);          }                               This gives the following output

The CSS image-rendering property helps us set an algorithm for scaling our image. The images sometimes look blurry when the transform & scale is applied. To improve the image, use the CSS image-rendering property. Let us see how to maintain the image quality. Syntax The syntax of CSS image-rendering property is as follows − Selector { image-rendering: /*value*/ } Above, the value can be − auto − This is the default and the web browser choose the scaling algorithm automatically smooth − Smooths out the color in your image. high-quality − Provides higher-quality scaling ... Read More

Using the CSS min() function, we can create a responsive logo in our webpages. It allows us to specify a minimum value to a CSS attribute.SyntaxThe syntax of CSS min() property is as follows −Selector {    attribute: min(/*value*/, /*value*/); }ExampleThe following examples illustrate CSS min() property. Live Demo                    img {             float: left;             height: min(40vw, 384px);             margin: 3%;          }                 ... Read More

To align items of a flex container along its main axis by distributing space around it, we use the justify-content property of CSS. The following are the values − flex-start − The flex items are positioned at the start of the container. This is the Default value. flex-end − The flex items are positioned at the end of the container center − The flex items are positioned in the center of the container space-between − The flex items will have space between them space-around − The flex items will have space before, between, and after them space-evenly − The flex ... Read More