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

Text Formatting In CSS

Hi friends Assalam-o-alaikum

Friends today we are going to discuss text formatting in css. How to make the text more readable, beautiful and attractive. For this you have to learn css selector before. In this tutorial we will discuss all the properties about text formatting such as font-family, font color, line-height, and many others. Let’s come to the topic.

 Also visit the css selectors and text formatting in html.

Text formatting

With css we design the text beautifully. The different property we use to design the text such as text-decoration, font-family, color, text-align, font-size, font-weight, text-transformation, text-indention and many others. Which we discus below.

COLOR PROPERTY

Some times is important to add color to the text. You can write the value of color in hex, rgb and also red. we can add color to text like this,

p{color:red;}
h1 {color: green;}

TEXT-ALIGN

This property is used to define the position of text. As you want to add the text left, right or to the centre for this you can use this property.

FOR EXAMPLE

p{
text-align:right;}
h1 {
text-align:center;}
h2{
text-align: left;
}

TEXT-DECORATION

It is the property which is used to define the decoration of text or for removing the decoration.
FOR EXAMPLE;
For removing text decoration,

 { text-decoration:none;}

Adding decoration to text,
It has three more values overline, line-through, and underline;

    p{
text-decoration:overline;
 }
p{
text-decoration: line-through;
}
p{
text-decoration:underline;
 }

Text-Transformation;

This property use to change the text in lowercase, uppercase and capitalize the first letter of each word.

EXAMPLE;    

       

p{
text-transform:uppercase;}
p{
text-transform:lowercase;}
p{
text-transform:capitalize;}

FONT-FAMILY

To define the font family means that you want to use different types of font. You use the property of font-family (Helvetica, Georgia, Verdana etc).

FOR EXAMPLE

p{

font-family: Helvetica;
 }

Font-SIZE

Yes you can also set the size of text which you want. Size of text define in different units such as em, px , percentage, centimenter, millimeter and points. I prefer you to use the em unit because it change the size of text according to the device.

p{
font-size:2.5em;
 }

FONT-STYLE

This property is used to make text oblique, italic and also you can set normal the font.

FOR EXAMPLE;

p{
font-style:italic;
} 

FONT WEIGHT;

It is the property which is used to make text bold or lighter and also set to the normal value to the font.

FOR EXAMPLE;

p{
font-weight:bold;
}
 

LINE-HEIGHT

To add the height between to lines we use the line-height property.

FOR EXAMPLE;

p{
line-height:200;
 }
 

LETTER-SPACING

To add the spaces between the letters we use this property. To separate letters.

FOR EXAMPLE

p{
letter-spacing:5px;
 }
 

WORD SPACING

To make the space between the words we use this property.

FOR EXAMPLE

p
{
word-spacing:3px;
}

FINAL WORDS

Now friends you can easily format the text beautiful make you design more efficient please remember in your prayers don’t forget to share our post with your friends keep visiting. THANKS!

Read More...

CSS Selectors

Hi friend, Assalam-o-alaikum.

As you know from few days we learn the html such as html basic tags, html meta tags, text formatting in html, html tables and html forms. Today I am going to present tutorial on css selector. I don’t take your time much. lets start.

What is css selector?

Css selector contain of id and class with class and id you can specify any element on the page which you want to style.

Css selector is used to identify or find the html elements which are based on their id, attribute etc.

THE ELEMENT SELECTOR.

The element selector is the base on element name.

If you want to style paragraph use p tag identify the selector

For example you want to select the paragraph and want to change its background or font. What you will do? Here is how we can do this is very easy

P{

Background-color:violet red;

font-family:Verdana;}

In the above the case it design the all paragraph on the page and also their font but you want to design particular paragraph on the how we will do this? This is easy we can do this with css selector id and class. You add class or id tag. Like this.

Html

<p id=”important”>this is the important paragraph on the page we want design different from other</p>

This is how we add id in html now we can indicate this paragraph particularly.

Css

#important{

Background-color:violet red;
font-family:Verdana;
}                                                                     

 What is id?

For id selector we use id attribute with in the html tag.

Id tag must be unique. It should be not repeated again and again

The id is unique and it is use only one time in the whole page.

The id can be identifying with the hash (#) character.

                                                                                                

FOR Example

#paragraph1 {

Background-color:blue;
}

What is class?

For class selector we use class attribute with in the html tag.

The class can be used multiple times on the page. It can be repeated again and again.

The class is not unique it can be use many times on the same page.

The class selector can be identifying with the period (full stop).

NOTE

The same class can be use on multiple elements.

The multiple classes can be use on same elements.

For example.

.paragraph2{
background-color:green;
}

GROUPING SELECTOR.

The grouping selector is use when you want to apply same style to different elements. For this you can use group selector.

It reduces your effort to write same code again and again.

For example: if you want to change the font family of all headings.

h1,h2,h3,h4,h5,h6{
font-family:Gorgia;
 }
                                                 

FINAL WORDS.

In the above we mentioned the basic selector which commonly used by every one Inshallah in few days we will discuss on the advanced css selector but it is important that you have basic understanding of selector. Please keep visiting and share our post with your friends. Thanks!

Read More...

How To Make HTML Forms

Html forms are used for website interaction. In this way the visitors can communicate with you. The html forms contain different elements such as first name, last name, password, confirm password, favorite lists, gender etc .html form start with <form> and end with </form>.

Also Read This: HTML Tables With Detail.

Also Read This: Text Formatting.

<input> this tag contain different attributes such as name, size, maxlength and type. It is used to make input field between form tags.

          Type=  It tells the browser that it is text field, password, submit field.

          Name= Defines the name of field.

          Size=  This attribute used to define the size of input box.

        Maxlength= This is used for maximum character in the input box.

FIRST NAME;

In text type you can add any which in text such as first name, last name etc.

FOR EXAMPLE

First name :< input type=”text” size=”15” maxlength=”30” name=”first name”>

        

Password;

In this type you can add the password field in your form which means if you type any thing in the password it appears in the shape of black dots.

FOR EXAMPLE;

First name :< input type=”password” size=”15” maxlength=”30” name=”first name”>

SUBMITTING DATA. 

Now little bit your farm is complete but problem is that how we send data and where and adding submitting button.

 There are two type of method of sending data.

  get it sends the data showing its as url. This is easy to hack for hackers.

 Post it send the data without showing its as url.

NOTE

get is on the default if you don’t tell the browser it automatically use get method.

How to define the method of post in form?

You can define with attribute of method just like that <form method=’post’>

Where to send data?

The two type of sending data one is you can send to the email system and this is very easy method. Second is the scripting you can use the script of php, perl, javascript etc.

You use action attribute in form tag.just like that.

EXAMPLE;

<form mehod=’post’ action=’mailto:mohammadwaqar401@gmail.com’>

SUBMIT BUTTON;

Adding submit button again we use input tag between form tags.

EXAMPLE;

<input type=’submit’ value=’submit’>

RADIO BUTTON

In the radio button you have only on choice. You give the two option choose your gender one option is male and other is female. If you click on the male it marked and when you click on female it marked the female but unmarked the male.

For example

Gender  <input type='radio' name='gender' value='Male'>Male
                       <input type='radio' name='gender' value='Female'>Female

CHECK BOX;

In the check you have multiple choice. Just like that tick  your favorites cities.

If there is newyork, London, sydny you can select all of these.

For example;

<input type='checkbox' name='cities' value='Newyorl'>New york <br />
                <input type='checkbox' name='cities' value='Sydny'>Sydny <br />
                <input type='checkbox' name='cities' value='London'>London <br />

DROP DOWN LISTS;

In this you can add list and you can select one item from the list. Drop down list contain two tags one is select and second is option. Option tag placed between select tag.

For example

  <select name='birthyear'>
<option> 2001</option>
<option> 2002</option>
<option> 2003</option>
<option> 2004</option>
<option> 2005</option>
<option> 2006</option>
<option> 2007</option>
<option> 2008</option>
<option> 2009</option>
<option> 2010</option>
<option> 2011</option>
<option> 2012</option>
<option> 2013</option>
<option> 2014</option>
</select>

FINAL WORDS;

Now you know how to make form in html. It is very easy but it need some practice. Keep practicing remember in your prayer and don’t forget to share our post with your friend. Keep Visiting!

Read More...