Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
To set the kind of decoration used on text, use the text-decoration-line Property. In CSS, we have the following values for text decoration − text-decoration-line: none|underline|overline|line-through|initial|inherit; The following are the values − none − No line for the text decoration. This is the default. underline − A line gets displayed under the text overline − A line gets displayed over the text line-through − A line gets displayed through the text Text decoration overline The text is decorated overline using the text-decoration property with the value overline − .demo { text-decoration-line: overline; ... Read More
To set the grid template property, you need to specify the number of rows and columns. With that, also set the areas within the grid layout. The syntax for grid template reflects the same − grid-template: none|grid-template-rows / grid-template-columns|grid-template-areas|initial|inherit; The grid-template is a shorthand property for the below properties − grid-template-rows − The number of rows in a grid layout grid-template-columns − The number of columns in a grid layout grid-template-areas − Set areas within the grid layout Create a container for grid Set a container div for the grid − ... Read More
To set the color of the text decoration, use the text-decoration-color property. To place this color overline, underline, line through, etc, use the text-decoration property. Let us see how to set the color of the text decoration Color the text decoration overline The text is decorated overline and then the color is set using the text-decoration-color property − .demo { text-decoration: overline; text-decoration-color: yellow; } Example Here is the example − .demo { ... Read More
The writing-mode property is used to set whether lines of text are laid out horizontally or vertically. Let us understand the property with examples. We will begin with the syntax. Syntax The following is the syntax of the writing-mode property − writing-mode: value; The values are − horizontal-tb − Content flows horizontally from left to right and vertically from top to bottom vertical-rl − Content flows vertically from top to bottom and horizontally from right to left vertical-lr − Content flows vertically from top to bottom and vertically from left to right Flow content vertically ... Read More
The CSS Display property with value block renders an element with parent’s full width available, it also forces a line break. An element with display as block renders as a or element. Let us see the syntax with some examples for the display block. Syntax The following is the syntax of CSS display block − Selector { display: block; } Display block Let’s see an example of CSS display block. The display block displays an element as a block element − em{ background-color: #C303C3; color: #fff; ... Read More
To set the areas within the grid layout, use the grid-template-areas Property. With that, first set the display property as grid to create a grid layout. You need to work on the grid-area, grid-gap, and grid-template-areas property. Let us understand them one by one and set areas withing the grid layout using HTML and CSS. The grid-template-areas property Use the grid-template-areas property to set areas within the grid layout − grid-template-areas: 'newArea newArea . . .' 'newArea newArea . . .'; The grid-gap property To set the gap between the rows and ... Read More
To select sibling elements with CSS, we can use the adjacent or the general sibling selectors. Let us understand them one by one with example. Both of them allows selecting sibling elements with HTML and CSS. Adjacent sibling selector Use the adjacent sibling selector (+), if we want to match the element which occurs immediately after the first selector. Here, both selectors are children of the same parent element. The syntax of the CSS adjacent sibling combinator is as follows − Selector + Selector{ attribute: /*value*/ } The following example illustrate CSS adjacent combinator property. ... Read More
The CSS child combinator is used to select all child elements of a parent element. The CSS descendant combinator is used to select all descendants of a parent element Child combinator The CSS child combinator is used to select all child elements of a parent element. The syntax of the CSS child combinator is as follows. The > comes between two selectors − Selector > Selector { attribute: /*value*/ } Example The following example illustrate the CSS child combinator − article ... Read More
The RGBA color value is for Red, Green, Blue and Alpha. The alpha is the color opacity i.e. a number between 0.0 and 1.0. Here, 1.0 would be for full opaque. Here, we can see the difference in opacity created with the Alpha parameter in RGBA. Syntax The following is the syntax of the RGBA Color Values − rgba(red, green, blue, alpha) Above, the following values are added to the rgba() method. Red Set the color as an − Integer between 0 and 255. Percentage between 0% and 100% Green Set the color as an − ... Read More
CSS animations allow us to display hidden elements. The elements can be set hidden using the opacity. Set the opacity to the value 0 and the element will hide. To display it, set the transition property with the opacity and also set the transition duration to make it look like fade in effect. Set the container The container div is set. Within that, set two child divs − Hide a child div A child div is set with the opacity value 0 to make it invisible when the ... Read More