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

We can create an infinitely scrolling slider using CSS Flexbox with the help of JavaScript.ExampleThe following examples illustrate carousel using CSS. Live Demo                    img {             width: 100%;          }          .container {             max-width: 600px;             position: relative;             margin: 6% auto;          }          .prevbtn, .nextbtn {             position: absolute;   ... Read More

With flex, we can easily create left-right alignment of containers. The flexible items are displayed horizontally using the flex-direction property. The flexible items have a space between them since the justify-content is set to space-between. The following examples illustrate CSS flex property. Align with Flex Direction The div container is set to the flex value using the display property. The flex-direction allow the flex items to display horizontally − flex-direction: row; Example Let us see the example − #container { ... Read More

On a web page, you may need to set a vertical text and that too with horizontal letters. By specifying the text-orientation: upright and writing-mode: vertical-rl, we can display vertical text with horizontal CSS. Syntax The syntax of CSS writing-mode and text-orientation property is as follows − Selector { writing-mode: /*value*/ text-orientation: /*value*/ } Create a Vertical Text with Horizontal Letters The following example illustrate how to create a vertical text with horizontal letters − Text Orientation To create a vertical text, set the text-orientation to upright − text-orientation: upright; ... Read More

On a web page, you can create a triangle easily. Use the clip-path property or even the child selector concept can be used. The clip-path allows a user to clip an element to a shape. This shape is to be set polygon to create a triangle. Syntax The syntax of CSS clip-path property is as follows − Selector { clip-path: /*value*/ } Create a Triangle using the clip-path The following example illustrate CSS clip-path property. Here, we have set the clip-path shape to polygon to create a triangle. This is done using the polygon() method ... Read More