ARTICLE

CSS Properties in HTML : Level-1

Posted by Sonia Bhadouria Vishvkarma Articles | JavaScript October 11, 2012
Tody, we are going to discuss the CSS Properties with examples.
Reader Level:

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.

<html>

<head>

<title>Styling Text</title>

<style type="text/css">

    #div1 {float: left; background: #F0F; width: 260px; height: 120px;}

    #div2 {clear: left; background: #0FF; width: 260px; height: 120px;}

</style>

</head>

<body>

    <div id="div1">div content ...</div>

    <div id="div2">div content ...</div>

</body>

</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.


<style type="text/css">

    #p1{ color:#099;}

</style>

<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 is side-by-side horizontally by default.

<style type="text/css">

    .myDivs{display: inline;background: #BFFFFF;border: #00D2D2 1px solid;padding: 12px;}

</style>

<div class="myDivs">div content ...</div>

<div class="myDivs">div ...</div>

<div class="myDivs">div co ...</div>


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.

<style type="text/css">

    .columnLayout{ float: left;background: #BFFFFF;padding: 12px;width: 120px;height: 240px;margin: 5px;}

    .columnLayout:hover{ border: #00D2D2 1px solid;}

</style>

<div class="columnLayout"></div>

<div class="columnLayout"></div>

<div class="columnLayout"></div>

 

float-left-property-in-html.png

 

or

<style type="text/css">

    #div1{ float: left;background: #BFFFFF;padding: 12px;width: 120px;height: 60px;}

    #div1:hover{border: red 1px solid; }

    #div2{ float: right;background: #FFD9F8;padding: 12px;width: 120px;height: 60px;}

    #div2:hover{border: red 1px solid; }

</style>

<div id="div1">div content ...</div>

<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.

<style type="text/css">

    p{ font-size:18px;}

    #p1{ font-family: "Comic Sans MS", "Trebuchet MS", Arial;}

    #p1:hover{ color:Red;}

    #p2{ font-family: "Arial Black", Impact, Verdana;}

    #p2:hover{ color:Green;}

    #p3{ font-family: Georgia, "Times New Roman", serif;}

    #p3:hover{ color:pink;}

</style>

<p id="p1">paragraph content ...</p>

<p id="p2">paragraph content ...</p>

<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 text inside of elements.

<style type="text/css">

    #p1 { font-size: 12px; }

    #p1:hover{ font-size: 14px; color:Red; }

    #p2 { font-size: larger; }

    #p2:hover{ font-size: 16px; color:Green; }

    #p3 { font-size: x-large; }

    #p3:hover{ font-size: 18px; color:Blue; }

    #p4 { font-size: 200%; }

    #p4:hover{ font-size: 20px; color: Maroon; }

</style>

<p id="p1">Paragraph content ...</p>

<p id="p2">Paragraph content ...</p>

<p id="p3">Paragraph content ...</p>

<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.

 

<style type="text/css">

    #p1{ font-style: italic;}

</style>

<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.

<style type="text/css">

    h2 { font-variant:small-caps;}

</style>

<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 thickness of font.

<style type="text/css">

    .myClass { font-weight: 600;}

</style>

<p class="myClass">paragraph content ...</p>

<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.

<style type="text/css">

    p.myClass { font: italic small-caps bold 18px Arial, Verdana;}

    p.myClass:hover{ color:Red;}

</style>

<p>Paragraph Content</p>

<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 a <span> element, by default, it will not adhere to your height property, but if you try to set height for a <div> element it will adhere to the height property.

<style type="text/css">

    #myDiv { height: 50%; /* use %, exact pixel size, or auto */width: 75%;border: #59ACFF 1px solid;background: #CCE6FF;padding: 12px; color:Green;}

</style>

<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.

<style type="text/css">

    p.class1 { letter-spacing: 0.3em;}

    p.class1:hover{ color:Red;}

    p.class2 { letter-spacing: 4px;}

    p.class2:hover{ color:Green;}

</style>

<p class="class1">Sonia</p>

<p class="class2">Sonia</p>

<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.

<style type="text/css">

    p.class1 { line-height: 2.5em; color:Red;}

    p.class2 { line-height: 50px; color:Green;}

    p.class3 { line-height: 300%; color:Blue;}

</style>

<p>Sonia <br /> and more <br /> and more</p>

<hr />

<p class="class1">Sonia <br /> and more <br /> and more</p>

<hr />

<p class="class2">Sonia <br /> and more <br /> and more</p>

<hr />

<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.

<style type="text/css">

    #list1 { list-style-position: outside;}

    #list2 { list-style-position: inside;}

</style>

<ul id="list1">

  <li>My list item</li>

  <li>Another list item</li>

  <li>Final list item</li>

</ul>

<ul id="list2">

  <li>My list item</li>

  <li>Another list item</li>

  <li>Final list item</li>

</ul>

<ul id="list3">

  <li>My list item</li>

  <li>Another list item</li>

  <li>Final list item</li>

</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.

<!DOCTYPE html>

<html>

<head>

<style>

    ul.a {list-style-type:circle;}

    ul.b {list-style-type:square;}

    ol.c {list-style-type:upper-roman;}

    ol.d {list-style-type:lower-alpha;}

</style>

</head>

 

<body>

<p>Example of unordered lists:</p>

 

<ul class="a">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Coca Cola</li>

</ul>

 

<ul class="b">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Coca Cola</li>

</ul>

 

<p>Example of ordered lists:</p>

 

<ol class="c">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Coca Cola</li>

</ol>

 

<ol class="d">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Coca Cola</li>

</ol>

 

</body>

</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.

<style type="text/css">

    #list1 { list-style: inside circle; color:red;}

    #list2 { list-style: outside upper-roman; color:Green;}

</style>

<ol id="list1">

  <li>list item</li>

  <li>list item</li>

  <li>list item</li>

</ol>

<ol id="list2">

  <li>list item</li>

  <li>list item</li>

  <li>list item</li>

</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.

<style type="text/css">

    #myDiv { margin-top: 50px;}

    .divClass { background:#DFEFFF; border:#5BADFF 1px solid; padding:10px; }

</style>

<div class="divClass">Sonia</div>

<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.

<style type="text/css">

    #myDiv{ margin-right: 50%;}

    .divClass{ background:#DFEFFF; border:#5BADFF 1px solid; padding:10px; color:Red; }

    .divClass:hover{ color:Green;}

</style>

<div class="divClass">Sonia</div>

<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.

<style type="text/css">

    #myDiv { margin-bottom: 50px;}

    .divClass { background:#DFEFFF; border:#5BADFF 1px solid; padding:10px; color:green; }

    .divClass:hover{ color:Red;}

</style>

<div class="divClass" id="myDiv">Sonia</div>

<div class="divClass">Sonia</div>

<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.

<style type="text/css">

    .class1 { margin-left: 20px; color:Red;}

    .class2 { margin-left: 20%; color:Green;}

</style>

<p>Sonia</p>

<p class="class1">Sonia</p>

<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.

<style type="text/css">

    #div1 { margin: 30px 50% 20px 20%; color:Red; /* top right bottom left */}

    #div2 { margin: 10px 25% 20px 20%; color:Green;/* top right bottom left */}

    .divClass { background:#DFEFFF; border:#5BADFF 1px solid; padding:10px; }

</style>

<div id="div1" class="divClass">Sonia</div>

<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.

<style type="text/css">

    #div1 { padding-top: 40px;background:#DFEFFF;border:#5BADFF 1px solid; color:red;}

</style>

<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 right inner cushion space inside elements.

<style type="text/css">

    #div1 { padding-right: 80px;background:#DFEFFF;border:green 1px solid; color:red;}

</style>

<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.

<style type="text/css">

    #div1 { padding-bottom: 50px;background: #DFEFFF;border: #5BADFF 1px solid; color:Red;}

</style>

<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.

<style type="text/css">

    #div1 { padding-left: 50%;background: #DFEFFF;border: #5BADFF 1px solid; color:Red;}

</style>

<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.

<style type="text/css">

    #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;}

    #div1 p{ background: #FFF; border: #999 2px dashed; color:green;}

</style>

<div id="div1">

  <p>child of div1... Sonia ...</p>

</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.

<style type="text/css">

    p{ color:green;}

    #p1{ text-align: center; color:Red;}

    #p2{ text-align: right; color:green;}

</style>

<p>Sonia ...</p>

<p id="p1">Sonia ...</p>

<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.

<style type="text/css">

    #p1{ text-decoration: overline; color:Red;}

    #p2{ text-decoration: line-through; color:green;}

    #p3{ text-decoration: underline; color:Blue;}

</style>

<p id="p1">Sonia ...</p>

<p id="p2">Sonia ...</p>

<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.

<style type="text/css">

    #p1{ text-indent: 50px; color:Red;}

    #p2{ text-indent: 10%; color:green;}

</style>

<p id="p1">Sonia ...<br /> Sonia ...</p>

<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.

<style type="text/css">

    #p1{ text-transform: uppercase; color:Red;}

    #p2{ text-transform: lowercase; color:Green;}

    #p3{ text-transform: capitalize; color:Blue;}

</style>

<p id="p1">sonia soNIA ...</p>

<p id="p2">sonia soNIA ...</p>

<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.

<style type="text/css">

    #div1 span { vertical-align: sub; color:Red; }

    #div2 span { vertical-align: super; color:Green; }

    #div3 span { vertical-align: 25%; color:Red; }

    #div4 span { vertical-align: 25px; color:green;}

    .divClass { line-height:2em; background-color:#DFEFFF; border:maroon 1px solid; height:50px;}

</style>

<div id="div1" class="divClass">

  WE <span>LOVE</span> CSS

</div>

<hr />

<div id="div2" class="divClass">

  WE <span>LOVE</span> CSS

</div>

<hr />

<div id="div3" class="divClass">

  WE <span>LOVE</span> CSS

</div>

<hr />

<div id="div4" class="divClass">

  WE <span>LOVE</span> CSS

</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.

<!DOCTYPE html>

<style type="text/css">

    #div1 { white-space: normal; color:red; }

    #div2 { white-space: nowrap; color:red;  }

    #div3 { white-space: pre-line; color:red;  }

    .divClass { line-height:2em; background: #C1E0FF; border:#09F 1px solid; height:50px; }

</style>

<div id="div1" class="divClass">

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.

</div>

<hr />

<div id="div2" class="divClass">

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.

</div>

<hr />

<div id="div3" class="divClass">

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.

</div


white-space-property-in-html.png

Possible Values:

normal
Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary. This is the default.

nowrap
Sequences of whitespace will collapse into a single whitespace. 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. 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. Text will wrap when necessary, and on line breaks.

pre-wrap
Whitespace is preserved by the browser. Text will wrap when necessary, and on line 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 a <span> element then by default it will not adhere to your width property, but if you try to set the width for a <div> element or paragraph element it will adhere to the width property.

<style type="text/css">

    #div1{ width:400px; color:Red; }

    #div2{ width:50%; color:Green; }

    #div3{ width:auto; color:Red; }

    .divClass{ height:50px; background: #C1E0FF; border:#09F 1px solid; }

</style>

<div id="div1" class="divClass">Sonia ...</div>

<div id="div2" class="divClass">Sonia ...</div>

<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.

<style type="text/css">

    p.class1 { word-spacing: 0.8em; color:Red;}

    p.class2 { word-spacing: 12px; color:Red;}

</style>

<p>Here is some content ...</p>

<p class="class1">Here is some content ...</p>

<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.

COMMENT USING