Posts

Showing posts from 2014

CSS Tutorial - Table of contents

How does CSS work?Method 1: In-line (the attribute style)

One way to apply CSS to HTML is by using the HTML attribute style. Building on the above example with the red background color, it can be applied like this:

    <html>
      <head>
        <title>css zilla</title>
      </head>
      <body style="background-color: #FF0000;">
        <p>CSS Zilla the ultimate css blog</p>
      </body>
    </html>


Method 2: Internal (the tag style)

Another way is to include the CSS codes using the HTML tag <style>. For example like this:

    <html>
      <head>
        <title>css zilla</title>
        <style type="text/css">
          body {background-color: #FF0000;}
        </style>
      </head>
      <body>
        <p>CSS Zilla the ultimate css blog</p>
      </body>
    </html>


Method 3: External (link to a style sheet)

An external style sheet is simply a tex…

Web Designing Interview Questions And Answers

Image
Question: What is the relationship between SGML,HTML , XML and HTML ? Answers: SGML stand for (standard generalizd markup language) is a standard which tells us how to specify document markup. Its only a meta language which describes how a document should be markup. HTML stands for hyper text markup language. HTML is described using SGML.
By SGML they created DTD which the HTML refres. So we find "DOCTYPE" attribute at the top of HTML page whcih defines DTD is used for parsing purpose.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
Simply in short SGML is parent for every one. Older HTML utilize SGML and HTML 4.0 uses XHTML which is derived from XML.



QUESTION: What is HTML5? Answers: HTML 5 is new standard for HTML whose main target is to deliver everything without using third party plugins example flash, silver light etc. It provide us facility for attach Animation, videos, Rich GUI in our webpage. HTML5 is coo…

how we user bxslider in our web template

Hello Guys,

You have some doubt in your mind regarding responsive slider which adapt itself with varying responsive sizes.

Why should I use this slider? Fully responsive slider - will adapt to any device; Horizontal, vertical, and fade modes; Slides can contain images, video, or HTML content ...

1. Fully responsive - will adapt to any device
2. Horizontal, vertical, and fade modes
3. Slides can contain images, video, or HTML content
4. Advanced touch / swipe support built-in
5. Uses CSS transitions for slide animation (native hardware acceleration!)
6. Full callback API and public methods
7. Small file size, fully themed, simple to implement
8. Browser support: Firefox, Chrome, Safari, iOS, Android, IE7+
9.Tons of configuration options

How we install bx-slider?Download bxslider: http://bxslider.com/

Step1: Required files.

<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascrip…

CSS Writing Standard

/*
Theme Name: CSS ZILLA Theme
Theme URI: http://csszilla.blogspot.com/
Author: the WordPress team
Author URI: http://csszilla.blogspot.com/
Description: Css Zilla, Easy Css Tricks, Css3 Basics, Css Help - CSSZilla
*/

/*========================================== 
Reset Css Start Here
 ==========================================*/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
nav ul {
list-style: non…

How we use bootstrap css, simple basics of bootstrap css,

Hello Guys,
Today we understandd the basics of bootstrap css. For download the bootstarp css refer this link. http://getbootstrap.com/.

Bootstrap is responsive css framework for develop responsive websites and mobile first projects on web.

In bootstrap responsive framework their is four major classes which is added on any div or section for control its width in responsive screen.

For eaxmple col-lg-12 up to col-lg-1 is classes used for control width on large screen monitor.
same as col-md-12 upto col-md-1 is classes used for control width in medium screen monitor
same as col-sm-12 upto col-sm-1 is classes used for control width in laptop screen and last one is col-xs-12 upto col-xs-1 is used for control width in mobile screen.

working area of these classes is differ from each other. maintained by container width.
Question: How we use bootstrap 3.0 in our project.

Answer: first download bootstrap 3.0 by clicking above link. Now create a simple html file on any html editor which you like most. I…

Understand the basics of Media Queries

Hello Guys

Today we understand the basics of media query. All websites which is works online have four major screen ie
1.Large desktop screen 
2.Medium desktop screen
3.Ipad screen {768px width - 1024px}
4.Mobile screen { less than 768px}

Take an example:-
@media screen and (min-width: 768px) and (max-width: 979px) {...}
This media query will work between 768px width to 979 width only.

Now take an another example of max width media query ie:@media screen and (max-width: 980px) {...}

This media works only in 980px screen size or less than 980px screen size. This media query is more effective than above media query in which we set min-width and max-width.

This media query also decrease the lines of css.




CSS cascade hierarchy

Image
Hello Guys,

css has multiple hierarchical levels that cascade in importance and priority.

Css have three types which work according to his priority.
1: Inline CSS
2: Inline CSS
3: External CSS

Inline css have highest priority. after than internal css after than external css.

If we want to disable inline css effects we use "!important".



Refer by:- http://webstyleguide.com/

Simple file folder structure of website template

Image
Hello Guys,

Remember a proper structure of website template file is necessary. A proper file structure give ease to designer or developer.

Just have a look on this image.


Refer by:-http://webstyleguide.com/

Structure of HTML website template

Image
Hello Guys, 

Today we understand a basic structure of website template.



Ref by:- http://webstyleguide.com/

Simple bootstrap 3.0 E Commerce website template

Hello Guys,

Check this free template which is made up on bootstrap 3.0

Demo:-- http://csszilla.comxa.com/html/

How we show a image in website background which set according to screen size of desktop or in tablet

Image
Hello Guys,
Now you can apply a image in full width website background. Here we apply a pattern also on image which is placed in full background size. This background image is set according to all screen sizes by re-sizing window.
Demo:-http://jsfiddle.net/csszilla/3CRWY/ Full Screen Demo:-http://jsfiddle.net/csszilla/3CRWY/embedded/result/





Js Toggle for multiple use in mobile and in website

Hello Guys

Here a general purpose js toggle which is useful for you in your project.

Check this demo

Demo:-http://jsfiddle.net/csszilla/E4emz/1/
FullScreen:- http://jsfiddle.net/csszilla/E4emz/1/embedded/result/

How we make hexagon with box shadow through css

Hello All

Check this demo for make hexagon with box-shadow through css.

Demo:- http://jsfiddle.net/csszilla/gmpZ6/5/
Full screen demo:- http://jsfiddle.net/csszilla/gmpZ6/5/embedded/result/

How we make paragraph inverted comma with css which set according to content size

Hello Guys

Today we learn how you make paragraph inverted comma with css.
here we use a q tag for put our paragraph content. Now inverted comma will coming from css with before and after tag.

q:before {
color: #fa4173;
font-family: Times New Roman, Times, serif;
content: '\201C';
font-size: 60px;
padding-right: 5px;
}
q:after {
color: #fa4173;
font-family: Times New Roman, Times, serif;
content: '\201D';
font-size: 60px;
padding-left: 5px;
margin-top: 5px;
}

Demo:- http://jsfiddle.net/csszilla/RQrsk/9/embedded/result/

how we make responsive 3D blocks with css

Hello Guys

Toady we understand how to make 3d responsive blocks with css.
Check out this demo and try to understand .

Demo:- http://jsfiddle.net/csszilla/RQrsk/embedded/result/

Basic concept of liquid css and design

Theory:-Hello Guys, hope you doing well.

Today i explain the basic concept of liquid design which make your web page totally fluid and looks good in all screen sizes.

Fonts sizes issue:-
Good question!! if we stick with our liquid design principles we’ll need to use relative font units. Our choices are:

1:-Em's
2:-%'s
3:-ex's
4:-css keywords


What is Liquid Design? The term "Liquid" means a webpage should flow smoothly in all screen sizes.

<style>
body { font-size:1.5em;}

.top_header { background:#666; color:#fff; min-height:50px; width:100%; float:left; padding:15px 0px;}
.block1 { width:50%; float:left; background:#033; min-height:50px;}
.block2 { width:50%; float:left; background:#090; min-height:50px;}

.middle_part { background:#CCC; width:100%; float:left; padding:15px 0px;}
.left_part { min-height:100px; float:left; width:30%; background:#960;}
.right_part { min-height:100px; float:left; width:70%; background:#690;}


.footer_part { background:#930; float:left; w…

CSS selectors by Alphabats

A::after
After is a pseudo element which is used for insert some text directly into webpage with out written in main html. CSS:- .button:after { content:"csszilla"; display:block;} HTML:- <a href="#" class="button"></a>


::before
before is a pseudo element which is used for insert some text directly into website, same as after element.
CSS:- .button:before { content:"csszilla"; display:block;} HTML:- <a href="#" class="button"></a>


:active The :active pseudo selector is used to change the color of element when clicked or when element is activated. Generally :active is used in a tag in navigation etc. CSS:- ul li a.active { background-color:#333;} HTML:- <ul> <li>    <a href="#" class="active">CSS ZILLA</a> </li> </ul> 


Attributecss has ability to target HTML based on their attribute. You are aware from class and ID. ok lets see also rel attribute. CSS:- h2[rel="back_…