Total Pageviews

Sunday, February 28, 2016

Cascading Style Sheets

Cascading Style Sheets, what is Cascading Style Sheets, Cascading Style Sheets in HTML ,why we use Cascading Style Sheets,types of Cascading Style Sheets, Define CSS , Cascading Style Sheets PDF notes Download, Cascading Style Sheets Notes Download, Cascading Style Sheets with example 

 What is Cascading Style Sheets ? what is CSS ? which is a  current version of Cascading Style Sheets you are using?  define different types of Cascading Style Sheets?

 CSS long form is Cascading Style Sheets, 

Cascading Style Sheets (CSS) mainly used for   styling    purpose or to beautify HTML Pages.

There are different version and type of CSS are thir

Most of the people were using Cascading Style Sheets2 Or CSS2 version but right now in 2015 2016 new version of CSS is CSS3 which gives us lots of new features to beautify HTML Pages.

As per the CSS used in HTML Pages CSS has Three Types 

1. inline CSS or Inline Cascading Style Sheets

   Inline is define using tag level CSS. it is limited to that tag only to which it is define but is is very powerful and having high Priority .lets take example how to define Inline Cascading Style to a paragraph.

 < P style=" text-align:justify; Color: red">

   hello Dear with you very happy and Healthy  Life 

 here in above example i have defined tag where inline style is define using style tag  where using double quote i am going to define look of my Paragraph .

Problem with inline css is if you want to define same style to multiple paragraph you have to write style for each and every paragraph it will increase your work which is not feasible and next time if you want to change something it will be headache for you.

 to overcome from above problem new style type was defined as 

 

2. Internal CSS or Internal Cascading Style Sheets

  Internal CSS Define PAGE Level CSS.  It is define in head section of your page using style (
        
           
                    < p>

                        hello Dear with you very happy and Healthy  Life 

                      

           
 
 



 If you Define Number of tag every paragraph on single page will take same  style. 

you can also define selector using Class Name or  Using id  as show following Example Define css using Class Name.

in Following example i have used class name main_txt  which is define using DOT(.) before name of the class

to apply define class to particular tag i have use          < p class="main_txt"> Class attribute of that tag as shown in example.



       
           < style>
                 .main_txt{ text-align:justify;
                   Color: red;}
            
        
           
                    < p class="main_txt">

                        hello Dear with you very happy and Healthy  Life 

                      

           
 
 

 

you can also define selector using ID   as show following Example Define css using Class Name.


in Following example i have used class name main_txt  which is define using Hash (#) before name of the class

to apply define class to particular tag i have use  < p id="main_txt"> id attribute of that tag as shown in example.



       
           < style>
               #main_txt{ text-align:justify;
                   Color: red;}
            
        
           
                    < p  id="main_txt">

                        hello Dear with you very happy and Healthy  Life 

                      

           
 
 


 Problem with the internal CSS is again same if your Project contain 10 pages then you have to use 10 internal css for each page separately that is again not maintainable if there are any change then headache. 

So to Overcome form this Problem we use External CSS 

3. External CSS or External Cascading Style Sheets

External  CSS Define Project Level CSS. Define One CSS Page and use Multiple times in number of pages in your as shown in following example .

 1. Style.css file  (save saparte file using .css extension)

               #main_txt{ text-align:justify;
                   Color: red;}
      
 
 2. index. html page (add link tag in head section)
       
        
        
           
                    < p  id="main_txt">

                        hello Dear with you very happy and Healthy  Life 

                      

           
 
 


 Priority OF Cascading Style Sheets High to Low 

Inline Style Sheet > Internal Style sheet > External Style sheet

 What is HTML? Define HTML

  HTML long form is  Hypertext Markup Language. 
  it is known as language of Browser.
 Mainly HTML is used to Define Structure of webpages or    Called as Structural Layer  .
 CSS  used to Beautify HTML webpage or Also called Presentation Layer  .

CSS2 Was Old Version Currently 2015-2016 CSS3 is Popular one 

Cascading Style Sheets, what is Cascading Style Sheets, Cascading Style Sheets in HTML ,why we use Cascading Style Sheets,types of Cascading Style Sheets, Define CSS , Cascading Style Sheets PDF notes Download, Cascading Style Sheets Notes Download, Cascading Style Sheets with example 


Monday, February 8, 2016

responsive web designing tutorial 2016

latest responsive web design tutorial 2016,  responsive web design template free download responsive web designing tutorial, responsive web design tutorial step by step,responsive web design tutorial for beginners,responsive web design tutorial PDF,responsive web design tutorial 2016,responsive web design tutorial 2015,latest responsive web design tutorial 2016, responsive web design tutorial with examples,responsive web design template free download, latest responsive web design template free download,responsive web design template download 2016, how to create a responsive website,how to do responsive web design ,responsive web layouts, what does responsive web design mean,responsive design layouts,how to make responsive website, responsive web design using media queries,responsive design examples, responsive site design, responsive web design tutorial,responsive web design gallery, responsive website, responsive sites,responsive website examples,responsive website showcase,








 












In this post i am going to explain responsive web design tutorial step by step. i have designed responsive template using html5 and css3 specially using media queries . responsive template designed by me is available for free download  you can use is for personal use of for commercial for downloading free responsive template you can click on link 

Responsive web designing template free download
Responsive web designing template free download






free responsive template download which is below .

 








 you can also download tutorial in PDF format just find responsive web design tutorial PDF Download free










in this post i have created responsive web layouts having two column which is completely design by using html5 tags similarly in next post i am going to design same template using responsive template of three column layout using html5 which is also free for downloading  , what does responsive web design mean

examples of responsive website in this tutorial are designed for best understanding of media queries .

 Before starting tutorial of responsive web designing you must know following things.

Why we use responsive web-designing ?

what is  need of responsive web development?

which technology used to make website responsive? 

let's find the answer of this questions 


Why we use responsive web-designing ? what its need ?

Few years back we were using only laptop or computer to access internet or websites. at that time websites were designed by considering that devices only . 

form 2010  onward things are change currently we are using devices like mobile Phone, Tab, Laptop ,  PC, and various multimedia devices . this devices has different screen size , different height and width . If you don't use responsive layout for your website then your website will work only on certain devices and if you want to work your website each and every device  you must design number of index file equal to number of devices . 








So, what?  it is not easy task . 

better way is , learn responsive web designing .

let us learn web design tutorial step by step

first we understand

what does responsive web design mean,responsive design layouts,


"Responsive Design" is the strategy of making a site that "responds" to the browser and device that it is being shown on






  •  Phones and Handhelds

  • Tablets

  • Laptops

  • Wearables

 A major component of responsive design is creating the right experience for the right device

How to make responsive website 

  • Media Queries  

    Adding Meta tag in head section
    <meta name="viewport" content="width=divice-width, initial-scale=1.0">

    you can also use some ready made frameworks like  

    • Foundation 

    • Bootstrap

 In this tutorial i am going to use Media queries CSS3 Techniques 


Media queries : 

Awesome new part of CSS3

are used to control behavior of CSS Style on the basis of Device which is accessing that webpage 

Basic Syntax and example execute this example in leftest browser just

 copy paste code save it as demo.html

<!DOCTYPE html>
<html>
   <head>
<style>
body {
background: blue;
}
@media screen and (min-width:501px) {
body {
background: gray;
}
}
</style>
</head>
<body> 
</body> 
</html> 

Output in Browser is Follow

latest responsive web design tutorial 2016,

Step by Step tutorial is follow 

Step1 

Follwing is HTML 5 code Copy Paste save it as using index.html 

<!DOCTYPE html>
<html>

   <head>
       <link rel="stylesheet" type="text/css" href="resstyle.css">
    <link rel="stylesheet" type="text/css" href="resmedia.css">
      <meta name="viewport" content="width=divice-width, initial-scale=1.0">
   </head>

<body>

   <div id="content">
       <header>
           <img src="logo.png">             
                 IMS
       </header>
                  <nav>
                 <ul>
                   <li>Home </li>
                   <li> About US</li>
                   <li> Gallary  </li>
                   <li> Contact Us</li>
                  </ul>

               </nav>

               <section id="column-left">
<h1>  IMS - It’s background</h1>

<figure>
  <img src="ims.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>IMSCDR Ahmednagar </figcaption>
</figure>
    <p>
The Bhaskar Pandurang Hivale Education (B.P.H.E.S.) Society has three Institutions under its umbrella : Ahmednagar College, Institute of Social Work & Research (ISWR) and Institute of Management Studies, Career Development & Research (IMSCD&R). Ahmednagar College, a pioneering Institute of its kind was established in 1947 by late Rev. Dr. B. P. Hivale. It was further natured by Dr. Thomas Barnabas who took the college to magnificent heights. Dr. Thomas Barnabas was followed by Rev. Prof. J. Barnabas. Rev. Prof. J. Barnabas was a dedicated educationalist, who played a key role in the filed of education in Ahmednagar. In 2005, he was conferred with 'Jeevan Sadhana Gaurav Puraskar' by the University of Pune. As Secretary of B.P.H.E. Society, he was instrumental in setting up IMSCD&R in the year 1990. Currently, Mrs. Meera P. Barnabas, the secretary of the society, is furthering this momentum of growth.
   </p>

      </section>
     <section id="column-right">
      <h3> NEWS BOX </h3>
      <marquee direction="up" scrollamount="3" width="100%" height="450px">
      MCA DEPARTMENT ACTIVITIES <br> <hr>

      MBA DEPARTMENT ACTIVITIES <br><hr>

   PLACEMENT DEPARTMENT ACTIVITIES <br><hr>
      </marquee>
      </section>
    <div style="clear:both;"> </div>
    <footer>
      &copy;imscdr.in

    </footer>
         </div>
</body>

</html>

responsive web design tutorial 2016 PDF download

Step2  

Follwing is CSS code Copy Paste save it as using resstyle.css

#content{
   width:960px;
   background:gray;
   margin:0px auto;
   border:1px solid red;
   position:absolute;
   padding:0px;
}
p{
 text-align:justify;  
  }
header{ width:960px;
        background:orange;
        height:auto;
        border:1px solid black;
        text-align:center;
        color:white;
        font-size:36px;
        font-weight:bold;
        text-transform:uppercase;
  }
img{   display:block;
       margin:auto;
       }
nav{    width:960px;
        background:white;
        height:50px;
}
ul{   list-style:none; float:right;   height:50px; }
li {display: inline; background:blue; padding:10px; margin:2px; font-weight:bold; color:white;}
li:hover{ background:red;}








Responsive web designing template free download
figcaption{text-align:center;font-weight:bold;text-transform:uppercase;}
#column-left{
   margin-top:-25px;
   width:700px;
   float:left;
   background:white;
   padding:10px;
 }
#column-right{
   margin-top:-25px;
   width:220px;
   float:left;
   background:orange;
   padding:10px;
   color:blue;
}
footer{
 width:960px;
 background:orange;
 text-align:center;

  }

Step 3  

Follwing is CSS code Copy Paste save it as using resmedia.css.css 

@media screen and (max-width:959px){
header{ width:100%;}
nav{width:100%;}
#content{ width:100%;}
nav{width:100%;}
img{max-width:100%;}
footer{ width:100%;}
}
@media screen and (max-width:640px)
{
#column-left{width:100%;}
#column-right{width:100%;}
nav{width:96%;}
footer{ width:100%;}
}
@media screen and (max-width:360px)
{
 #content{ width:320px;}
 ul{display:block; width:100%;}
li{width:320px; display:block;}
footer{ width:100%;}
nav{width:320px; height:200px;}
}



Responsive web designing template free download
Responsive web designing template free download







Responsive web designing template free download






responsive website template free download


responsive web design tutorial pdf Download



latest responsive web design tutorial 2016,  responsive web design template free download responsive web designing tutorial, responsive web design tutorial step by step,responsive web design tutorial for beginners,responsive web design tutorial PDF,responsive web design tutorial 2016,responsive web design tutorial 2015,latest responsive web design tutorial 2016, responsive web design tutorial with examples,








responsive web design template free download, latest responsive web design template free download,responsive web design template download 2016, how to create a responsive website,how to do responsive web design ,responsive web layouts, what does responsive web design mean,responsive design layouts,how to make responsive website, responsive web design using media queries,responsive design examples, responsive site design, responsive web design tutorial,responsive web design gallery, responsive website, responsive sites,responsive website examples,responsive website showcase,

 


Popular Posts

Follow by Email