Skip to main content

Posts

Showing posts from July, 2015

How to Import one css file to another( use of @import )

In css, You can import a css file into another css file using @import.

So, let’s start with @import demo My Directory Structure Is :

Here In Css Folder One other css file that name is Other.css.
Now Show Example HTML file is :

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>krButani</title>
<style>
@import url('Css.css');
</style>
</head>

<body>
<div class="test1" align="center">
Text1 Is Here
</div>
<div class="test2" align="center">
Text2 Is Here
</div>
</body>
</html>

Css.css File Is :
@import url('CSS/Other.css');
.test1 {

margin:10px;
padding:10px;

background:#EEAC48;
color:#000000;
border:2px solid #fff;
border-radius:3px;
box-shadow:0px 0px 3px #999;

font-size:36px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

How To Embedded Font in css ( custom font )

In website font is most issues to design the site so, here I am show how to embedded you custom font output show in websites.
In css font embed to use @font-face attribute Given Below Example :


Here I am use php script you can select html file also but some time it problem to embedded than you use html 5 format to html file.
My font is store in font directory and my css file store in css directory.

Now Html File is Below :


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>krButani</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>

<body>
<div class="demo-header">
<div class="title" align="center">My Text Is Here</div>
</div>
</body>
</html>

Css File is Below :


@font-face {

   /* font-family specify name of font that can use is cs…

How to Give Box shadow in css

In css3, Provide Drop shadow or box shadow and that you can use to create better look website for other.

HTML file Is :

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>krButani</title>
<style>
.t1 {

margin:10px;
padding:20px;
height:200px;
width:200px;

font-size:24px;
font-family:Verdana, Arial, Helvetica, sans-serif;

background:#5886F1;
color:#fff;
border:5px solid #fff;

/*
*
* First offset Indicates x position.
* Second offset Indicates y Position.
* Third offset Indicates the size of the shadow.
* Fourth offset Indicates the darkness of the shadow.
* And Last Give the Color Of The Shadow
*
*/

box-shadow:0px 0px 3px 2px #999;

/* Box Shadow have Two Prefix is below */

-moz-box-shadow:0px 0px 3px 2px #999; /* -moz is mozila */
-webkit-box-shadow:0px 0px 3px 2px #999; /* -webkit is Chrome */
}

/* if you can give diffent proerties of all side apply like below */

.t2…

Better Css Writen Techniques

If you can write css better than first select editor.
The best editor is Dreamweaver and net beans.
You can find the better than it.
I just tell you because it is provide old declared class name so, you can easily give different name.Let’s start, first given the comment of any css file and provide information of css file like (name, version etc).
Each apply css on html elements than create group of element and give the comment of that like following header element comment is:

     /* Header Element */

If you have any kind of css file can import then import the file.
Finally, put the code but first class name and id name define curly bracket “ { } ” can start at that line just like follow:

     .Demo #Work {
          Margin: 0px;
     }

If you can apply same code more than one or two classes and id or tags than after separate put in the next line like follow:

     .Demo #work,
     .Test > p {
         Margin: 0px;
     }

Whenever you can put four pixel( four pixel means top, left, …