- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
We can add specific styles to existing elements in HTML using CSS Pseudo classes which select an element with a specific state such as (hover, visited, disabled, etc.) NOTE − To separate CSS Pseudo Classes from Pseudo Elements, in CSS3, pseudo classes use single-colon notation. Syntax The following is the syntax for using CSS Pseudo classes on an element − Selector:pseudo-class { css-property: /*value*/; } The following are all the available CSS Pseudo Classes − Sr.No Pseudo-Class & Description 1 activeIt selects the active mentioned element 2 checkedIt ... Read More
CSS overflow property comes in handy when the user wants to display a larger content in a smaller container without resizing the content. This property allows user to clip content, provide scrollbars to view clipped content, render content outside the container thus the name overflow. Syntax The following is the syntax for CSS Overflow property − Selector { overflow: /*value*/ } The following are the values for the CSS Overflow property − Sr.No Value & Description 1 visibleIt is the default value, content is not clipped and is rendered outside ... Read More
The CSS Display property is used to set how the element is displayed on a web page. With this property, create a grid layout, a flex, inline, etc. Some of its values are displayed here − Sr.No Property Value Description 1 inline Displays an element as an inline element. 2 block Displays an element as a block element. 3 contents Makes the container disappear, making the child elements children of the element the next level up in the DOM 4 flex Displays an element as a block-level flex container ... Read More
To set a fixed width for items in flexbox, use the flex property. The flex is a shorthand property for the flex-grow, flex-shrink, and flex-basis properties as shown below. The flex item is growable, can’t shrink, and initial length is set to 100% − flex: 1 0 100%; Above, shows − flex-grow is 1 i.e., growable flex-shrink is 0 i.e., can’t shrink flex-basis is 100% Syntax The syntax of CSS flex property is as follows − Selector { flex: /*value*/ } As shown above, the value can be − flex-grow ... Read More
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