Found 10483 Articles for Web Development

Usage of CSS grid-auto-rows property

Chandu yadav
Updated on 04-Jul-2020 08:00:41

87 Views

Use the grid-auto-rows property to set size for the rows.ExampleYou can try to run the following code to implement the grid-auto-rows property −Live Demo                    .container {             display: grid;             grid-auto-rows: 50px;             grid-gap: 10px;             background-color: red;             padding: 10px;          }          .container>div {             background-color: yellow;             text-align: center;             padding:10px 0;             font-size: 20px;          }                              1          2          3          4          5          6          

Usage of CSS grid-row-start property

Lakshmi Srinivas
Updated on 25-Jun-2020 10:26:53

53 Views

Set where to start the grid-items with CSS grid-row-start property.You can try to run the following code to implement the grid-row-start propertyExampleLive Demo                    .container {             display: grid;             grid-auto-rows: 50px;             grid-gap: 10px;             background-color: red;             padding: 10px;          }          .container>div {             background-color: yellow;             text-align: center;             padding:10px 0;             font-size: 20px;          }          .ele1 {             grid-row-start: 2;          }                              1          2          3          4          5          6          

Set the flex items vertically from bottom to top with CSS

karthikeya Boyini
Updated on 04-Jul-2020 08:01:29

768 Views

Use the flex-direction property with column-reverse value to set the flex-items vertically, from top to bottomExampleYou can try to run the following code to implement the column-reverse value −Live Demo                    .mycontainer {             display: flex;             flex-direction: column-reverse;             background-color: orange;          }          .mycontainer > div {             background-color: white;             text-align: center;             line-height: 40px;             font-size: 25px;             width: 100px;             margin: 5px;          }                     Quiz                Q1          Q2          Q3          Q4          Q5          Q6          

Set whether the text should be overridden to support multiple languages with CSS

Chandu yadav
Updated on 25-Jun-2020 10:23:25

113 Views

Use the unicode-bdi property to set whether the text should be overridden to support multiple languages with CSSExampleLive Demo                    p.demo1 {             direction: rtl;             unicode-bidi: bidi-override;          }          p.demo2 {             direction: rtl;             unicode-bidi: isolate;          }                     The unicode-bidi Property       This is demo text.       This is demo text       This is demo text    

CSS unicode-bidi Property

Lakshmi Srinivas
Updated on 25-Jun-2020 10:21:56

85 Views

Use the Unicode-bidi property to set whether the text should be overridden to support multiple languages with CSSExampleLive Demo                    p.demo1 {             direction: rtl;             unicode-bidi: bidi-override;          }          p.demo2 {             direction: rtl;             unicode-bidi: isolate;          }                     The unicode-bidi Property       This is demo text.       This is demo text       This is demo text    

Set the width of a tab character with CSS

Ankith Reddy
Updated on 25-Jun-2020 10:21:12

179 Views

Use the tab-size property in CSS to set the width of a tab character. You can try to run the following code to implement the tab-size propertyExampleLive Demo                    #demo {             tab-size: 12;          }                     The tab-size Property                This is demo text.          

Set quotation marks with CSS

George John
Updated on 25-Jun-2020 10:19:20

184 Views

Use the quotes property to set quotation marks. You can try to run the following code to implement the quotes propertyExampleLive Demo                    #demo {             quotes: "'" "'";          }                                        This is demo text surrounded by quotes.                    

CSS quotes Property

Samual Sam
Updated on 25-Jun-2020 10:01:05

110 Views

Use the quotes property to set quotation marks. You can try to run the following code to implement the quotes propertyExampleLive Demo                    #demo {             quotes: "'" "'";          }                                           This is demo text surrounded by quotes.                    

CSS hanging-punctuation Property

Lakshmi Srinivas
Updated on 04-Jul-2020 07:56:42

134 Views

Use the hanging-punctuation property to set whether a punctuation character may be placed outside the line box.It has the following valuesS.NoProperty Value & Description1.NoneNo punctuation mark2.FirstPunctuation outside the start edge of the first line3.LastPunctuation outside the end edge of the last lineSet it like this in your web page −hanging-punctuation: none; hanging-punctuation: first; hanging-punctuation: last;

How to preserve the readability when font fallback occurs with CSS

karthikeya Boyini
Updated on 25-Jun-2020 09:36:34

125 Views

Use the font-size-adjust property to preserve the readability when font fallback occurs. You can try to run the following code to implement the font-size-adjust propertyExampleLive Demo                    #demo {             font-size-adjust: 0.90;          }                     Heading Two       With font-size-adjust property:                This is demo text.             Without font-size-adjust property:       This is demo text.    

Advertisements