The initial-letter property specifies the first letter and the number of lines it occupies. This property appears in newspapers where the first letter is larger than the rest of the content. This property has three values: normal, <number>, <integer>. Initial Value normal Applies to ::first-letter pseudo-elements and inline-level first child of a block container. Inherited No. Animatable No.…

The CSS @import at-rule is used to import style rules from other style sheets and to support media queries. The @import keyword must be followed by the URI of the style sheet to include. A string is also allowed. It must be at the top of the document but after the @charset rule. Initial Value – Applies to – Inherited No.…

The image-rendering property sets an image scaling algorithm. By default, each browser will apply to aliasing to the scaled image to prevent distortion, but a problem can arise if you want to keep the original pixelated form of the image. Initial Value auto Applies to All elements. Inherited Yes. Animatable Discrete. Version CSS3 DOM Syntax object.style.imageRendering = “pixelated”; Syntax…

The hyphens property defines how words should be hyphenated when text wraps across the lines of text. The hyphens property can take three values: none, manual, auto. It allows preventing hyphenation or allow it, or only allow it when certain characters are present. Initial Value manual Applies to All elements. Inherited Yes. Animatable No. Version CSS3 DOM Syntax Object.style.hyphens…

The height property is used to set an element’s height. This property does not include padding, borders, or margins. The height property can be specified by “px”, “cm”, “vh” or by percentages. The default value is “auto”. If the min-height and max-height properties are used, it will override the height property. If height is set to one of the numeric values like (r)em, px or %, and if…

The hanging-punctuation property specifies whether a punctuation mark should hang at the start or at the end of a text’s line. Hanging punctuation is used with fully-justified text and controls over the alignment of all the lines in a paragraph of text when used at the end of the lines. Initial Value none Applies to All elements.…

The grid-template-rows property defines the number and size of the rows in a grid layout. The values of the grid-template-row property are separated by space. Each of the values specifies the row height. Initial Value none Applies to Grid containers. Inherited No. Animatable Yes. The size of the rows is animatable. Version CSS Grid Layout Module Level 1 DOM…

The grid-template-columns property defines the size (width) of each column in the grid layout: Initial Value none Applies to Grid containers. Inherited No. Animatable Yes. Columns are animatable. Version CSS Grid Layout Module Level 1 DOM Syntax object.style.gridTemplateColumns = “40px 40px 40px”; Syntax Example of the grid-template-column property: Result Example of the grid-template-column applied to grid-container:

The grid-template-areas property is used to refer to the name when setting up the grid layout. You can name grid items with the grid-area property. Each area is defined by apostrophes. These areas may be referenced from such grid-placement properties as grid-row-start, grid-row-end, grid-column-end, grid-column-start, as well as their shorthand properties, like grid-row, grid-area, and grid-column. Initial Value auto Applies to Grid containers. Inherited No.…

The grid-template property defines the grid columns, rows and areas. It is a shorthand property for the following properties: The grid-template property sets the rows and columns, separated by a forward slash. The CSS grid shorthand property resets grid properties to their first values. If you don’t want these values cascade in separately, instead of the grid-template property use the grid…