Found 1566 Articles for CSS

Set the color of the right border using CSS

varma
Updated on 30-Jun-2020 08:05:22

74 Views

To set the color of the right border, use the border-right-color property. You can try to run the following code to implement border-color-property −ExampleLive Demo                    p {             border-style: dotted;             border-right-color: #FFFF00;          }                     This is demo text.     Output

Set the color of the four borders using CSS

Chandu yadav
Updated on 21-Jun-2020 10:23:16

82 Views

To set the color of the four borders, use the border-color property. You can try to run the following code to set border color for all the bordersExampleLive Demo                    p {             border-style: dashed;             border-color: #808000 #800000 #FF0000 #FFFF00;          }                     This is demo text with four colored border.     Output

Set the width of the left border using CSS

seetha
Updated on 21-Jun-2020 10:20:40

71 Views

To set the width of the left border, use the border-left-width property in CSS. You can try to run the following code to implement the border-left-width property −ExampleLive Demo                    p {             border-style: dashed;             border-left-width: 10px;          }                     This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is ... Read More

Set the style of the bottom border using CSS

George John
Updated on 21-Jun-2020 10:18:13

114 Views

To set the style of the bottom border, use the border-bottom-style property. The values for the border you can set is, dotted, double, dashed, solid, etc.ExampleYou can try to run the following code to style bottom borderLive Demo                    p.dotted {border-bottom-style: dotted;}          p.double {border-bottom-style: double;}          p.dashed {border-bottom-style: dashed;}          p.solid {border-bottom-style: solid;}          p.inset {border-bottom-style: inset;}          p.outset {border-bottom-style: outset;}                     Dotted bottom border.       Double bottom border.       Dashed bottom border.       Solid bottom border.       Inset bottom border.       Outset bottom border.     Output

Show the background image only once with CSS

Giri Raju
Updated on 30-Jun-2020 07:50:30

587 Views

Use the background-repeat property to display the background image only once. You can try to run the following code to implement the background-repeat property −ExampleLive Demo                    body {             background-image: url("https://www.tutorialspoint.com/videotutorials/images/tutor_connect_home.jpg");             background-repeat: no-repeat;          }                     Background Image    

Role of CSS :nth-last-of-type(n) Selector

mkotla
Updated on 21-Jun-2020 08:48:30

99 Views

Use the CSS :nth-last-of-type(n) selector to select every element that is the second element of its parent, counting from the last child.ExampleYou can try to run the following code to implement the :nth-last-of-type(n) selector:Live Demo                    p:nth-last-of-type(2) {             background: blue;             color: white;          }                     This is demo text 1.       This is demo text 2.       This is demo text 3.       This is demo text 4.       This is demo text 5.    

Set Responsive Font Size using CSS

radhakrishna
Updated on 30-Jun-2020 07:48:43

221 Views

To set the responsive font size, use the ‘viewport width’ and set it to ‘vw’ unit. You can try to run the following code to use ‘vw’ unit −ExampleLive Demo                    h1 {             font-size:8vw;          }                     This is demo heading       This is demo text.    

Style elements with a value within a specified range with CSS

Chandu yadav
Updated on 21-Jun-2020 08:40:26

87 Views

To style elements with a value within a specified range, use the CSS :in-range selector. You can try to run the following code to implement the :in-range selectorExampleLive Demo                    input:in-range {             border: 3px dashed orange;             background: yellow;          }                           The style only works for the value entered i.e. 9    

Rotate transform the element by using z-axis with CSS3

seetha
Updated on 30-Jun-2020 07:54:12

139 Views

Use the rotateZ(angle) method to rotate transform the element by using z-axis with CSS3 −ExampleLive Demo                    div {             width: 200px;             height: 100px;             background-color: pink;             border: 1px solid black;          }          div#zDiv {             -webkit-transform: rotateZ(90deg);             /* Safari */             transform: rotateZ(90deg);             /* Standard syntax */          }                     rotate Z axis                tutorials point.com.           Output

Disable text wrapping inside an element using CSS

George John
Updated on 21-Jun-2020 08:36:27

446 Views

To disable text wrapping inside an element, use the white-space property. You can try to run the following code to implement the white-space propertyExampleLive Demo                    p {             white-space: nowrap;          }                              This is demo text. This is demo text.          This is demo text. This is demo text.          This is demo text. This is demo text.          This is some text. This is demo text.          

Advertisements