Vanithasree has Published 101 Articles

Role of CSS : read-only Selector

vanithasree

vanithasree

Updated on 01-Jul-2020 09:15:00

75 Views

Use the CSS :read-only selector to select elements that are read-only.ExampleYou can try to run the following code to implement the :read-only selector:Live Demo                    input:read-only {             background-color: blue;             color: white;          }                              Subject:          Student:          

Role of CSS :last-of-type Selector

vanithasree

vanithasree

Updated on 30-Jun-2020 11:10:40

78 Views

Use the CSS :last-child selector to style every element that is the last child of its parent.ExampleYou can try to run the following code to implement the :last-child selector −Live Demo                    p:last-of-type {             background: orange;          }                     Heading       This is demo text1.       This is demo text2.       This is demo text3.    

Style every elements that is the first child of its parent with CSS

vanithasree

vanithasree

Updated on 30-Jun-2020 09:47:59

216 Views

To style every element that is the first child of its parent, use the CSS :first-child selector.ExampleYou can try to run the following code to implement the :first-child selector −Live Demo                    p:first-child {           ... Read More

Create a link button with borders using CSS

vanithasree

vanithasree

Updated on 30-Jun-2020 08:53:44

2K+ Views

To create a link button with borders, you can try to run the following code −ExampleLive Demo                    a:link, a:visited {             background-color: white;             color: black;             border: 1px solid blue;             padding: 30px 30px;             text-align: center;             text-decoration: none;             display: inline-block;          }          a:hover, a:active {             background-color: red;             color: white;          }                     Demo Link    

Vertical alignment of an image using CSS

vanithasree

vanithasree

Updated on 30-Jun-2020 07:53:42

172 Views

To align an image vertically using CSS, use the vertical-align property. You can try to run the following code to align image vertically −ExampleLive Demo                    img {             vertical-align: text-bottom;          }                     This is demo image.    

CSS border-image-source

vanithasree

vanithasree

Updated on 29-Jun-2020 08:36:41

115 Views

The CSS border-mage-source property is used to set the image path. You can try to run the following code to implement the border-image-source property:ExampleLive Demo                    #borderimg1 {             border: 15px solid transparent;       ... Read More

Set image as a border for elements with CSS

vanithasree

vanithasree

Updated on 29-Jun-2020 08:04:03

78 Views

CSS border-image property is used to add image border to some elements. You can try to run the following code to set the image as a border for elements:ExampleLive Demo                    #borderimg1 {             border: 10px ... Read More

Perform Animation on CSS opacity

vanithasree

vanithasree

Updated on 25-Jun-2020 14:34:54

91 Views

To implement animation on opacity property with CSS, you can try to run the following code:ExampleLive Demo                    #demo1 {             position: absolute;             top: 60px;         ... Read More

CSS white-space Property

vanithasree

vanithasree

Updated on 25-Jun-2020 14:05:20

123 Views

Use the white-space property to work with white-space inside an element:ExampleLive Demo                    p.demo1 {             white-space: normal;          }          p.demo2 {             white-space: pre;          }                     Control white-space                This is demo text.          This is demo text.                      This is demo text.          This is demo text.          

Animate CSS background-size property

vanithasree

vanithasree

Updated on 25-Jun-2020 13:02:30

394 Views

To implement animation on background-size property with CSS, you can try to run the following code:ExampleLive Demo                    div {             width: 500px;             height: 400px;         ... Read More

1 2 3 4 5 ... 11 Next
Advertisements