CSS align content is used to define the alignment of box items. This property aligns the flex line within a …
Post Type Archives: CSS Property
This is css property
CSS align items is used to define the alignment of box items. This property aligns each items inside flex container. …
CSS align self is used to align the single flex of box items. This property aligns single items inside flex …
CSS all is used to reset all the css property of an HTML element. This property is very useful when …
CSS background color is used to set the color of background of an HTML element. Syntax
|
1 |
background-color: enter color code here; |
|
1 2 3 4 5 6 7 8 9 |
<style> .div-bg-color{ background-color:red; color:#fff; } </style> <div class="div-bg-color"> <p>This is the HTML paragraph to show background color property of CSS.</p> </div> |
Output This …
CSS border bottom is used to set the bottom border of an HTML element. This is a shorthand property with …
CSS border bottom style is used to set the style of the bottom border of an HTML element. Syntax
|
1 |
border-bottom-style: specify style here; |
…
CSS border left style is used to set the style of left border of an HTML element. Syntax
|
1 |
border-left-style: specify style here; |
|
1 2 3 4 5 6 7 8 9 10 |
<style> .div-border{ border-left-width:2px; border-left-style:solid; border-left-color:#000; } </style> <div class="div-border"> <p>This is the paragraph to display example showing style of left border.</p> </div> |
…
CSS border right style is used to set the style of right border of an HTML element. Syntax
|
1 |
border-right-style: specify style here; |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<style> .div-border{ border-right-width:2px; border-right-style:solid; border-right-color:#000; } </style> <div class="div-border"> <p>This is the paragraph to show style given to the right border of an HTML element.</p> </div> </body> </html> |
…
CSS border top style is used to set the style of top border of an HTML element. Syntax
|
1 |
border-top-width: specify style here; |
|
1 2 3 4 5 6 7 8 9 10 |
<style> .div-border{ border-top-width:2px; border-top-style:solid; border-top-color:#000; } </style> <div class="div-border"> <p>This is the paragraph to show style given to the top border of en HTML element.</p> </div> |
…
CSS border bottom color is used to set the color of bottom border of an HTML element. Syntax
|
1 |
border-bottom-color: specify color here; |
|
1 2 3 4 5 6 7 8 9 10 |
<style> .div-border{ border-bottom-width:2px; border-bottom-style:solid; border-bottom-color:#000; } </style> <div class="div-border"> <p>This is the paragraph to show the color given to bottom border.</p> </div> |
…
CSS border left color is used to set the color of left border of an HTML element. Syntax
|
1 |
border-left-color: specify color here; |
|
1 2 3 4 5 6 7 8 9 10 |
<style> .div-border{ border-left-width:2px; border-left-style:solid; border-left-color:#000; } </style> <div class="div-border"> <p>This is the paragraph with left border color.</p> </div> |
…
CSS border right color is used to set the color of right border of an HTML element. Syntax
|
1 |
border-right-color: specify color here; |
|
1 2 3 4 5 6 7 8 9 10 |
<style> .div-border{ border-right-width:2px; border-right-style:solid; border-right-color:#000; } </style> <div class="div-border"> <p>This is the example to show the color of right side border of an HTML element.</p> </div> |
…
CSS border top color is used to set the color of top border of an HTML element. Syntax
|
1 |
border-top-color: specify color here; |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<style> .div-border{ border-top-width:2px; border-top-style:solid; border-top-color:#000; } </style> <div class="div-border"> <p>This is the HTML paragraph to show the example of border top color CSS property.</p> </div> </body> </html> |
…
CSS border bottom width is used to set the width of bottom border of an HTML element. Syntax
|
1 |
border-bottom-width: specify color here; |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<style> .div-border{ border-bottom-width:2px; border-bottom-style:solid; border-bottom-color:#000; } </style> <div class="div-border"> <p>This is the paragraph to show width of bottom border.</p> </div> </body> </html> |
…
CSS border left width is used to set the left border width for html element. The border left for an …
CSS border top width is used to set the top border width for html element. The border top for an …
CSS border right width is used to set the right border width of an HTML element. Syntax
|
1 |
border-right-width: specify color here; |
|
1 2 3 4 5 6 7 8 9 10 |
<style> .div-border{ border-right-width:2px; border-right-style:solid; border-right-color:#000; } </style> <div class="div-border"> <p>This is a paragraph of border right width.</p> </div> |
Output …
CSS border right is used to set the right border of an HTML element. This is a shorthand property with …
CSS border-left is used to set the left border for an HTML element. This is a shorthand property with a …
CSS border bottom left radius is used to set the bottom left radius of border given to the HTML element. …
CSS border bottom right radius is used to set the bottom right radius of border given to the HTML element. …
CSS border width is used to give the width of border for HTML element. Syntax
|
1 |
border-width: specify width here; |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<style> .div-border{ border-width:1px; border-style:solid; border-color:red; } </style> <div class="div-border"> <p>This is the paragraph to show border width property of CSS.</p> </div> </body> </html> |
Output This is …
CSS border style is used to give the style of the border to an HTML element. The style is useful …
CSS border spacing property is used to define the amount of spacing for the adjacent borders of tables. Syntax
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<style> table{ border: 1px solid orange; border-collapse: separate; border-spacing: 15px; } table td{ border: 1px solid red; } </style> <table> <tr> <th>Prop Name</th> <th>Prop Type</th> </tr> <tr> <td>Medium size Bat</td> <td>Wood Material</td> </tr> <tr> <td>Long ribbon</td> <td>Cottom Material</td> </tr> </table> |
…
CSS border collapse property is used to define the border of table to display collapsible. HTML table tag when use …
CSS border color is used to set the border color of an HTML element. Syntax
|
1 |
border-color: specify color here; |
|
1 2 3 4 5 6 7 8 9 10 |
<style> .div-border{ border-width:2px; border-style:solid; border-color:#000; } </style> <div class="div-border"> <p>This is the paragraph to show border color.</p> </div> |
Output This is …
CSS border image is used to set the images for borders. Syntax
|
1 |
border-image: specify image location here; |
|
1 2 3 4 5 6 7 8 9 10 11 |
<style> .div-border{ border-image: url(../../images/myborder.png) 14 round; border-width:12px; border-style:solid; border-color:#000; } </style> <div class="div-border"> <p>This is the paragraph to show the border image.</p> </div> |
Output This is the paragraph to …
CSS border image outset is used to define how much border image can extend the block area. Syntax
|
1 |
border-image-outset: specify outset for the image to cover the block area; |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<style> .div-border{ border-image-source: url(../../images/myborder.png); border-image-slice: 14; border-image-width: 0.5em 0.87em; border-image-outset: 0em 0.9em 1.2em 0.9em; border-image-repeat: round; border-width:12px; border-style:solid; border-color:#000; } </style> <div class="div-border"> <p>This is the content to show outset of border image.</p> </div> </body> </html> |
…
CSS border image repeat is used to define whether the border images are repeat, round or stretch. Syntax
|
1 |
border-image-repeat: specify reapeat value here; |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<style> .div-border{ border-image-source: url(../../images/myborder.png); border-image-slice: 14; border-image-width: 0.5em 0.87em; border-image-outset: 0em 0.9em 1.2em 0.9em; border-image-repeat: round; border-width:12px; border-style:solid; border-color:#000; } </style> <div class="div-border"> <p>This is the paragraph inside the div with repeated border image.</p> </div> |
…
CSS border image source is used to define the location of the image source to display as a border. Syntax …
CSS border image slice is used to slice the border image from top, left, bottom and right. This divides border …
CSS border image width is used to specify the width of the border image. Syntax
|
1 |
border-image-width: specify width value here in pixels, em percentage etc. |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<style> .div-border{ border-image-source: url(../../images/myborder.png); border-image-slice: 14; border-image-width: 0.5em 0.87em; border-image-outset: 0em 0.9em 1.2em 0.9em; border-image-repeat: round; border-width:12px; border-style:solid; border-color:#000; } </style> <div class="div-border"> <p>This is the paragraph inside the div to show border image width property.</p> </div> |
Output This is …
CSS border top left radius is used to set the top left radius of border given to the html element. …
CSS font kerning is used to define the inter-glyph spacing of HTML elements. This property uses many font to set …
CSS margin bottom is used to set the bottom space between the HTML element border and its content. Syntax
|
1 |
margin-bottom: enter a value in px, em or percentage |
…
CSS margin left is used to set the space between the HTML element border and its content from the left. …
CSS background-attachment is used to define whether an HTML image used as a background is fixed or scroll within the …
CSS margin right is used to set the space between the HTML element border and its content from the right. …
CSS background-image is used to define HTML image used as a background for the block. CSS background image can be …
CSS margin top is used to set the space between the HTML element border and its content from the top. …
CSS background-position is used to set the background image position inside the block. CSS background image can be used to …
CSS padding bottom is used to set the space between the HTML element tag border and its content from the …
CSS background-repeat is used to set the background image if repeat or not inside the block. CSS background image can …
CSS padding left is used to set the space between the HTML element tag border and its content from the …
CSS background-size is used to set the background image size inside the block. CSS background image can be used to …
CSS padding right is used to set the space between the HTML element tag border and its content from the …
CSS padding top is used to set the space between the HTML element tag border and its content from the …
CSS text align last is used to define the alignment of last line text of the paragraph. This property aligns …
CSS text decoration color is used to define the color added to the text decoration. Syntax
|
1 |
text-decoration-color: enter value for decoration |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<style> h2{ text-decoration-color:red; text-decoration-line: overline; text-decoration-style: wavy; } .div-align{ text-align:justify; text-align-end:right; border:1px solid yellow; border-radius:20px; padding:10px; } </style> <h2>This is the heading</h2> <div class="div-align"> <p>This is the paragraph to show text decoration color.</p> </div> |
Output This …
CSS text decoration line is used to define the type of line for text decoration. Syntax
|
1 |
text-decoration-line: enter value for decoration |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<style> h2{ text-decoration-line:underline; } .div-align{ text-align:justify; text-align-end:right; border:1px solid yellow; border-radius:20px; padding:10px; } </style> <h2>This is the heading</h2> <div class="div-align"> <p>This is a paragraph to show text decoration property.</p> </div> </body> </html> |
Output This …
CSS text decoration style is used to define the style of underlining a text. Syntax
|
1 |
text-decoration-style: enter value for decoration |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<style> h2{ text-decoration-color:red; text-decoration-line: overline; text-decoration-style: wavy; } .div-align{ text-align:justify; text-align-end:right; border:1px solid yellow; border-radius:20px; padding:10px; } </style> <h2>This is the heading</h2> <div class="div-align"> <p>This is the HTML paragraph inside the div to show right alignment of text. This uses text align property to align the content.</p> </div> |
Output This is …
CSS text indent is used to define the indentation of paragraphs. The indentation given to the content gives margin to …
If you want to make text uppercase or lowercase, You can use CSS text-transform property to do this. Below are …
CSS border top is a border top shorthand property with a single setting to specify the width, style and color …
CSS border top right radius is used to set the top right radius of border given to the html element. …
CSS background position is used to set the background image position inside the block. Syntax
|
1 |
background-position: position value comes here; |
|
1 2 3 4 5 6 7 8 9 10 11 |
<style> .div-bg-position{ background-image:url(../../images/recycle1.png); min-height:200px; background-position:center center; color:#fff; } </style> <div class="div-bg-position"> <p>This is the HTML paragraph inside the div for background position text. This div contains a background image of the globe. This background image has given position center. The background center makes it at the center position in the block.</p> </div> |
Output This is …
CSS background image is used to define the image for the background of a block. Syntax
|
1 |
background-image: url(enter the image location here); |
|
1 2 3 4 5 6 7 8 9 10 11 |
<style> .div-bg-img{ background-image:url(../../images/nature.jpg); background-attachment:fixed; min-height:200px; color:#fff; } </style> <div class="div-bg-img"> <p>This is the HTML paragraph inside the div. The div contains some background image. This background image has fixed attachment. The background showing the nature image.</p> </div> |
Output This …
background CSS Property is used to define different background properties in a single setting. Syntax
|
1 |
background: background property value comes here; |
|
1 2 3 4 5 6 7 8 9 10 |
<style> .div-bg{ background:url(../../images/nature.jpg) repeat fixed; min-height:200px; color:#fff; } </style> <div class="div-bg"> <p>This is the background CSS example paragraph</p> </div> |
Output This is …
CSS text overflow is used when we want to show the content in the limited width or height. CSS text …