CSS Tutorial - Table of contents

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 text file with the extension .css. Like any other file, you can place the style sheet on your web server or hard disk.

For example, let's say that your style sheet is named style.css and is located in a folder named style.

-www.csszilla.blogspot.in{root parent}
---index.html
-style{sub folder}
---style.css


 

Web Designing Interview Questions And Answers


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 cooperation output between world wide web consortium (W3C) and the web hypertext application technology working group(WHATWG).

Question: What is difference between  HTML4.0 and HTMl5 page structure?
Answers: 
A typical web page has numbers of sections like header, footer, navigation, sidebars. Now if we want to place these section we use div tags with regarding ID and classes.

Now but in HTML5 we use separate tags like for header we use <header> tag same as footer, navigation, article, aside, section.

Question: What is data list in HTML5?
Answer:  Datalist elements in HTMl5 provides us auto complete feature in textbox.

<datalist id="Country">
<option value="csszilla">
<option value="htmlcss">
<option value="jquery">
<option value="javascript">
<option value="csszilla">
</datalist>  

Question:  What are the different new form elements in HTML5?
Answers:  
  • color
  • date
  • datetime-local
  • email
  • time
  • url
  • range
  • telephone
  • number
  • search
Example: <input type="email" name="email"> 


Question:- Which browser supports HTML5?
Answers: Almost all web browser supports HTML5, mainly new version of web browsers example, IE9+, opera, mozilla, google crome, safari.

Question:- What is SVG?
Answer:- SVG is scalable vector graphic. Its a text based language used for draw graphics, images,. This facility makes its light version and render fast on web.

Question: What is canvas in HTML5?
Answer:- Canvas is HTML area on which we draw graphics.


What is a CSS File? It is used for what purpose?
Answer:- CSS stands for "Cascading Style Sheets". CSS is used to control font-size, font-weight, color, etc. In easy way we can say that css is used for change look and feel of any website.

How we set backgorund images in our website?
Answer:- < body background="picture.gif" >. 
Background-image property of css is used for set background image.

How do I add scrolling text to my page?
Answer:- Marque property of css is used for scrolling text in website.< marquee >CSS ZILLA is good tutorial blog for website< /marquee>

How do I make it so that someone can mail me by just clicking on text with subject?
Answer:- For this we use mailto function of css, for example <a href="mailto:code.madeeasy@gmail.com">Go to CSS Zilla</a>

What is external css? How we use this in our css?
Answer:- External css is used for make a seperate file of css and include in our index page in head section. 
<head>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
















how we user bxslider in our web template

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 Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->

<link href="/lib/jquery.bxslider.css" rel="stylesheet" />

Step 2: Create HTML markup in your html file.

<ul class="bxslider">
  <li><img src="/images/pic1.jpg" /></li>
  <li><img src="/images/pic2.jpg" /></li>
  <li><img src="/images/pic3.jpg" /></li>
  <li><img src="/images/pic4.jpg" /></li>

</ul>

Step 3: Call bx-slider java script.
Copy this code in your head section.

<script type="text/javascript">
$(document).ready(function(){
  $('.bxslider').bxSlider();

});
</script>

CSS Writing Standard

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: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
a {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
/* change colours to suit your needs */
ins {
background-color: #ff9;
color: #000;
text-decoration: none;
}
/* change colours to suit your needs */
mark {
background-color: #ff9;
color: #000;
font-style: italic;
font-weight: bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom: 1px dotted;
cursor: help;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* change border colour to suit your needs */
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #cccccc;
margin: 1em 0;
padding: 0;
}
input, select {
vertical-align: middle;
}
/*Heading Tags css */
h1, h2, h3, h5, h6 {
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
margin: 0px;
padding: 0px;
}
/*--Heading Tags css --*/
img {
border: 0;
outline: none;
max-width: 100%;
}
ul li {
list-style-type: none;
}
/*========================================== Reset Css End Here ==========================================*/

/*========================================== Body Section Start Here ==========================================*/
body, html {
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
color: #333;
font-weight: normal;
}
/*========================================== Wraper Section Start Here ==========================================*/
.main {}

/*========================================== Header Section Start Here ==========================================*/
heder {}
/*---Logo Section---*/
.logo{}

/*---Navigation Section---*/
nav{}
nav ul {}
nav ul li{}
nav ul li a{}
nav ul li:hover .sub-menu{}
nav ul li .sub-menu{}
nav ul li .sub-menu li {}
nav ul li .sub-menu li a {}

/*========================================== Header Section  End Here ==========================================*/



/*========================================== Main Contant Section  Start Here ==========================================*/
.main-content{}

/*--Left Side Bar Start Here --*/
 .sidebar-left{}
/*--Left Side Bar End Here --*/


/*--Right Side Bar Start Here --*/
 .sidebar-right{}
/*--Right Side Bar End Here --*/


/*-- Main Contant Area Start Here --*/
.content-area{}
/*-- Main Contant Area End Here --*/

/*========================================== Main Contant Section  End Here ==========================================*/



/*========================================== Footer Section  Start Here ==========================================*/
footer{}
/*========================================== Footer Section  End Here ==========================================*/


/*========================================== Rsponsive Part Start Here ==========================================*/

/*--Desktop--*/
@media screen and (max-width:1366px) {}

/*--Small Desktop--*/
@media screen and (max-width:1200px) {}

/*--Small Desktop, Laptop--*/
@media screen and (max-width:1024px) {}

/*--Tablet, Small Laptop--*/
@media screen and (max-width:979px) {}

/*--Big Mobile--*/
@media screen and (max-width:767px) {}

/*--iPhone Landscape View--*/
@media screen and (max-width:600px) {}

/*--iPhone Portrait View--*/
@media screen and (max-width:479px) {}

/*========================================== Responsive Part End Here ==========================================*/


/*========================================== Rsponsive Part End Here ==========================================*/




/*========================================== Body Section  End Here ==========================================*/

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

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 am ccomfortable with adobe dreamveaver. 

Now put bootstrap css ie. bootstrap.css in your css folder, and call this css by write this line in your head section.
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">

Their is two ways for change in bootstrap css either you directly work on main bootstrap css or make a simple blank stylesheet and change effects of css by taking parent class of that div.
I suggest you guys for second option because directly change in bootstrap css is typicla task for beginers and sometimes for experts.

when you go on bootstrap website you got a menu option 
1: Getting started
2:CSS
3:Components
4:Javascripts
5:Cusstomize

Now if you want to add a button in your website simple copy button code and paste in your html file
for example: <button type="button" class="btn btn-primary">Primary</button>
now if you want to change its color, background color simly take a parent class in which you placing your button code and change in css.

For example: <div class="avni_box"><button type="button" class="btn btn-primary">Primary</button></div>

Now button css will be
.avni_box .btn { color:#000; background-color:#333; font-size:12px; font-family:arial;}
same as applicable for all css attributes of bootstrap css section.

Same as applicable for Components section. In bootstrap 3.0 its provide built in navigation, navs, breadcrumbs, pagination, labels, button dropdowns, page header, progress bars etc.
Same as applicable for javascript section. For example if you want to add a slider in your web page. so click on carousel option than copy its default code and paste in div whose class name is slider or whatever you like for example 

<div class="slider_section"><div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div></div>