Found 1594 Articles for CSS

Set the flex items horizontally from right to left with CSS

Samual Sam
Updated on 04-Jul-2020 07:59:28

202 Views

Use the flex-direction property with row-reverse value to set the flex-items horizontally from right to left.ExampleYou can try to run the following code to implement the row-reverse valueLive Demo                    .mycontainer {             display: flex;             flex-direction: row-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          

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

766 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

112 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

177 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

132 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;

Advertisements