Post
Ask Question

CSS Properties in HTML : Level-1

CSS clear Property example

 
The CSS clear property is used to clear space for an element that has preceding elements that use the float property.
 
Possible Values
  • left- No floating elements allowed on the left side
  • right- No floating elements allowed on the right side
  • both- No floating elements allowed on either the left or the right side
  • none- Default. Allows floating elements on both sides.
  1. <html>  
  2. <head>  
  3. <title>Styling Text</title>  
  4. <style type="text/css">  
  5.     #div1 {float: left; background: #F0F; width: 260px; height: 120px;}  
  6.     #div2 {clear: left; background: #0FF; width: 260px; height: 120px;}  
  7. </style>  
  8. </head>  
  9. <body>  
  10.     <div id="div1">div content ...</div>  
  11.     <div id="div2">div content ...</div>  
  12. </body>  
  13. </html> 
clear-property-in-html.png

CSS color Property example
 
The CSS color property is used to specify the foreground color for the text inside your elements.
  1. <style type="text/css">  
  2.     #p1{ color:#099;}  
  3. </style>  
  4. <p id="p1">This is my paragraph....</p> 
color-property-in-html.png

CSS display property example
 
The CSS display property is used to alter the default display behavior of elements.
 
"Block display" elements cannot be laid side-by-side horizontally unless you apply the float property to them for strategic positioning.
 
While other elements are "inline display" elements, that are side-by-side horizontally by default.

display-property-in-html.png

CSS float property example
 
The CSS float property is used to float elements to a specific side. You can strategically float block elements and specify widths, heights, and margins for them.
  1. <style type="text/css">  
  2.     .columnLayout{ float: left;background: #BFFFFF;padding: 12px;width: 120px;height: 240px;margin: 5px;}  
  3.     .columnLayout:hover{ border: #00D2D2 1px solid;}  
  4. </style>  
  5. <div class="columnLayout"></div>  
  6. <div class="columnLayout"></div>  
  7. <div class="columnLayout"></div> 
float-left-property-in-html.png

or
  1. <style type="text/css">  
  2.     #div1{ float: left;background: #BFFFFF;padding: 12px;width: 120px;height: 60px;}  
  3.     #div1:hover{border: red 1px solid; }  
  4.     #div2{ float: right;background: #FFD9F8;padding: 12px;width: 120px;height: 60px;}  
  5.     #div2:hover{border: red 1px solid; }  
  6. </style>  
  7. <div id="div1">div content ...</div>  
  8. <div id="div2">div content ...</div> 
float-left-right-property-in-html.png

CSS font Property

 
CSS font-family Property example
 
The CSS font-family property is used to define a font family for an element. It will also affect any child elements of the specified element.
  1. <style type="text/css">  
  2.     p{ font-size:18px;}  
  3.     #p1{ font-family: "Comic Sans MS", "Trebuchet MS", Arial;}  
  4.     #p1:hover{ color:Red;}  
  5.     #p2{ font-family: "Arial Black", Impact, Verdana;}  
  6.     #p2:hover{ color:Green;}  
  7.     #p3{ font-family: Georgia, "Times New Roman", serif;}  
  8.     #p3:hover{ color:pink;}  
  9. </style>  
  10. <p id="p1">paragraph content ...</p>  
  11. <p id="p2">paragraph content ...</p>  
  12. <p id="p3">paragraph content ...</p> 
font-family-property-in-html.png

CSS font-size Property example
 
The CSS font-size property is used to specify the size of the text inside of elements.
  1. <style type="text/css">  
  2.     #p1 { font-size: 12px; }  
  3.     #p1:hover{ font-size: 14px; color:Red; }  
  4.     #p2 { font-size: larger; }  
  5.     #p2:hover{ font-size: 16px; color:Green; }  
  6.     #p3 { font-size: x-large; }  
  7.     #p3:hover{ font-size: 18px; color:Blue; }  
  8.     #p4 { font-size: 200%; }  
  9.     #p4:hover{ font-size: 20px; color: Maroon; }  
  10. </style>  
  11. <p id="p1">Paragraph content ...</p>  
  12. <p id="p2">Paragraph content ...</p>  
  13. <p id="p3">Paragraph content ...</p>  
  14. <p id="p4">Paragraph content ...</p> 
font-size-property-in-html.png

CSS font-style Property
 
The CSS font-style property is used to specify italic or oblique font faces of text in an element.
  1. <style type="text/css">  
  2.     #p1{ font-style: italic;}  
  3. </style>  
  4. <p id="p5">Paragraph content ...</p> 
font-style-property-in-html.png

CSS font-variant Property example
 
The CSS font-variant property is used to specify that all lowercase letters be replaced by small capital letters.
 
The lowercase letters will become capitalized while keeping their small size in proportion to the actual capital letters.
  1. <style type="text/css">  
  2.     h2 { font-variant:small-caps;}  
  3. </style>  
  4. <h2>This is my section heading</h2> 
font-variant-property-in-html.png

CSS font-weight Property example
 
The CSS font-weight property is used to specify the thickness of the font.
  1. <style type="text/css">  
  2.     .myClass { font-weight: 600;}  
  3. </style>  
  4. <p class="myClass">paragraph content ...</p>  
  5. <p>paragraph content ...</p> 
font-weight-property-in-html.png

CSS font property example
 
The CSS font property is CSS shorthand for specifying font-style, font-variant, font-weight, font-size and font-family properties.
  1. <style type="text/css">  
  2.     p.myClass { font: italic small-caps bold 18px Arial, Verdana;}  
  3.     p.myClass:hover{ color:Red;}  
  4. </style>  
  5. <p>Paragraph Content</p>  
  6. <p class="myClass">Paragraph Content</p> 
font-property-in-html.png

CSS height Property example
 
The CSS height property is used to specify the height setting that some content containers can receive.
 
This only works on elements that are "block" display type content boxes.
 
For instance if you try to set the height on an <span> element, by default, it will not adhere to your height property, but if you try to set height for an <div> element it will adhere to the height property.
  1. <style type="text/css">  
  2.     #myDiv { height: 50%; /* use %, exact pixel size, or auto */width: 75%;border: #59ACFF 1px solid;background: #CCE6FF;padding: 12px; color:Green;}  
  3. </style>  
  4. <div id="myDiv">Sonia</div> 
height-property-in-html.png

CSS letter-spacing Property example
 
The CSS letter-spacing property is used to specify the amount of space that your text should have between each letter.
 
Use this with the word-spacing and line-height properties to really fine-tune your font and text rendering for better readability.
  1. <style type="text/css">  
  2.     p.class1 { letter-spacing: 0.3em;}  
  3.     p.class1:hover{ color:Red;}  
  4.     p.class2 { letter-spacing: 4px;}  
  5.     p.class2:hover{ color:Green;}  
  6. </style>  
  7. <p class="class1">Sonia</p>  
  8. <p class="class2">Sonia</p>  
  9. <p>Sonia</p> 
letter-spacing-property-in-html.png

CSS line-height Property example
 
The CSS line-height property is used to specify the amount of space between each new line of text and the height of line breaks.
 
Use this with the word-spacing and letter-spacing properties to really fine-tune your font and text rendering for better readability.
  1. <style type="text/css">  
  2.     p.class1 { line-height: 2.5em; color:Red;}  
  3.     p.class2 { line-height: 50px; color:Green;}  
  4.     p.class3 { line-height: 300%; color:Blue;}  
  5. </style>  
  6. <p>Sonia <br /> and more <br /> and more</p>  
  7. <hr />  
  8. <p class="class1">Sonia <br /> and more <br /> and more</p>  
  9. <hr />  
  10. <p class="class2">Sonia <br /> and more <br /> and more</p>  
  11. <hr />  
  12. <p class="class3">Sonia <br /> and more <br /> and more</p> 

line-height-property-in-html.png

CSS list-style Property

 
CSS list-style-position Property example
 
The CSS list-style-position property is used to specify the position of list item markers and their content.
  1. <style type="text/css">  
  2.     #list1 { list-style-position: outside;}  
  3.     #list2 { list-style-position: inside;}  
  4. </style>  
  5. <ul id="list1">  
  6.   <li>My list item</li>  
  7.   <li>Another list item</li>  
  8.   <li>Final list item</li>  
  9. </ul>  
  10. <ul id="list2">  
  11.   <li>My list item</li>  
  12.   <li>Another list item</li>  
  13.   <li>Final list item</li>  
  14. </ul>  
  15. <ul id="list3">  
  16.   <li>My list item</li>  
  17.   <li>Another list item</li>  
  18.   <li>Final list item</li>  
  19. </ul> 

list-style-position-property-in-html.png

CSS list-style-type Property example
 
The type of list item marker is specified with the list-style-type property.
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5.     ul.a {list-style-type:circle;}  
  6.     ul.b {list-style-type:square;}  
  7.     ol.c {list-style-type:upper-roman;}  
  8.     ol.d {list-style-type:lower-alpha;}  
  9. </style>  
  10. </head>  
  11.    
  12. <body>  
  13. <p>Example of unordered lists:</p>  
  14.    
  15. <ul class="a">  
  16.   <li>Coffee</li>  
  17.   <li>Tea</li>  
  18.   <li>Coca Cola</li>  
  19. </ul>  
  20.    
  21. <ul class="b">  
  22.   <li>Coffee</li>  
  23.   <li>Tea</li>  
  24.   <li>Coca Cola</li>  
  25. </ul>  
  26.    
  27. <p>Example of ordered lists:</p>  
  28.    
  29. <ol class="c">  
  30.   <li>Coffee</li>  
  31.   <li>Tea</li>  
  32.   <li>Coca Cola</li>  
  33. </ol>  
  34.    
  35. <ol class="d">  
  36.   <li>Coffee</li>  
  37.   <li>Tea</li>  
  38.   <li>Coca Cola</li>  
  39. </ol>  
  40.    
  41. </body>  
  42. </html> 

list-style-type-property-in-html.png

CSS list-style Property example
 
The CSS list-style property is CSS shorthand for specifying the list-style-image, list-style-position and list-style-type properties.
  1. <style type="text/css">  
  2.     #list1 { list-style: inside circle; color:red;}  
  3.     #list2 { list-style: outside upper-roman; color:Green;}  
  4. </style>  
  5. <ol id="list1">  
  6.   <li>list item</li>  
  7.   <li>list item</li>  
  8.   <li>list item</li>  
  9. </ol>  
  10. <ol id="list2">  
  11.   <li>list item</li>  
  12.   <li>list item</li>  
  13.   <li>list item</li>  
  14. </ol> 

list-style-property-in-html.png

CSS margin Property 

 
CSS margin-top Property example
 
The CSS margin-top property is used to create marginal space on the top side of elements.
  1. <style type="text/css">  
  2.     #myDiv { margin-top: 50px;}  
  3.     .divClass { background:#DFEFFF; border:#5BADFF 1px solid; padding:10px; }  
  4. </style>  
  5. <div class="divClass">Sonia</div>  
  6. <div class="divClass" id="myDiv">Sonia</div> 
 
margin-top-property-in-html.png

CSS margin-right  Property  example
 
The CSS margin-right property is used to create marginal space on the right side of elements.
  1. <style type="text/css">  
  2.     #myDiv{ margin-right: 50%;}  
  3.     .divClass{ background:#DFEFFF; border:#5BADFF 1px solid; padding:10px; color:Red; }  
  4.     .divClass:hover{ color:Green;}  
  5. </style>  
  6. <div class="divClass">Sonia</div>  
  7. <div class="divClass" id="myDiv">Sonia</div> 
CSS margin-bottom Property  example
 
The CSS margin-bottom property is used to create marginal space on the bottom side of elements.
  1. <style type="text/css">  
  2.     #myDiv { margin-bottom: 50px;}  
  3.     .divClass { background:#DFEFFF; border:#5BADFF 1px solid; padding:10px; color:green; }  
  4.     .divClass:hover{ color:Red;}  
  5. </style>  
  6. <div class="divClass" id="myDiv">Sonia</div>  
  7. <div class="divClass">Sonia</div>  
  8. <div class="divClass">Sonia</div> 
mrgin-bottom-property-in-html.png

CSS margin-left Property  example
 
The CSS margin-left property is used to create marginal space on the left side of elements.
  1. <style type="text/css">  
  2.     .class1 { margin-left: 20px; color:Red;}  
  3.     .class2 { margin-left: 20%; color:Green;}  
  4. </style>  
  5. <p>Sonia</p>  
  6. <p class="class1">Sonia</p>  
  7. <p class="class2">Sonia</p> 

margin-left-property-in-html.png

CSS margin Property  example
 
The CSS margin property is CSS shorthand for specifying margin-top, margin-right, margin-bottom, and margin-left properties.
  1. <style type="text/css">  
  2.     #div1 { margin: 30px 50% 20px 20%; color:Red; /* top right bottom left */}  
  3.     #div2 { margin: 10px 25% 20px 20%; color:Green;/* top right bottom left */}  
  4.     .divClass { background:#DFEFFF; border:#5BADFF 1px solid; padding:10px; }  
  5. </style>  
  6. <div id="div1" class="divClass">Sonia</div>  
  7. <div id="div2" class="divClass">Sonia</div> 

CSS padding Property 

 
CSS padding-top Property example
 
The CSS padding-top property is used to create top inner cushion space inside elements.

  1. <style type="text/css">  
  2.     #div1 { padding-top: 40px;background:#DFEFFF;border:#5BADFF 1px solid; color:red;}  
  3. </style>  
  4. <div id="div1">Sonia</div> 
padding-top-property-in-html.png

CSS padding-right Property example 
 
The CSS padding-right property is used to create the right inner cushion space inside elements.
  1. <style type="text/css">  
  2.     #div1 { padding-right: 80px;background:#DFEFFF;border:green 1px solid; color:red;}  
  3. </style>  
  4. <div id="div1">Sonia ... Sonia ... Sonia ... Sonia ... Sonia ... Sonia ... Sonia ... Sonia ... Sonia ... Sonia ... Sonia ... Sonia ... Sonia ... Sonia ... Sonia ... </div> 
CSS padding-bottom Property example
 
The CSS padding-bottom property is used to create bottom inner cushion space inside elements.
  1. <style type="text/css">  
  2.     #div1 { padding-bottom: 50px;background: #DFEFFF;border: #5BADFF 1px solid; color:Red;}  
  3. </style>  
  4. <div id="div1">Sonia ... </div> 

padding-bottom-property-in-html.png

CSS padding-left Property example 
 
The CSS padding-left property is used to create left inner cushion space inside elements.
  1. <style type="text/css">  
  2.     #div1 { padding-left: 50%;background: #DFEFFF;border: #5BADFF 1px solid; color:Red;}  
  3. </style>  
  4. <div id="div1">Sonia ... Sonia ... Sonia ... Sonia ... Sonia ... Sonia ... Sonia ... Sonia ... Sonia ... Sonia ... Sonia ... Sonia ... Sonia ... Sonia ... Sonia ... Sonia ... Sonia ...</div> 
CSS padding Property example
 
The CSS padding property is CSS shorthand for specifying padding-top, padding-right, padding-bottom, and padding-left properties.
 
You can set even padding on all four inner sides by using 1 value instead of four values. You can set top + bottom padding evenly and right + left padding evenly by using two values instead of four.
 
The code comments below also explain those concepts.
  1. <style type="text/css">  
  2.     #div1 { padding: 20px 25% 20px 25%; /* top right bottom left */ /* "20px 25%" is the same as defining "20px 25% 20px 25%" */ /* "25%" is the same as defining "25% 25% 25% 25%" */ background:#DFEFFF; border:#5BADFF 1px solid;}  
  3.     #div1 p{ background: #FFF; border: #999 2px dashed; color:green;}  
  4. </style>  
  5. <div id="div1">  
  6.   <p>child of div1... Sonia ...</p>  
  7. </div> 

padding-property-in-html.png

CSS text Property

 
CSS text-align Property  example
 
The CSS text-align property is used to align inline elements or text inside of an element.
  1. <style type="text/css">  
  2.     p{ color:green;}  
  3.     #p1{ text-align: center; color:Red;}  
  4.     #p2{ text-align: right; color:green;}  
  5. </style>  
  6. <p>Sonia ...</p>  
  7. <p id="p1">Sonia ...</p>  
  8. <p id="p2">Sonia ...</p> 

text-align-property-in-html.png

CSS text-decoration Property  example
 
The CSS text-decoration property is used to add specific decorations to your text inside of elements.
  1. <style type="text/css">  
  2.     #p1{ text-decoration: overline; color:Red;}  
  3.     #p2{ text-decoration: line-through; color:green;}  
  4.     #p3{ text-decoration: underline; color:Blue;}  
  5. </style>  
  6. <p id="p1">Sonia ...</p>  
  7. <p id="p2">Sonia ...</p>  
  8. <p id="p3">Sonia ...</p> 

text-decoration-property-in-html.png

CSS text-indent Property  example
 
The CSS text-indent property is used to indent the first line of text inside of an element.
  1. <style type="text/css">  
  2.     #p1{ text-indent: 50px; color:Red;}  
  3.     #p2{ text-indent: 10%; color:green;}  
  4. </style>  
  5. <p id="p1">Sonia ...<br /> Sonia ...</p>  
  6. <p id="p2">Sonia ...<br /> Sonia ...</p> 

text-indent-property-in-html.png

CSS text-transform Property  example
 
The CSS text-transform property is used to control text capitalization and casing inside of an element.
  1. <style type="text/css">  
  2.     #p1{ text-transform: uppercase; color:Red;}  
  3.     #p2{ text-transform: lowercase; color:Green;}  
  4.     #p3{ text-transform: capitalize; color:Blue;}  
  5. </style>  
  6. <p id="p1">sonia soNIA ...</p>  
  7. <p id="p2">sonia soNIA ...</p>  
  8. <p id="p3">sonia soNIA ...</p> 

text-transform-property-in-html.png
 
CSS vertical-align Property  example
 
The CSS vertical-align property is used to specify the vertical positioning of inline child elements in relation to the height and line-height their parent element.
  1. <style type="text/css">  
  2.     #div1 span { vertical-align: sub; color:Red; }  
  3.     #div2 span { vertical-align: super; color:Green; }  
  4.     #div3 span { vertical-align: 25%; color:Red; }  
  5.     #div4 span { vertical-align: 25px; color:green;}  
  6.     .divClass { line-height:2em; background-color:#DFEFFF; border:maroon 1px solid; height:50px;}  
  7. </style>  
  8. <div id="div1" class="divClass">  
  9.   WE <span>LOVE</span> CSS  
  10. </div>  
  11. <hr />  
  12. <div id="div2" class="divClass">  
  13.   WE <span>LOVE</span> CSS  
  14. </div>  
  15. <hr />  
  16. <div id="div3" class="divClass">  
  17.   WE <span>LOVE</span> CSS  
  18. </div>  
  19. <hr />  
  20. <div id="div4" class="divClass">  
  21.   WE <span>LOVE</span> CSS  
  22. </div> 

vertical-align-property-in-html.png

CSS white-space property  example
 
The CSS white-space property is CSS shorthand logic for the text-space-collapse and text-wrap properties.
  1. <!DOCTYPE html>  
  2. <style type="text/css">  
  3.     #div1 { white-space: normal; color:red; }  
  4.     #div2 { white-space: nowrap; color:red;  }  
  5.     #div3 { white-space: pre-line; color:red;  }  
  6.     .divClass { line-height:2em; background: #C1E0FF; border:#09F 1px solid; height:50px; }  
  7. </style>  
  8. <div id="div1" class="divClass">  
  9. Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.  
  10. </div>  
  11. <hr />  
  12. <div id="div2" class="divClass">  
  13. Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.  
  14. </div>  
  15. <hr />  
  16. <div id="div3" class="divClass">  
  17. Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.  
  18. </div> 

white-space-property-in-html.png

Possible Values
  • normal- Sequences of whitespace will collapse into a single whitespace. The text will wrap when necessary. This is the default.
  • nowrap- Sequences of whitespace will collapse into a single whitespace. The text will never wrap to the next line. The text continues on the same line until a <br /> tag is encountered.
  • pre- Whitespace is preserved by the browser. The text will only wrap on line breaks Acts like the <pre> tag in HTML.
  • pre-line- Sequences of whitespace will collapse into a single whitespace. The text will wrap when necessary and on line breaks.
  • pre-wrap- Whitespace is preserved by the browser. The text will wrap when necessary and online breaks.
  • inherit- Specifies that the value of the white-space property should be inherited from the parent element.
CSS width Property  example
 
The CSS width property is used to specify the width that some elements can receive. This only works on elements that are "block" display type content boxes. For instance, if you try to set the width on an <span> element then by default it will not adhere to your width property, but if you try to set the width for an <div> element or paragraph element it will adhere to the width property.
  1. <style type="text/css">  
  2.     #div1{ width:400px; color:Red; }  
  3.     #div2{ width:50%; color:Green; }  
  4.     #div3{ width:auto; color:Red; }  
  5.     .divClass{ height:50px; background: #C1E0FF; border:#09F 1px solid; }  
  6. </style>  
  7. <div id="div1" class="divClass">Sonia ...</div>  
  8. <div id="div2" class="divClass">Sonia ...</div>  
  9. <div id="div3" class="divClass">Sonia ...</div> 

width-property-in-html.png

 
CSS word-spacing Property  example
 
The CSS word-spacing property is used to specify the amount of space that your text should have between each word. Use this with the letter-spacing and line-height properties to really fine-tune your font and text rendering for better readability.
  1. <style type="text/css">  
  2.     p.class1 { word-spacing: 0.8em; color:Red;}  
  3.     p.class2 { word-spacing: 12px; color:Red;}  
  4. </style>  
  5. <p>Here is some content ...</p>  
  6. <p class="class1">Here is some content ...</p>  
  7. <p class="class2">Here is some content ...</p> 

word-space-property-in-html.png

Summary

 
Through this article, you are able to design a web-page.


Similar Articles