CSS Margin, Padding And Border Properties

Hi Friends
Today i am going to talk about the margin, padding and border. Where these properties used?, how to calculate margin and padding and why we use these properties. Margins and padding are essential for every web designer to understand it well. When you will style something with css there you will meet with these property so to now these property very clearly is important.Without knowing these properties well you can not code the layout properly.

Box Model:

Box model is used for understanding the concept of layout and using the margin, padding and border properties. Consider a box in which you add margin, padding and border how it looks like.

Margin:

The margin cover the outside area of an element. It has not background color it is transparent.

Margins can be change individually. If you want to change only one side margin you can use these properties. (margin-top, margin right, margin-bottom, margin-left).

Shorthand Margin :

You can you shorthand method to add the margin for all side at once.

Example 1:

margin: 20px;

for all four sides.

Example 2:

margin: 25px 15px 20 px 10px;

The first 25px is for the top margin, the second 15px is for the right margin, the third 20px is for bottom margin and the forth 10px is for the left margin.

Example 3:

margin: 20px 10px 5px;

The first 20px is for top-margin, the second 10px is for right and left margin and the last 5px is for bottom.

Example 4:

margin: 10px 5px;

The first 10px is for top and bottom margin and second 5px is for the right and left margin.

CSS Border:

With css  border property you can set up the border around an element. The border lie between the margin and padding of an element. You can set the width, border style and border color for the border by these properties(.border-width, border-style and border-color). You can set the border of all side individually (border-top, border-right, border-bottom, border-left).

Shorthand Border:

Yes you can use the short hand method for border.like this;

border: 3px solid blue;

In the above shorthand property 3px defines the width of border, solid defines the border-style and the final blue which defines the border color.

Padding:

Padding cover the space between the border and element or content. Padding is affected by background color. Padding can be changed individually if you want set the padding of one side you use these properties(padding-top, padding-right, padding-bottom, padding-left)

Shorthand Padding:

You can you shorthand method to add the Padding for all side at once.

Example 1:

padding: 20px;

for all four sides.

Example 2:

padding: 25px 15px 20 px 10px;

The first 25px is for the top padding, the second 15px is for the right padding, the third 20px is for bottom padding and the forth 10px is for the left padding.

Example 3:

padding: 20px 10px 5px;

The first 20px is for top-padding, the second 10px is for right and left padding and the last 5px is for bottom.

Example 4:

padding: 10px 5px;

The first 10px is for top and bottom padding and second 5px is for the right and left padding.

How To Calculate The Margin And Padding:

For width:

Consider box with the width of 360px , left-margin=10px and right-margin=10px and the left-padding=10px and right-padding=10px .

Formula for calculating width:

width of box + left-margin + right-margin + left-padding + right-padding = Total width of box

For Height:

Again consider box with the height of 200px , top-margin=10px and bottom-margin=10px and the top-padding=10px and bottom-padding=10px .

Formula for calculating Height:

height of box + top-margin + bottom-margin + top-padding + bottom-padding = Total height of box

Final words:

Now you have complete understanding of box model, margin, padding and border and how to use them.

keep practicing and don't forget to share our post with your friends.

Thanks For Reading

Read More...

How To Write Semantic HTML

Hi Friends
Today we are going to discuss about semantic html writting a semantic html is very useful for the webpage and website. the semantic html means to give the meanig to the content and using right tags in the webpage such as paragraph tag some people use paragraph tags use for creating space between text. it will not give meaning to your content html paragraph should be used only for paragraph another example for it the using of bold tag it is not semantic but we use strong tag instead of bold tag.
Also read this :
Text formatting in html.
Html Basi tags.
Top 5 css and html editor.

What is semantic html?

semantic markup or semantic html means to give the meaning to  you content to make your content meaningful.such as image, metadata tag has own content but the div and span have not content meaningful.

Usage Of Semantic Tags.

In semantic html we have give the meaning to our content by using right tags or elements. Such as many new webdesigner made mistakes during structuring the html.

Blockquote: bloackquote is html tag which is used to add quotations in the webpages but the people use it for indent text. Use it for quotation. For indent the text you can use css margins and indent-property(indent-text).

Ul: ul is the html tag for unordered list but the same people also use it for adding the indent to the text.

p: paragraph tag is used to define a paragraph but mostly people use it for creating space between text it is the wrong the method paragraph tag should be used for adding the paragraph.

h1 to h6: heading tags defines the heading. the heading tags should be only used for headlines or heading not for making text bold and bigger. For making text bold and bigger you should use the css font-size property and font-weight property.

Benefits of Using Semantic markup.

1. It is help to improve seo.
2. Easy to use.

List of Semantic tags:
For list of semantic tags click here:

Final words:
Now you can write the semantic html. Please friends share my post with your friends.
Thanks For Visiting

Read More...

Top 5 CSS And HTML Editor

Hi friends

Today I come with new thing. People are taking keen interest in web designing.  In the case when you write a long css and html you do lots of hard work but you made many mistake which are harmful for you so I bring some thing for you which can reduce you hard work, time and efforts and you can write clean and proper html and css. There are many html editors are available in the market with you can write the clean and proper html and css. Here I am going to describe some of the best html and css editor.

 ALSO READ:

CSS Position.

CSS Float Property.

ADOBE DREAMWEAVER

Adobe dream weaver is the most popular web development software. It is very best software to edit the document. In this software you can edit html, css, JavaScript, php and many others. It is very powerful tool the mostly developer use the dreamweaver.

Coffee Cup.

It is the one of my best html and css editor I am using it to edit the html and css document and believe me  it is very easy to use . You don’t need to learn eat you can use it very easily. You can manage project and mange your website through coffee cup.

Aptana studio

Aptana studio is interesting web development software you can manage you WebPages through it easily. It has colorful code and line numbering and quick button for browser.

NOTE PAD++

It is very simple best editor. It is the replacement of notepad it has many features such as syntax highlighting. Multi tab system and supported many languages. It is free you can download it from here.

Context

Context editor is updates from notepad ++ . you can open many tabs at time and great syntax highlighted for many programming languages and supported many languages.

Conclusion

Now you can choose best editor which you can use easily. Please share our post with your friend and don't forget share our post with your friends.

Read More...

How To Use CSS Position

Welcome friends!

As you know in the previous we discussed about the float what is float? And how to use them and solve other problems related to the float. You can contort the layout by the float property but there is another important property which is called css position. In this tutorial we are going to explore css positioning. Css positioning is another important property to controlling the layout.

What is css position?

Css position property is used to control the flow of elements in the webpage or position the element on the webpage. With the help of position property you can position the element on the page where you want.

Static position

In css position static is the default value it is not affected by the left, right, top, and bottom.

NOTE

To set up the position you must define the position property .

Example without using static position:

.box1{
width:150px;
height:150px;
background-color:#0000A0;
}

 .box2{
 width:150px;
height:150px;
background-color:#FF0000;
  }

  .box3{
  width:150px;
height:150px;
background-color:#00FF00;
   }

Example with using static position:

.box1{
position:static;
right:20px;
width:150px;
height:150px;
background-color:#0000A0;

 }
 .box2{
 position:static;
 top:10px;
 width:150px;
height:150px;
background-color:#FF0000;
  }
  .box3{
  position:static;
  left:100px;
   width:150px;
height:150px;
background-color:#00FF00;
   }

Now you can see there is no difference between using static position property or not and other thing is that it is not affected by the left, right, top and bottom.

RELATIVE POSITION

Css position relative behave like static position but it is affected by top, bottom, left and right but the static position is not affected by these properties.

                                                                                                         

EXAMPLE NO:1

.box1{
position:relative;
width:150px;
height:150px;
background-color:#0000A0;

 }
 .box2{
position:relative;
 width:150px;
height:200px;
background-color:#FF0000;
  }
  .box3{
  position:relative;
   width:150px;
height:150px;
background-color:#00FF00;

  }

In the above example you can see the relative position is behaving like static position.

EXAMPLE NO:2

.box1{
position:relative;
width:150px;
height:150px;
background-color:#0000A0;
}
 .box2{
position:relative;
left:200px;
 width:150px;
height:200px;
background-color:#FF0000;
  }
  .box3{
  position:relative;
   width:150px;
height:150px;
background-color:#00FF00;
   }

In the above example you can see how the second box is affect by the adding of left position property.

NOTE

In the relative positioning all element affected by it so while using relative position be careful. Absolute property is very useful to avoid these problems.

Css Absolute Position

Css position absolute is the best way of positioning element. With the absolute position you can place the where you want it does not affect the other element on the page that’s why this property of position is very useful.

EXAMPLE

.box1{
position:absolute;
top:0px;
left:200px;
width:150px;
height:150px;
background-color:#0000A0;
 }
 .box2{
width:150px;
height:200px;
background-color:#FF0000;
  }
  .box3{
width:150px;
height:150px;
background-color:#00FF00;
   }

In the above example you can observe that after adding the absolute position to the first box it is not affected other elements.

POSITION FIXED

Css position fixed is always stay at one place it moves with the scrolling of the page.

EXAMPLE

#topnav {
            background-color:#262626;
            width:100%;
            height:50px;
           position:fixed;
           top:0px;}

In the above screen shot you can see the navbar on the top which has fixed position.

Z-INDEX

This property very useful in some condition when you apply position to the element it overlap the other element to solve this problem we use z-index css property.

EXAMPLE before applying z-index

.box1{
position:absolute;
top:0px;
left:200px;
width:150px;
height:150px;
background-color:#0000A0;
}
 .box2{
position:absolute;
left:210px;
top:20px;
 width:150px;
height:200px;
background-color:#FF0000;
  }
  .box3{
 width:150px;
height:150px;
background-color:#00FF00;
   }

In the above example you can see how the boxes overlapping each other and now it is your wish which element you want in the front and the which one in the behind.

EXAMPLE after applying z-index

.box1{
position:absolute;
top:0px;
left:200px;
z-index:1;
width:150px;
height:150px;
background-color:#0000A0;

 }
 .box2{
position:absolute;
left:210px;
top:20px;
 width:150px;
height:200px;
background-color:#FF0000;
  }
  .box3{
width:150px;
height:150px;
background-color:#00FF00;
   }

CONCLUSION

After the understanding of positioning now you can design the beautiful layouts with the help of positioning.

Pleaser remember me in your prayer and share our post with your friends. Thanks!

Read More...

How To Use CSS Float Property.

Hi friends

As you know that our last post about css conflicts and today we are going to discuss about the float property which is used for designing layout. Before using float people try to create layout with html tables and frames but later the css property float which is now famous and use by designer to make the layout. With the help of float property you can easily design the layout but the problem is that if you don’t know it properly you have to face lots of problem. So today I am going to discuss the all those problem which relate to the floats.

ALSO READ:

Resolve CSS Conflicts.

HTML Image Tag And Link Tag.

CSS Selectors.

WHAT IS THE FLOAT?

Float is the property of css which is used to positioning the element on the webpage. It has four values left, right, none and inherit.

                                                                                                                       

Left to float the element on the left side.

Right to float the element on the right side.

None it is the default property. The element will not float.

Inherit the property inherited from the parent element.

ADVANTAGES OF FLOAT

The float property used to design layout.

It is used to the wrap text around the image.

It is used to positioning the element.

It is used to make columns.

EXAMPLE;

#para1{float:left;
width:200px;
margin:10px;
}#para2{float:left;
width:200px;
margin:10px;
}

CLEAR

It is the very helpful property to control the float. For example you make layout in which you add the float to the two element such as #content and #sidebar and footer move itself behind the these two elements. How to recover the float to its original position?

We use the clear property to recover the original position of elements.

For example

Example befor using clear property;

#container {
background-color:#C0C0C0;width:500px;
height:500px;
margin:10px;
float:left;
border:1px solid black;
}
#sidebar {
background-color:#C0C0C0;width:400px;
height;400px;
float:left;
margin:10px;
border: 1px solid black;
}
#footer {
background-color:#8E8E8E;
width:920px;
height:100px;
}

Example after using clear property;

#container {
background-color:#C0C0C0;width:500px;
height:500px;
margin:10px;
float:left;
border:1px solid black;
}
#sidebar {
background-color:#C0C0C0;width:400px;
height;400px;
float:left;
margin:10px;
border: 1px solid black;
}
#footer {
background-color:#8E8E8E;
width:920px;
height:100px;

clear:both; 

}

COLLAPSING;

When an element contain in parent element than you add the float to the child element then container element collapse itself. How to solve them there are many ways to solve these problems. Which we discuss below?

FIRST METHOD: TO ADD THE TAG.

By this method you have to add the empty div tag or other tag you cam add but empty div tag is better. After adding this the parent element automatically expand.

SECOND METHOD: TO ADD OVERFLOW PROPERTY:

In this method you have to add overflow property to the parent element. If you set the auto or hidden value to it the parent element automatically expand and contain float element.

THIRD METHOD: TO USE CLEAR PROPERTY;

In the third method we use the pseudo selector (:after) to solve the problem. We apply class to the element and clear the float property and you can also add the id to the element.

.clear:after{
 content: ".";
 display: block; height: 0;
 clear:both;
 visibility: hidden;} 

CONCLUSION;

You can style the layout with float property  and now you can face all the problems related the float.

Please remember in your prayers and don’t forget to share our post with you friends.THANKS!

Read More...

Resolving Conflicts In CSS

Hi friends!

Welcome back. Today I came with new topic which really help you a lot which about the css conflict. When you add style to the element but it does not apply on it why. You check it many times for bug but there is no bug in your code. There is concept of css which is conflict many people do not about these basic concepts. Today we talk about them and discuss how to use them.

CSS CONFLICTING;

Two are more styles are applied to the same element.

For example;

P{
Font-size:2em;
Color:red;
}
 P{
Font-size:1.8em;
Color:blue;
}

Now question is that which style applied to the element the answer is simple last one will win. The css contain of three basic concepts such as specificity, inheritance and cascade.

CASCADE;

The cascade rules depend upon the order of your css. The last property applied to the element.

For example;

Body{
Font-family:Helvetica;
 }
 P{
Font-family:Georgia;
}

In the above case all the paragraph change with Georgia font and the Helvetica don’t work on the paragraph because the order of css.

SPECIFICITY;

Specificity defines the rules applied to the element.

If the style does not apply to the element the reason is specificity.

If two selectors are applied to the same element the selector with high specificity wins.

If two selectors have equal specificity the last one wins.

For increasing specifity you can use id selector but the inline style has more specificity than the id selector but for the reason we prefer to the id selector for more specificity.

How to count specificity?

The counting specificity is very easy. The each id is equal to the 100,  the each attribute, class and pseudo-class is equal to the 10 and the each element is equal to the one  .

For example;

 P{
Font-size:1.5em;
Color:red;
}
.main p{
Font-size:2em;
Color:yellow;
}

In the above the example the paragraph with class will win because it has more specificity than the paragraph.

INHERITANCE;

For instance you add the properties to the body it inherited to all other properties which are present in the body such as heading tags, paragraph and other tags present in the body tag.

For example;

Body{
Font-family:Helvetica;
Font-size:1.5em;
}

The above properties applied to the all elements which are present in the body tag.

CONCLUSION;

Now you have understanding of the css conflict and how to use them and take fullest advantage of them. Remember in your prayers and don’t forget to share our post with your friends. THANKS

Read More...

CSS List Style And Link Style

As we discussed before in html tutorial that the links are the soul of the webpage.

WebPages are containing of links without links webpage is nothing. Links allow us to jump from one page to another page or on same page. Some times we create very large document in order to help the visitor we make links on the same page. Today our topic styling links in css.
ALSO READ:
html image tag and html links.
Text formatting in css.

What is the links?

Links are the way by which you can jump from one page to another page.

STYLING LINKS

Link should be change by its surrounding such its background-color, color should be change from surrounding text.

There are four types of links property given below;

a:link unvisited link.

a:visited visited link

a:hover mouse over a link.

a:active user has clicked link.

Note

The sequence is important you have to write first link then visited then hover and finally active. You can add the text decoration, background color, text size, font style, font weight etc to the links.

a:link

this is unvisited link

a:link{

color:red;

}

a:visited

this is the visited link

a:visited{

color:green;

}

a:hover

when users take mouse over link.

a:hover{

color:blue;

}

a:active

when users clicked the active link.

a:active{

color:yellow;

}

CSS STYLING LISTS.

Many times we need lists . in html we make lists in css we design them you can add numbering, dot, circle and also you can add images to the lists lets discusse about the styling lists. There are two types of lists in html unordered list or ordered lists.

UNORDERED LISTS;

Unordered lists contain of bullets.

ADDING CIRCLE;

ul {list-style-type:circle;}

ADDING SQUARE;

ul {list-style-type:square.}

How to add the image as list item marker?

Yes you can add the image to the list item marker.

ul{

list-style-type:url(bullet.png)

}

FINAL WORDS;

Friend now you can edit the list item according to your wish. Keep working and remember in your prayers and don’t forget to share our post with your friend.THANKS

Read More...