Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
CSS Articles
Page 111 of 130
Set the width of the left border using CSS
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 MoreSet the style of the bottom border using CSS
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
Read MoreRole of CSS :nth-last-of-type(n) Selector
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.
Read MoreStyle <input> elements with a value within a specified range with CSS
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
Read MoreDisable text wrapping inside an element using CSS
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.
Read MoreCSS3 Multi-Column column-span Property
The column-span property is used to specify the span between columns. You can try to run the following code to implement column-span property using CSS −Example Live Demo .multi { /* Column count property */ -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; /* Column gap property */ -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; /* Column style property */ column-rule-style: solid; column-rule-color: #ff00ff; ...
Read MoreCSS3 Multi-Column rule-color Property
The multi-column rule-color property is used to specify the column rule color. You can try to run the following code to implement a rule-color property in CSS3 −ExampleLive Demo .multi { /* Column count property */ -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; /* Column gap property */ -webkit-column-gap: ...
Read MoreCSS3 Multi-Column column-gap Property
The multi-column column-gap property is used to decide the gap between the columns.ExampleYou can try to run the following code to implement column-gap propertyLive Demo .multi { /* Column count property */ -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; /* Column gap property */ -webkit-column-gap: 40px; ...
Read MoreCSS3 Multi-Column column-rule Property
The multi-column column-rule property is used to specify the number of rules.You can try to run the following code to implement the column-rule property in CSS3 −ExampleLive Demo .multi { /* Column count property */ -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; /* Column gap property */ -webkit-column-gap: 40px; ...
Read MoreExample of key frames with left animation using CSS3
The following example shows height, width, color, name, and duration of animation with keyframes syntax −ExampleLive Demo h1 { -moz-animation-duration: 3s; -webkit-animation-duration: 3s; -moz-animation-name: slidein; -webkit-animation-name: slidein; } @-moz-keyframes slidein { from { margin-left:100%; width:300% } to { margin-left:0%; width:100%; } } @-webkit-keyframes slidein { from { margin-left:100%; width:300% } to { margin-left:0%; width:100%; } } Tutorials Point this is an example of moving left animation . Reload page function myFunction() { location.reload(); }
Read More