CSS Properties in HTML : Level-1

100

Article

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>

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

CSS color Property example

The CSS color property is used to specify the foreground color for the text inside your elements.

#p1{ color:#099;}

</style>

<p id="p1">This is my paragraph....</p>

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.

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

</style>

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

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.

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

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

</style>

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

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.

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>

CSS font-size Property example

The CSS font-size property is used to specify the size of text inside of elements.

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

CSS font-style Property

The CSS font-style property is used to specify italic or oblique font faces of text in an element.

#p1{ font-style: italic;}

</style>

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

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.

h2 { font-variant:small-caps;}

</style>

<h2>This is my section heading</h2>

CSS font-weight Property example

The CSS font-weight property is used to specify thickness of font.

.myClass { font-weight: 600;}

</style>

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

<p>paragraph content ...</p>

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.

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>

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.

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

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.

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>

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.

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>

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.

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

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

</style>

<li>Another list item</li>

<li>Final list item</li>

</ul>

<li>Another list item</li>

<li>Final list item</li>

</ul>

<li>Another list item</li>

<li>Final list item</li>

</ul>

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>

<li>Coffee</li>

</ul>

<li>Coffee</li>

</ul>

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

<li>Coffee</li>

</ol>

<li>Coffee</li>

</ol>

</body>

</html>

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.

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

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

</style>

</ol>

</ol>

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.

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

CSS margin-right Property example

The CSS margin-right property is used to create marginal space on the right side of elements.

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

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

CSS margin-left Property example

The CSS margin-left property is used to create marginal space on the left side of elements.

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

CSS margin Property example

The CSS margin property is CSS shorthand for specifying margin-top, margin-right, margin-bottom, and margin-left properties.

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

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

</style>

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

CSS padding-right Property example

The CSS padding-right property is used to create right inner cushion space inside elements.

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

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

</style>

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

CSS padding-left Property example

The CSS padding-left property is used to create left inner cushion space inside elements.

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

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

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

</div>

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.

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>

CSS text-decoration Property example

The CSS text-decoration property is used to add specific decorations to your text inside of elements.

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

CSS text-indent Property example

The CSS text-indent property is used to indent the first line of text inside of an element.

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

CSS text-transform Property example

The CSS text-transform property is used to control text capitalization and casing inside of an element.

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

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.

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

WE <span>LOVE</span> CSS

</div>

<hr />

WE <span>LOVE</span> CSS

</div>

<hr />

WE <span>LOVE</span> CSS

</div>

<hr />

WE <span>LOVE</span> CSS

</div>

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>

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

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>

<hr />

</div

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.

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

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.

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>