We can create a customized checkmark using CSS. The following examples illustrate this effect −Example Live Demo div {    margin: 2%;    position: relative;    width: 40px;    height: 40px;    box-shadow: inset 0 0 12px lightblue; } div::before {    content: "";    position: absolute;    width: 8px;    top: 50%;    height: 50%;    border-radius: 2px;    background-color: rgb(123, 45, 20);    transform: translateX(12px) rotate(-45deg);    transform-origin: left bottom;    z-index: +1; } div::after {    content: "";    position: absolute;    bottom: 0;    height: 8px;    width: 100%;    border-radius: 2px;    background-color: rgb(200, ... Read More

Use the ::placeholder pseudo-element, we can change the placeholder text color for textboxes. Also, use the :last-child pseudo class for the form input. Syntax The syntax of CSS ::placeholder pseudo-element is as follows − ::placeholder { attribute: /*value*/ } Default Placeholder Example Let us first see how a default placeholder color looks like − Fill the form First Name Placeholder With a Different Color ... Read More

Pseudo-Class A pseudo-class represents a state of a selector like :hover, :active, :last-child, etc. These start with a single colon(:). Syntax The syntax of CSS pseudo-class is as follows − :pseudo-class{ attribute: /*value*/ } Pseudo-Element Similarly, a pseudo-element is used to select virtual elements like ::after, ::before, ::first-line, etc. These start with a double colon(::). Syntax The syntax of CSS pseudo-element is as follows − ::pseudo-element{ attribute: /*value*/ } Change the Link on Hover The following example illustrate changing the link on hover using the CSS pseudo class − Example ... Read More

We can create HTML tables with fixed header on scroll using CSS. It helps to increase readability as user doesn't have to scroll everytime to check the table header. In this article, we will learn and understand two different approaches for HTML tables with fixed header on scroll in CSS. We have a table inside a div element with class name as container. Our task is to fix HTML table header on scroll using CSS. Approaches for HTML Tables with Fixed Header on Scroll Here is a list of approaches for HTML tables with fixed header on scroll in CSS ... Read More

Using the CSS :not() pseudo-class, we can refine our styling by selecting those elements which do not have a specific value or does not match a selector. Select Elements not Having a Child Selector To select elements not having a child selector, use the :not pseudo-class in CSS. Here, we have a child selector. The CSS child selector is used to select all the child elements with a particular parent element. It selects all the elements that are children of i.e. div>p But we have selected elements not having this div>p − p:not(div>p) { ... Read More

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