Thursday 4 July 2013

MULTIPLE BORDERS USING CSS

We can use another exciting feature of the CSS and that is the multiple borders. This will increase the visibility and the attraction of the page. In this way the page is divided into different kinds of section and you can highlight the part which you will think is more important. For this thing you can import the css file which is in this case is the paper.css.

Here is the simple coding of the paper.css.

.borderOne
{
border: 2px solid #800000;
}
.borderTwo
{
border: 4px dotted red;
margin:auto;
background-color:#8080FF;
}

Here is the code of the html file.

<h2>Save The Innocent Childrens</h2>

<hr>

<H3> Our Mission </H3>

We focus our attention to the most important issue of the Pakistan against the rights of the children. Now a days more then 35 percent children are the part of the forced labour. Our mission is to support all those children who are facing such crime.</div>

<H3>About us </H3>

If you have any information which will save the childen from the child labour you are requested to send us the information on as soon as possible basis. <a href="mailto:Saifullahdarpk@gmail.com"> Send us Mail.</a></div>

</body>

MULTIPLE BACKGROUNDS WITH CSS

MULTIPLE BACKGROUND WITH CSS

Background affect the appearance of any Web page, with the help of CSS you can divide the page into different blocks and set the different background colours and images to differentiate the each section of your page with the help of CSS. Background can varies from page to page which will increase the look of the page or make it more attractive.

First of all you will make a separate file of css in this case it is "sac.css".

Here is a simple code of sac.css file:

body
{
background:#FF0099 url url(c2.jpg) repeat-y fixed left;
margin : 10px 10px 10px 75px;
}
.banner
{
background-color:#FF8040;
text-align: center;
}
.section
{
background-color:#FFFF00;
}

Here is the code of the html file.

<Link rel="stylesheet" type="text/css"
href = "SAC.css" />
</head>

<body>
<DIV CLASS ="banner">
<h2>Child Labour in Pakistan</h2>
</DIV>
<DIV CLASS ="section">

<H3> Our Mission </H3>
We focus our attention to the most important issue of the Pakistan against the rights of the children. Now a days more then 35 percent children are the part of the forced labour. Our mission is to support all those children who are facing such crime.</div>

<DIV CLASS ="section">

<H3>About us </H3>
If you have any information which will save the childen from the child labour you are requested to send us the information on as soon as possible basis. <a href="mailto:Saifullahdarpk@gmail.com"> Send us Mail.</a></div>

</body>
</html>

SOME USE FULL TEXT PROPERTIES USING CSS

SOME USEFUL CSS PROPERTIES

SOME USE FULL TEXT PROPERTIES

The CSS text properties allow specifying the formatting rules for the textual content on a web page. You can change the direction of the text, can specify the spacing between the letters or can handle the white spaces.

direction: specifies the direction of the text. It will specify weather the text will right from left to right, right to left. Possible values are : rtl, ltr.
letter-spacing: It will increment or decrement the space between characters. The possible value is either normal or the length type.
white-space: Handles the white spaces. Possible values are normal, pre and nowrap. The nowrap will display the text on the same line until you will not use the blank row tag.

Here is the code mentioned below:

Heading No1

Heading No2

You can see the diffrence between the two heading and the paragarpah too. Heading one is using the direction from left to right and the heading two is using the direction from right to left. Similarly the heading one is using the 1px between the words and the heading two using the pixel 2 between the two letters. Similarly the paragraph element is using the letter spacing 4 and the white spaceas as mentioned pre.

H1
{
direction:rtl;
letter-spacing:15px;
}
H2
{
direction:ltr;
letter-spacing:8px;
}

p
{
letter-spacing: 4px;
white-space:pre;

}

</style>

IMPORT CSS FILES

IMPORT CSS FILE

To import any css file first of all you need to make a file in which you will use the different elements and then save the file using the extension css. i.e style.css, first.css etc.
Then use the "@" sign with key word import to import the css file. i.e @import filename.css. By using this way you will avoid the redundancy of the code and used the same style through whole website and it will uniform the style in your whole web pages.

Here is the simple code:

The css file will be like this and save it with the name and extension .css like style.css in this case:

p
{
font-family:"Palatino Linotype";
font-size:12px;
color:#800040;
}
H1
{
font-size:18px;
color:#400080;

}
H2
{
font-size:16px;
font-family:"Lucida Console", Monaco, monospace;
color:inherit;
text-align:right;
}
H3
{
font-size:14px;
color:#0080FF;
text-align:center;
}

In another Html file we will import this file as mentioned below:

<title>CSS Importing File</title>tuy
</head>
<style type="text/css">
@import "style.css";
</style>

<body>
<h1> Style Using CSS File Import </h1>
<hr />
<p> To import any css file first of all you need to make a file in which you will use the different elements and then save the file using the extension css. i.e style.css, first.css etc. </p>
<p> Then use the "@" sign with key word import to import the css file. i.e @import filename.css. By using this way you will avoid the redundancy of the code and used the same style through whole website and it will uniform the style in your whole web pages.
</p>
Just chek out some other elements display:
<h2> Observe the Heading 2 :</h2>
<h3> Observe the Heading 3 </h3>

</body>
</html>

CSS INHERIT VALUES

Inheritance means to get the values from the parents. Same thing is applied in the css style element. We can use the inherit values to implement a specified attribute of some element from the parent element. The child element will take the same value as the parent element specified. The value is explicitly specified at the end of the CSS property before the semi colon.

Here is the Simple output and code:

USE THE CSS TO INHERIT THE VALUES

INHERIT VALUES USING CSS

The inherit values means that all the elements of textual content will use the same font family which is in this case is Times roman . This thing is known as the inherit values.

Look out this heading using differnt fonts but not shown

SIMPLE CSS FILE CODING

HOW TO MAKE A SIMPLE CSS CODING FILE ?

Now we want to learn the way to make a simple coding of css using the style element or tag of the HTML language. <style > tag will use to make a css coding and remember that mostly we use the style element just after the end of the <head> element.

In this code we just learn how to use the style tag and how we can change the predefined attributes of the different tags by using the style element.

Kindly watch the code and implement as mentioned below:

<html >
<head>
<title>CSS STYLE SHEET SIMPLE PAGE</title>
</head>
<STYLE type="text/css" MEDIA = "SCREEN">
BODY
{
font-family:Tahoma, Geneva, sans-serif;
font-size:16px;
}
P,B
{
font-weight:BOLD;
color:#990066;
}
B
{
font-style:oblique
}
</style>

<body>

<p>THIS IS A SIMPLE OUTPUT USING THE PARAGRAPH ELEMENT USING THE STYLE SHEET ELEMENT.<B> I AM USING THE BOLD ELEMENT. KINDLY FIND IS THERE ANY CHANGE IN THE LOOK </B> IT MEANS THAT THE ELEMENT B IS WORKING AND USING THE OWN VALUES USING THE STYLE SHEET </p>
</body>
</html>

THIS IS A SIMPLE OUTPUT USING THE PARAGRAPH ELEMENT USING THE STYLE SHEET ELEMENT. I AM USING THE BOLD ELEMENT. KINDLY FIND IS THERE ANY CHANGE IN THE LOOK IT MEANS THAT THE ELEMENT B IS WORKING AND USING THE OWN VALUES USING THE STYLE SHEET

Wednesday 3 July 2013

CASECADING STYLE SHEET (CSS) STEP FORWARD

CSS EVOLUTION

HTML language had certain limitations in case of style such as lack of uniform view of the web page. Different browser show the same text in different styles, to avoid this thing CSS which is the abbreviation of the CaseCading Style Sheet come into existence in 1996. There are two versions of CSS-P and CSS2 launches and working on the CSS3 is still going on and the other versions too.

INHERITANCE IN CSS

HTML language has different kinds of container element that includes the other elements. There are mainly two types of the elements in the HTML language.

Parent Element
Child Elements

PARENT ELEMENTS:

The elements which will have the child elements will consider as the Parent Element. For Example the Body Element has the different child elements like <P> for paragraph. etc.

CHILD ELEMENTS:

Child Elements are those elements which must be include in other elements. They are the descendent elements.

CSS will define the styles of all the elements like Parent, Children and descendant elements. The child or descendant elements can take the styles of their parent elements, irrespectively of the type of css in use. This is known as the INHERITANCE of styles.

LEARN HYPER TEXT MARKUP LANGUAGE

Thursday 4 July 2013

MULTIPLE BORDERS USING CSS

MULTIPLE BORDERS USING CSS

MULTIPLE BACKGROUNDS WITH CSS

MULTIPLE BACKGROUND WITH CSS

SOME USE FULL TEXT PROPERTIES USING CSS

SOME USE FULL TEXT PROPERTIES

Heading No1

Heading No2

IMPORT CSS FILES

IMPORT CSS FILE

CSS INHERIT VALUES

CSS INHERIT VALUES

INHERIT VALUES USING CSS

Look out this heading using differnt fonts but not shown

SIMPLE CSS FILE CODING

HOW TO MAKE A SIMPLE CSS CODING FILE ?

Wednesday 3 July 2013

CASECADING STYLE SHEET (CSS) STEP FORWARD

CSS EVOLUTION

INHERITANCE IN CSS

PARENT ELEMENTS:

CHILD ELEMENTS:

Followers

Wikipedia

Check out some more

Total Pageviews