9.9.13

CSS Background Image Repeat X Y

Background Image Repeat X Y

Use image as background
Syntax:
Selector{Property:url(image.gif/jpg)

The background image is placed according to the background-position property. If no background-position is specified, the image is always placed at the element’s top left corner.
A background image can be repeated vertically (y), horizontally (x), in both directions, or in neither direction.

Example: 1

<html>
<head>
<style type="text/css">
body
{

background-image:url(Background.jpg)

}
</style>
</head>
<body>
</body>
</html>

Another Way:

.background
{
background-image:url(Background.jpg)
}

</style>
</head>

</body>
</html>

Whole background is filled with the image Background.jpg.

Use background image as vertically
[repeat-y]
The repeat-y value will repeat the image vertically.
Repeat a background-image only vertically:

Example: 2

<html>
<head>
<style type="text/css">
body
{

background-image:url(Background.jpg);
background-repeat:repeat-y;

}
</style>
</head>
<body>
</body>
</html>

Another Way:

.background
{
background-image:url(Background.jpg);
background-repeat:repeat-y;
}

</style>
</head>

</body>
</html>

The background is filled by vertically the image Background.jpg.

Example: 3

<html>
<head>
<style type="text/css">
body
{

background-image:url(Background.jpg);
background-repeat:repeat-y;
background-position: center;

}
</style>
</head>
<body>
</body>
</html>

Another Way:

.background
{
background-image:url(Background.jpg);
background-repeat:repeat-y;
background-position: center;
}

</style>
</head>

</body>
</html>

Image Background.jpg will be tiled vertically in the background in the center of the page.

Use background image as horizontally
[repeat-x]
The repeat-x value will repeat the image horizontally.
Repeat a background-image only horizontally:

Example: 4

<html>
<head>
<style type="text/css">
body
{

background-image:url(Background.jpg);
background-repeat:repeat-x;

}
</style>
</head>
<body>
</body>
</html>

Another Way:

.background
{
background-image:url(Background.jpg);
background-repeat:repeat-x;
}

</style>
</head>

</body>
</html>

The background is filled by horizontally the image Background.jpg.

Use background image as single view
[no-repeat]

Example: 5

<html>
<head>
<style type="text/css">
body
{

background-image:url(Background.jpg);
background-repeat:no-repeat;

}
</style>
</head>
<body>
</body>
</html>

Another Way:

.background
{
background-image:url(Background.jpg);
background-repeat:no-repeat;
}

</style>
</head>

</body>
</html>

The background-image will not be repeated this time.

Background Color Code

Background Color

Use Color as background
Syntax:
background-color: <value>
The background-color property sets the background color of an element.

Example: 1

<html>
<head>
<style type="text/css">
body
{

background-color:#1078E1;

}
</style>
</head>
<body>
</body>
</html>

Another Way:

<html>
<head>
<style type="text/css">
.background

{
background-color:#1078E1;
}

</style>
</head>

</body>
</html>

Output

Whole background is filled with the #1078E1 color.

Example: 2

h4 { background-color:#009999;}
p { background-color:#A0A0A0; }

</style>
</head>
<body>

<h4>This is a heading.</h4>
<p>This is a paragraph.</p>

</body>
</html>

Output

This is a heading.

This is a paragraph.

Class Selector

1.ID = A person's Identification (ID) is unique to one person.
Class = There are many people in a class.

2.Sometimes it is often confuse to use CSS IDs and CSS Classes in appropriate place.

3.Use IDs when there is only one occurrence per page. Use classes when there are one or more occurences per page.

4.The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.

5.This allows you to set a particular style for any HTML elements with the same class.

6.The class selector uses the HTML class attribute, and is defined with a "."
To add an extension to the CSS code and make sure to specify this extension in HTML.

Example: 1

.center

             {
              text-align:center;
             }
       </style>
</head>
<body>

<h1 class="center">Center-aligned heading</h1>

<p>This is a normal paragraph.</p>

<p class="center"> This is a paragraph that uses the p.center CSS code.</p>

</body>
</html>

Output

Center-aligned heading

This is a normal paragraph.

This is a paragraph that uses the p.center CSS code.

Example: 2

p.center

{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>

<p class="center">This paragraph will be center-aligned.</p>

</body>
</html>

Output

This heading will not be affected

This paragraph will be center-aligned.

Example: 3

p.one

{
border-style:solid;
border-color:red;
}

p.two

{
border-style:solid;
border-color:#98bf21;
}
</style>
</head>
<body>

<p class="one">A solid red border</p>
<p class="two">A solid green border</p>

<p><b>Note:</b> The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>
</body>
</html>

Output

A solid red border

A solid green border

Note: The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.

Example: 4

.mystyle

                 {
                   color: red;
                   background-color: blue;
                 }
</style>
</head>
<body>

<font class=mystyle> hello every body </font>

<br />

<a href="index.php" class=mystyle>click me </a>

</body>
</html>

Output

hello every body
click me

Example: 5

           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>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Example of ordered lists:</p>

<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>

Output

Example of unordered lists:

Coffee
Tea
Coca Cola

Coffee
Tea
Coca Cola

Example of ordered lists:

Coffee
Tea
Coca Cola

Coffee
Tea
Coca Cola

CSS ID Selector Example

CSS ID Selector

1.ID = A person's Identification (ID) is unique to one person.
Class = There are many people in a class.

2.Sometimes it is often confuse to use CSS IDs and CSS Classes in appropriate place.

3.Use IDs when there is only one occurrence per page. Use classes when there are one or more occurrences per page.

4.We can use ID in that sense, there are usually only one menu per page, one banner, and usually only one content pane.

5.An "id" is a unique identifier.

6.Each time the attribute of ID is used in a document it must have a different value.

7.The id selector uses the id attribute of the HTML element, and is defined with a "#" symbol.

Example: 1

<html>
<head>
<style type="text/css">
#right{text-align:right}
#center{text-align:center}
</style>
</head>
<body>
<p id="right">This paragraph will right aligned.</p>
<p id="center">This paragraph will center aligned.</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>

Output

This paragraph will right aligned.

This paragraph will center aligned.

This paragraph is not affected by the style.

Example: 2

<html>
<head>
<style type="text/css">
P#right{text-align:right}
P#center{text-align:center}
</style>
</head>
<body>
<p id="right">This paragraph will right aligned.</p>
<p id="center">This paragraph will center aligned.</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>

Output

This paragraph will right aligned.

This paragraph will center aligned.

This paragraph is not affected by the style.

Pseudo Elements Tutorial

CSS Pseudo Element

CSS pseudo-elements are used to apply special effects to selectors that we want.

The first-letter pseudo element styles the first letter of paragraph or block.

Example

Output

I have a clear goal in life.Every day I am striving to get closer to it.

I enjoy joy and sorrow equally. My life is more colorful.

First letter of the every paragraph apply the above CSS style

Text Decoration Options

CSS Text Decoration Options

The text-decoration property defines effects on text such as underline, overline, line-through, no underline, and blink.
text-decoration Syntax:
text-decoration: { { blink | line-through | overline | underline } … | none | inherit }

none
This value produces no text decoration, no special decorations.
It is usually used to remove underline for link text.

underline
This value draws a horizontal line below the text. i.e. Underlines the text.

overline
This value draws a horizontal line above the text. i.e. Puts a line above the text.

line-through
This value draws a horizontal line through the text. i.e. Puts a line through the middle of the text.

blink
Makes the text blink.
N.B.: blink may not work without Mozilla Firefox.

inherit
The element should have the same text-decoration setting as the parent.

Example

</head>
<body>

<div class="overline">This is overline.</div>
<div class="line-through">This is line-through.</div>
<div class="underline">This is underline.</div>
<div class="blink">This is blink.</div>
<a href="http://google.com"> This link is not underlined.</a>

</body>
</html>

Output

This is overline.

This is line-through.

This is underline.

This is blink.

This link is not underlined.

Position Absolute Relative Difference

Position(Absolute and Relative)

Position Absolute Relative

There are two point of origin in CSS positioning:
Absolute and Relative.

Absolute position is determined from very top left of the browser.

Example: 1

              h2 {
                   position: absolute;
                   top: 20px;//20 pixels down from the top
                   left: 50px;//50 pixels right from the left
                }
               p {
                  position: absolute;
                  top: 50px;//50 pixels down from the top
                  left: 100px;//100 pixels right from the left
                }

          </style>
</head>
<body>
         <h2>This is absolute, different position </h2>
         <p>This is absolute, different position </p>
</body>
</html>

Output

This is absolute, same co-ordinate

This is absolute, same co-ordinate

If we place two elements in the same location, i.e. same co-ordinate, elements will be overlapped. Lets see following example:

Example: 2

              h2 {
                   position: absolute;
                   top: 20px;//20 pixels down from the top
                   left: 50px;//50 pixels right from the left
                }
               p {
                  position: absolute;
                  top: 20px;//20 pixels down from the top
                  left: 50px;//50 pixels right from the left
                }

          </style>
</head>
<body>
         <h2>This is absolute, same co-ordinate </h2>
         <p>This is absolute, same co-ordinate </p>
</body>
</html>

Output

This is absolute, same co-ordinate

This is absolute, same co-ordinate

Absolute positioning says "I am going to give you complete control over where place your element, I don't care if any other elements is in my place, I don't care any other text in my way. If is it, I overlap, I only care myself.

In this case, we have to apply “relative” attribute.
Relative position is determined from elements current position of the browser.

Example: 3

              h2 {
                   position: absolute;
                   top: 20px;//20 pixels down from the top
                   left: 50px;//50 pixels right from the left
                }
               p {
                  position: relative;
                  top: 20px;//20 pixels down from the top
                  left: 50px;//50 pixels right from the left
                }

          </style>
</head>
<body>
         <h2>This is absolute, same co-ordinate </h2>
         <p>This is relative, same co-ordinate </p>
</body>
</html>

Output

This is absolute, same co-ordinate

This is absolute, same co-ordinate

Now the text move away where I want.

Box Model

CSS Box Model

Box
A model box has four elements-
1.Margin
2.Border
3.Padding
4.Content

We will create a box that will contain following properties:
width: 300px;
padding:10px;
border:5px solid gray;
margin:20px

Total width Size=300+(10+10)+(5+5)+(20+20)=370px
width: 300px
10px Padding (left+right)
5px Boder(left+right)
20px Margin(left+right)
= 370px

Let's see an example.

Example: 1

p{
width: 300px;
padding:10px;
border:5px outset red;
margin:20px;
}

</style>
</head>
<body>
<p> This box’s total width is 370px.</p>
</body>
</html>

Output

This box’s total width is 370px.

We can create similar box using <div> tag.

Example: 2

div.model-box
{
width: 300px;
padding:10px;
border:5px outset red;
margin:20px;
}

</style>
</head>
<body>
<div class="model-box">This box’s total width is 370px.</div>
</body>
</html>

Output

This box’s total width is 370px.

Child Selector

CSS Child Selector

A child selector in HTML is a tag that inside another tag make relation.

In this example, <head> is child of <html>, so <html> would be parent and <head> would be child.
<body> is also child of <html>, since <body> is inside of <html>.
<style> is a child of <head>, since <style> is inside of <head>. <style> is child, <head> is parent.
If <head> is child of <html>, <style> is grand child of <html>. <html> is grand parent of <style>.

Example: 1

</head>
<body>
<p> I am here to fulfill a noble mission. I will welcome death only after my mission is fulfilled.</p>

<p> <a href="http://aspell.org">The greatest hero is the one who has established mastery over his own animal instincts.<br />
I will keep my animal desires under control.</a></p>

<p> The enlightened never impose, they always inspire. I will also inspire others to share my beliefs and ideals.</p>
</body>
</html>

Output

I am here to fulfill a noble mission. I will welcome death only after my mission is fulfilled.

The greatest hero is the one who has established mastery over his own animal instincts.
I will keep my animal desires under control.

The enlightened never impose, they always inspire. I will also inspire others to share my beliefs and ideals.

All link types, inside paragraph, the above style is applied.

Button Tutorial

CSS Button Style

In the following example, we create a border. Inside that border, we assign various properties so that borders look like buttons.

Example: 1

.button
{
border: 1px inset #cccccc;
color: #ffffff;
background-color: #014db7;
font-family:Comic Sans MS;
font-size: 15px;
font-weight: bold;
text-decoration: none;
}

</style>
</head>
<body>
<div align="center">
<h2>CSS Button</h2>

<a href="#" class="button">Home</a>
<a href="#" class="button">HTML</a>
<a href="#" class="button">Contact</a>

</div>
</body>
</html>

Output

CSS Button

Home HTML Contact

If we add hover, it will be more clear to us.

Example: 2

<html>
<head>
<style>
.button
{
border: 1px inset #cccccc;
color: #ffffff;
background-color: #0066ff;
font-family:arial;
font-size: 20px;
font-weight: bold;
text-decoration: none;
}

a.button:link{
color: #ffffff;
}
a.button:visited{
color: #cccccc;
}
a.button:hover{
color: #66cc33;
border: 1px outset #00ff00;
}

</style>
</head>
<body>
<div align="center">
<h2>Sample CSS Button</h2>

<a href="index.htm" class="button">Home</a>
<a href="gallery.htm" class="button">Gallery</a>
<a href="contact.htm" class="button">Contact</a>

</div>
</body>
</html>

Output

Sample CSS Button

Home HTML Contact

Mouse Cursor Hover Types

CSS Cursor Types

default - Mouse Pointer will show like Default sign.
wait - Mouse Pointer will show like circle or hourglass.
crosshair - Mouse Pointer will show like gun-style cross.
text - Mouse Pointer will show like an "I" shaped icon.
pointer - Mouse Pointer will show like hand icon.
help - Mouse Pointer will show like an arrow with a question mark.

Example: 1(default)

<html>
<head>
<style type="text/css">
.cursor-type{cursor: default; }
</style>
</head>
<body>
<p class="cursor-type">Default(Mouse Pointer will show like Default sign)</p>
</body>
</html>

Output

Default(Mouse Pointer will show like Default sign)

Example: 2(wait)

<html>
<head>
<style type="text/css">
.cursor-type{ cursor: wait; }
</style>
</head>
<body>
<p id="circle">Circle(Mouse Pointer will show like Circle sign)</p>
</body>
</html>

Output

Circle(Mouse Pointer will show like Circle sign)

Example: 3(crosshair)

<html>
<head>
<style type="text/css">
.cursor-type{cursor: crosshair; }
</style>
</head>
<body>
<p class="cursor-type"> crosshair (Mouse Pointer will show like gun-style cross.)</p>
</body>
</html>

Output

crosshair (Mouse Pointer will show like gun-style cross.)

Example: 4(text)

<html>
<head>
<style type="text/css">
.cursor-type{cursor: text;}
</style>
</head>
<body>
<p class="cursor-type">text (Mouse Pointer will show like Text sign.)</p>
</body>
</html>

Output

text (Mouse Pointer will show like an "I" shaped icon.)

Example: 5(pointer)

<html>
<head>
<style type="text/css">
.cursor-type{ cursor: pointer;}
</style>
</head>
<body>
<p class="cursor-type"> pointer(Mouse Pointer will show like hand icon.)</p>
</body>
</html>

Output

pointer(Mouse Pointer will show like hand icon.)

Example: 6(help)

<html>
<head>
<style type="text/css">
.cursor-type{ cursor: help;}
</style>
</head>
<body>
<p class="cursor-type"> help(Mouse Pointer will show like an arrow with a question mark.)</p>
</body>
</html>

Output

help(Mouse Pointer will show like an arrow with a question mark.)

Padding

CSS Padding

Padding is inside the border.
CSS padding is the space between an element's border and the content within it.
Margin is outside the border.

Example: 1

<html>
<head>
           <style type ="text/css">
                p
                 {
                   Background-color: red;
                   color: blue;
            }
           </style>
</head>
<body>
<p> Lord, I am your slave. Your wish is my wish. Let my life reflect your wishes only.</p>
</body>
</html>

Output

Lord, I am your slave. Your wish is my wish. Let my life reflect your wishes only.

We see from the output that we have a context and we don’t have space between the edge of background color red(border) and text.
If we want to space between border edge and text, we can add padding attribute. Lets see above example adding padding attribute.

Example: 2

<html>
<head>
           <style type ="text/css">
                p
                 {
                   background-color: red;
                   color: blue;
                  padding : 30px;

               }
           </style>
</head>
<body>
<p> Lord, I am your slave. Your wish is my wish. Let my life reflect your wishes only.</p>
</body>
</html>

Output

Lord, I am your slave. Your wish is my wish. Let my life reflect your wishes only.

Now we have space between our text and the edge of our border. 30 pixels of right, 30 pixels of top,30 pixels of bottom and 30 pixels of right even though there is over 100 pixels. 30 pixels are padding all around the border.

Difference between margin and padding

Height Width Style

Class Height Width

By default, our browsers set the height of the element equal to the height of the text and also set width of the element equal to the width of the browser's screen.
Lets see and example.

Example: 1

<html>
<head>
           <style type ="text/css">
                .center
             {
                   Background-color: red;
                   color: blue;
             }
       </style>
</head>
<body>
<p>This is a normal paragraph.</p>
<p class="center"> This is a paragraph that uses the CSS code.</p>
</body>
</html>

Output

This is a normal paragraph.

This is a paragraph that uses the CSS code.

But, width of the element is not equal to the background color.
We have to set width and height explicitly.
Lets set only width 400 pixels to the element <p>.

Example: 2

<html>
<head>
           <style type ="text/css">
        .center
                 {
                   Background-color: red;
                   color: blue;
                   width: 250px;
                 }
           </style>
</head>
<body>
<p>This is a normal paragraph.</p>
<p class="center"> This is a paragraph that uses the CSS code.</p>
</body>
</html>

Output

This is a normal paragraph.

This is a paragraph that uses the CSS code.

Now, width of the element is equal to the background color.
If we want to large our background , then we have to set height attribute.
Lets set height 100 pixels and width 250 pixels to the element <p>.

Example: 3

<html>
<head>
           <style type ="text/css">
                .center
                 {
                   Background-color: red;
                   color: blue;
                   width: 250px;
                   height: 100px;
               }
           </style>
</head>
<body>
<p>This is a normal paragraph.</p>
<p class="center"> This is a paragraph that uses the CSS code.</p>
</body>
</html>

Output

This is a normal paragraph.

This is a paragraph that uses the CSS code.

Margin

CSS Margin

Padding is inside the border.
Margin is outside the border.
Margin: Space around each of the paragraph.
Without margin, lets see an example.

Example without Margin

<html>
<head>

<style type=”text/css”>
p { background-color:blue;
color:white; }
</style>

</head>
<body>

<p>In life I will be the refuge of millions. In death they will say goodbye with tears. As a source of everlasting inspiration, I will live in the joy, sorrow, problems and promises of successive generations.</p>

<p>I am an inseparable part of eternal life. My life is a profound journey for fulfilling a noble mission. I do all my work joyfully and enthusiastically. Every task brings deep satisfaction.</p>

</body>
</html>

Output

I am an inseparable part of eternal life. My life is a profound journey for fulfilling a noble mission. I do all my work joyfully and enthusiastically. Every task brings deep satisfaction.

Example with margin = 0 pixel

<html>
<head>
<style type="text/css">
p { background-color:blue;
color:white;
margin: 0px;}
</style>

</head>
<body>

<p>In life I will be the refuge of millions. In death they will say goodbye with tears. As a source of everlasting inspiration, I will live in the joy, sorrow, problems and promises of successive generations.</p>

<p>I am an inseparable part of eternal life. My life is a profound journey for fulfilling a noble mission. I do all my work joyfully and enthusiastically. Every task brings deep satisfaction.</p>

</body>
</html>

Output

I am an inseparable part of eternal life. My life is a profound journey for fulfilling a noble mission. I do all my work joyfully and enthusiastically. Every task brings deep satisfaction.

Setting margin = 30 pixels, allows space from all sides from content box.

Example with margin = 30 pixels

<html>
<head>
<style type="text/css">
p { background-color:blue;
color:white;
margin: 30px ;}
</style>

</head>
<body>

<p>In life I will be the refuge of millions. In death they will say goodbye with tears. As a source of everlasting inspiration, I will live in the joy, sorrow, problems and promises of successive generations.</p>

<p>I am an inseparable part of eternal life. My life is a profound journey for fulfilling a noble mission. I do all my work joyfully and enthusiastically. Every task brings deep satisfaction.</p>

</body>
</html>

Output

I am an inseparable part of eternal life. My life is a profound journey for fulfilling a noble mission. I do all my work joyfully and enthusiastically. Every task brings deep satisfaction.

Now each of our paragraphs is 30 pixels surrounding in.
The padding does not change. The padding in the border remains same.

Now we will see what happen exactly with margin attribute.

Example with all margin properties

<html>
<head>
<style type="text/css">
p { background-color:blue;
     color:white;
     margin-left: 10px ;
     margin-bottom: 70px ;
    margin-right: 40px ;
    margin-top: 30px ;}
</style>

</head>
<body>

<p>In life I will be the refuge of millions. In death they will say goodbye with tears. As a source of everlasting inspiration, I will live in the joy, sorrow, problems and promises of successive generations.</p>

<p>I am an inseparable part of eternal life. My life is a profound journey for fulfilling a noble mission. I do all my work joyfully and enthusiastically. Every task brings deep satisfaction.</p>

</body>
</html>

Output

I am an inseparable part of eternal life. My life is a profound journey for fulfilling a noble mission. I do all my work joyfully and enthusiastically. Every task brings deep satisfaction.

Example with border

<html>
<head>
<style type="text/css">
div { border: 2px solid black;}
.side { background-color:blue;
             color:white;
            margin-left: 20px ;
            margin-bottom: 70px ;
            margin-right: 40px ;
            margin-top: 30px ;}
</style>
</head>
<body>
<div style="width: 200px; height:300px;"}
<div class="side">
<p>In life I will be the refuge of millions. In death they will say goodbye with tears. As a source of everlasting inspiration,
I will live in the joy, sorrow, problems and promises of successive generations.</p>
<p>I am an inseparable part of eternal life. My life is a profound
journey for fulfilling a noble mission. I do all my work joyfully and enthusiastically. Every task brings deep satisfaction.</p>
</div>
</div>
</body>
</html>

Output

In life I will be the refuge of millions. In death they will say goodbye with tears. As a source of everlasting inspiration, I will live in the joy, sorrow, problems and promises of successive generations.
I am an inseparable part of eternal life. My life is a profound journey for fulfilling a noble mission. I do all my work joyfully and enthusiastically. Every task brings deep satisfaction.

CSS Margin

Display inline VS block

CSS Display:inline VS block

display:inline

This is default.
The element will be displayed inline, inside the current block on the same line.
An inline element has no line break before or after the element.

Example

li
{
display:inline;
list-style-type:none;
}

</style>
</head>
<body>
<ul>

<li><a href="#">CCNA</a></li>
<li><a href="#">Subnet</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">PHP</a></li>

</ul>
</body>
</html>

Output

CCNA Subnet JavaScript PHP

display:block

The element will be displayed as a block like paragraphs and headers.
Block element uses the total width and create a break before or after the element.

Example

li
{
display:block;
list-style-type:none;
}

</style>
</head>
<body>
<ul>

<li><a href="#">CCNA</a></li>
<li><a href="#">Subnet</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">PHP</a></li>

</ul>
</body>
</html>

Output

CCNA
Subnet
JavaScript
PHP

Display none vs Visibility hidden

Display:none
Display:none means no blank space.
The element will not be displayed at all to the browser.

Example: 1

p.none
{
display:none;
}

</style>
</head>
<body>
<p>1.This is a paragraph.</p>

<p class="none">2.This is a paragraph.</p>

<p>3.This is a paragraph.</p>
</body>
</html>

Output

1.This is a paragraph.

2.This is a paragraph.

3.This is a paragraph.

Visibility:hidden
Visibility:hidden means blank space.

Example: 2

p.hidden
{
visibility:hidden;
}

</style>
</head>
<body>
<p>1.This is a paragraph.</p>

<p class="hidden">2.This is a paragraph.</p>

<p>3.This is a paragraph.</p>
</body>
</html>

Output

1.This is a paragraph.

3.This is a paragraph.

Border Style Example

Border Style

The default border-style setting for an element is hidden.
Border style’s values:
1.none
2.hidden
3.dotted
4.dashed
5.solid
6.double
7.groove
8.ridge
9.inset
10.outset

1.border-style:none -No border
2.border-style:hidden -Border will be hidden.
3.border-style:dotted -Border will be dotted.
4.border-style:dashed -Border will be dash dash.
5.border-style:solid -Border will be solid color.
6.border-style:double -Border will be double.
7.border-style:groove -groove means 3d ambus with
background color.
8.border-style:ridge -Opposition of groove.
9.border-style:inset -Looks like in side of background.
10.border-style:outset -Opposition of inset.

Example

<html>
<head>
<style type="text/css">
p.none{border-style:none;}
p.dotted{border-style:dotted;}
p.dashed{border-style:dashed;}
p.solid{border-style:solid;}
p.double{border-style:double;}
p.groove{border-style:groove;}
p.ridge{border-style:ridge;}
p.inset{border-style:inset;}
p.outset{border-style:outset;}
p.hidden{border-style:hidden;}
</style>
</head>
<body>
<p class="none">This is Border Style: <b>none</b></p>
<p class="dotted">This is Border Style: <b>dotted</b></p>
<p class="dashed">This is Border Style: <b>dashed</b></p>
<p class="solid">This is Border Style: <b>solid</b></p>
<p class="double">This is Border Style: <b>double</b></p>
<p class="groove">This is Border Style: <b>groove</b></p>
<p class="ridge">This is Border Style: <b>ridge</b></p>
<p class="inset">This is Border Style: <b>inset</b></p>
<p class="outset">This is Border Style: <b>outset</b></p>
<p class="hidden">This is Border Style: <b>hidden</b></p>
</body>
</html>

Output

This is Border Style: none

This is Border Style: dotted

This is Border Style: dashed

This is Border Style: solid

This is Border Style: double

This is Border Style: groove

This is Border Style: ridge

This is Border Style: inset

This is Border Style: outset

Border Bottom With Class

The "border-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.

Example: 1

p.one
{
border-color: blue;
border-style: thick;;
border-width:5px;
}
p.two
{
border-color: red;
border-style:inset;
border-width: medium;
}
p.three
{
border-color: green;
border-style:outset;
border-width:thin;
}
p.four
{
border-color: #006699;
border-style:ridge;
border-width:3px;

}

</style>
</head>
<body>
<p class="one">Class One-Some text.</p>
<p class="two">Class Two-Some text.</p>
<p class="three">Class Three-Some text.</p>
<p class="four">Class Four-Some text.</p>
</body>
</html>

Output

Class One-Some text.

Class Two-Some text.

Class Three-Some text.

Class Four-Some text.

Note: The "border-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.

you can compile many properties into one using border. Let us take a look at an example:
p {border-width: 1px; border-style: solid; border-color: blue;}
Can be compiled into:
p{border: 1px solid blue; }
Let see the same example:

Example: 2

p.one{border: 5px solid blue;}
p.two{border: 5px inset red;}
p.three{border: 5px outset green;}
p.four{border: 3px ridge #006699;}

</style>
</head>
<body>
<p class="one">Class One-Some text.</p>
<p class="two">Class Two-Some text.</p>
<p class="three">Class Three-Some text.</p>
<p class="four">Class Four-Some text.</p>
</body>
</html>

Output

Class One-Some text.

Class Two-Some text.

Class Three-Some text.

Class Four-Some text.

Adscend

9.9.13

This is a heading.

Center-aligned heading

This heading will not be affected

This is absolute, same co-ordinate

This is absolute, same co-ordinate

This is absolute, same co-ordinate

CSS Button

Sample CSS Button