HTML 5 INTERVIEW QUESTIONS :
WHAT
IS HTML5?
HTML5 is the latest version of HTML standard supporting multimedia and graphical content.
HTML5 is the latest version of HTML standard supporting multimedia and graphical content.
HTML 5 is a new standard
for HTML whose main target is to deliver everything without need to any
additional plugins like flash, Silverlight etc. It has everything from animations,
videos, rich GUI etc.
HTML5 is cooperation output between World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG).
HTML5 is cooperation output between World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG).
What
purpose does HTML5 serve?
HTML5 is the proposed next standard for HTML 4.01, XHTML 1.0 and DOM Level 2 HTML. It aims to reduce the need for proprietary plug-in-based rich internet application (RIA) technologies such as Adobe Flash, Microsoft Silverlight, Apache Pivot, and Sun JavaFX.
HTML5 is the proposed next standard for HTML 4.01, XHTML 1.0 and DOM Level 2 HTML. It aims to reduce the need for proprietary plug-in-based rich internet application (RIA) technologies such as Adobe Flash, Microsoft Silverlight, Apache Pivot, and Sun JavaFX.
What
other advantages does HTML5 have?
► Cleaner markup
► Standardized approach to mobile devices support
► Additional semantics of new elements like <header>, <nav>, and <time>
► New form input types and attributes that will (and in Opera’s case, do) take the hassle out of scripting forms.
► Cleaner markup
► Standardized approach to mobile devices support
► Additional semantics of new elements like <header>, <nav>, and <time>
► New form input types and attributes that will (and in Opera’s case, do) take the hassle out of scripting forms.
HOW
DO YOU PLAY A VIDEO USING HTML5?
We can display video using the tag as shown below:
We can display video using the tag as shown below:
<video width=“320″
height=“240″ controls=“controls”>
<source src=“test.mp4″ type=“video/mp4″ />
</video>
<source src=“test.mp4″ type=“video/mp4″ />
</video>
HOW
DO YOU PLAY A AUDIO USING HTML5?
We can display audio using the tag as shown below:
We can display audio using the tag as shown below:
<audio
controls=“controls”>
<source src=“test.mp3″ type=“audio/mp3″ />
</audio>
<source src=“test.mp3″ type=“audio/mp3″ />
</audio>
HTML5 New Form
Attributes
HTML5 has several new
attributes for <form> and <input>.
New attributes for
<form>:
- autocomplete
- novalidate
New attributes for
<input>:
- autocomplete
- autofocus
- form
- formaction
- formenctype
- formmethod
- formnovalidate
- formtarget
- height and width
- list
- min and max
- multiple
- pattern (regexp)
- placeholder
- required
- step
Do
you know New Input Type Attribute in HTML5
Ans: we can use below new input type Attribute in HTML5
Type Value
tel The input is of type telephone number
search The input field is a search field
url a URL
email One or more email addresses
datetime A date and/or time
date A date
month A month
week A week
time The input value is of type time
datetime-local A local date/time
number A number
range A number in a given range
color A hexadecimal color, like #82345c
placeholder Specifies a short hint that describes the expected value of an input field
Ans: we can use below new input type Attribute in HTML5
Type Value
tel The input is of type telephone number
search The input field is a search field
url a URL
email One or more email addresses
datetime A date and/or time
date A date
month A month
week A week
time The input value is of type time
datetime-local A local date/time
number A number
range A number in a given range
color A hexadecimal color, like #82345c
placeholder Specifies a short hint that describes the expected value of an input field
Explain
the difference between HTML and HTML5
HTML5 is nothing more then upgraded version of HTML where in HTML5 Lot of new future like Video, Audio/mp3, date select function , placeholder , Canvas, 2D/3D Graphics, Local SQL Database added so that no need to do external plugin like Flash player or other library
HTML5 is nothing more then upgraded version of HTML where in HTML5 Lot of new future like Video, Audio/mp3, date select function , placeholder , Canvas, 2D/3D Graphics, Local SQL Database added so that no need to do external plugin like Flash player or other library
What
is the <!DOCTYPE>? Is it mandatory to use in HTML5?
The <!DOCTYPE> is an instruction to the web browser about what version of HTML the page is written in. The <!DOCTYPE> tag does not have an end tag. It is not case sensitive.
The <!DOCTYPE> declaration must be the very first thing in HTML5 document, before the <html> tag. As In HTML 4.01, all <! DOCTYPE > declarations require a reference to a Document Type Definition (DTD), because HTML 4.01 was based on Standard Generalized Markup Language (SGML). WHERE AS HTML5 is not based on SGML, and therefore does not require a reference to a Document Type Definition (DTD).
The <!DOCTYPE> is an instruction to the web browser about what version of HTML the page is written in. The <!DOCTYPE> tag does not have an end tag. It is not case sensitive.
The <!DOCTYPE> declaration must be the very first thing in HTML5 document, before the <html> tag. As In HTML 4.01, all <! DOCTYPE > declarations require a reference to a Document Type Definition (DTD), because HTML 4.01 was based on Standard Generalized Markup Language (SGML). WHERE AS HTML5 is not based on SGML, and therefore does not require a reference to a Document Type Definition (DTD).
What
are New Semantic/Structural Elements
HTML5 offers new elements for better structure:
Tag Description
<article> Defines an article
<aside> Defines content aside from the page content
<bdi> Isolates a part of text that might be formatted in a different direction from other text outside it
<command> Defines a command button that a user can invoke
<details> Defines additional details that the user can view or hide
<dialog> Defines a dialog box or window
<summary> Defines a visible heading for a <details> element
<figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<figcaption> Defines a caption for a <figure> element
<footer> Defines a footer for a document or section
<header> Defines a header for a document or section
<hgroup> Groups a set of <h1> to <h6> elements when a heading has multiple levels
<mark> Defines marked/highlighted text
<meter> Defines a scalar measurement within a known range (a gauge)
<nav> Defines navigation links
<progress> Represents the progress of a task
<ruby> Defines a ruby annotation (for East Asian typography)
<rt> Defines an explanation/pronunciation of characters (for East Asian typography)
<rp> Defines what to show in browsers that do not support ruby annotations
<section> Defines a section in a document
<time> Defines a date/time
<wbr> Defines a possible line-break
HTML5 offers new elements for better structure:
Tag Description
<article> Defines an article
<aside> Defines content aside from the page content
<bdi> Isolates a part of text that might be formatted in a different direction from other text outside it
<command> Defines a command button that a user can invoke
<details> Defines additional details that the user can view or hide
<dialog> Defines a dialog box or window
<summary> Defines a visible heading for a <details> element
<figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<figcaption> Defines a caption for a <figure> element
<footer> Defines a footer for a document or section
<header> Defines a header for a document or section
<hgroup> Groups a set of <h1> to <h6> elements when a heading has multiple levels
<mark> Defines marked/highlighted text
<meter> Defines a scalar measurement within a known range (a gauge)
<nav> Defines navigation links
<progress> Represents the progress of a task
<ruby> Defines a ruby annotation (for East Asian typography)
<rt> Defines an explanation/pronunciation of characters (for East Asian typography)
<rp> Defines what to show in browsers that do not support ruby annotations
<section> Defines a section in a document
<time> Defines a date/time
<wbr> Defines a possible line-break
Differences
Between SVG and Canvas:
SVG is a language for
describing 2D graphics in XML.
Canvas draws 2D
graphics, on the fly (with a JavaScript).
SVG is XML based, which
means that every element is available within the SVG DOM. You can attach
JavaScript event handlers for an element.
In SVG, each drawn shape
is remembered as an object. If attributes of an SVG object are changed, the
browser can automatically re-render the shape.
Canvas is rendered pixel
by pixel. In canvas, once the graphic is drawn, it is forgotten by the browser.
If its position should be changed, the entire scene needs to be redrawn,
including any objects that might have been covered by the graphic.
What
is HTML5 Web Storage?
Ans : In HTML5, we can store data locally within the user’s browser.It is possible to store large amounts of data without affecting the website’s performance.
Web Storage is more secure and faster.
there are two types of Web Storages
1.LocalStorage:stores data locally with no limit
2.SessionStorage:stores data for one session
Ans : In HTML5, we can store data locally within the user’s browser.It is possible to store large amounts of data without affecting the website’s performance.
Web Storage is more secure and faster.
there are two types of Web Storages
1.LocalStorage:stores data locally with no limit
2.SessionStorage:stores data for one session
WHAT
ARE THE DIFFERENT TYPES OF STORAGE IN HTML5?
HTML5 offers two new objects for storing data on the client:
LocalStorage – stores data with no time limit
1. <script type=“text/javascript”>
2. localStorage.lastname=“ZAG”;
3. document.write(localStorage.lastname);
4. </script>
SessionStorage – stores data for one session.The data is deleted when the user closes the browser window.
1. <script type=“text/javascript”>
2. sessionStorage.lastname=“ZAG”;
3. document.write(sessionStorage.lastname);
4. </script>
HTML5 offers two new objects for storing data on the client:
LocalStorage – stores data with no time limit
1. <script type=“text/javascript”>
2. localStorage.lastname=“ZAG”;
3. document.write(localStorage.lastname);
4. </script>
SessionStorage – stores data for one session.The data is deleted when the user closes the browser window.
1. <script type=“text/javascript”>
2. sessionStorage.lastname=“ZAG”;
3. document.write(sessionStorage.lastname);
4. </script>
What is the use of localStorage in HTML5?
Ans: Before HTML5 LocalStores was done with cookies. Cookies are not very good for large amounts of data, because they are passed on by every request to the server, so it was very slow and in-effective.
In HTML5, the data is NOT passed on by every server request, but used ONLY when asked for. It is possible to store large amounts of data without affecting the website’s performance.and The data is stored in different areas for different websites, and a website can only access data stored by itself.
And for creating localstores just need to call localStorage object like below we are storing name and address
1. <script type=“text/javascript”>
2. localStorage.name=“PHPZAG”;
3. document.write(localStorage.name);
4. </script>
5. <script type=“text/javascript”>
6. localStorage.address=“Newyork USA”;
7. document.write(localStorage.address);
8. </script>
What is the sessionStorage Object in html5 ? How to create and access?
Ans: The sessionStorage object stores the data for one session. The data is deleted when the user closes the browser window. like below we can create and access a sessionStorage here we created “name” as session
1. <script type=“text/javascript”>
2. sessionStorage.name=“PHPZAG”;
3. document.write(sessionStorage.name);
4. </script>
WHAT
IS THE DIFFERENCE BETWEEN HTML5 APPLICATION CACHE AND REGULATE HTML BROWSER
CACHE?
The new HTML5 specification allows browsers to prefetch some or all of a website assets such as HTML files, images, CSS, JavaScript, and so on, while the client is connected. It is not necessary for the user to have accessed this content previously, for fetching this content. In other words, application cache can prefetch pages that have not been visited at all and are thereby unavailable in the regular browser cache. Prefetching files can speed up the site’s performance, though you are of course using bandwidth to download those files initially.
The new HTML5 specification allows browsers to prefetch some or all of a website assets such as HTML files, images, CSS, JavaScript, and so on, while the client is connected. It is not necessary for the user to have accessed this content previously, for fetching this content. In other words, application cache can prefetch pages that have not been visited at all and are thereby unavailable in the regular browser cache. Prefetching files can speed up the site’s performance, though you are of course using bandwidth to download those files initially.
Local storage data
persists forever but session storage is valid until the browser is open, as
soon as the browser closes the session variable resets.
One of the most demanded
things by end user is offline browsing. In other words if internet connection
is not available page should come from browser cache i.e. offline and
application cache helps you to achieve the same.
Application cache helps
you to specify which files should be cached and not cached.
Cookies
|
Local storage
|
|
Client side / Server side.
|
Data accessible both at client
side and server side. Cookie data is sent to the server side with every
request.
|
Data is accessible only at the
local browser side. Server cannot access local storage until deliberately
sent to the server via POST or GET.
|
Size
|
4095 bytes per cookie.
|
5 MB per domain.
|
Expiration
|
Cookies have expiration attached
to it. So after that expiration the cookie and the cookie data get’s deleted.
|
There is no expiration data.
Either the end user needs to delete it from the browser or programmatically
using JavaScript we need to remove the same.
|
What is the manifest
file?
The manifest file is a
text file that instructs the browser what it should and should not cache when
the application cache is enabled. It is made up of three parts:
- Cache Manifest: Indicates
files to be cached after they are initially downloaded.
- Network: Indicates
files that require a server connection to load, and will not be cached.
- Fallback: Indicates
fallback pages in the case a page is not accessible.
Example manifest file:
CACHE MANIFEST
# 2014-01-15 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html/ /offline.html
HTML
5 Features:
Ans :
1. The <canvas> element for 2D drawing
2. The <video> and <audio> elements for media playback
3. local storage support.
4. Added New elements, like <figure>,<small>, <header>, <nav>,<article>, <footer>, <section>,<mark>
5. New form controls, like placeholder,calendar, date, time, email, url, search,required ,autofocus
6. In HTML5 there is only one <!doctype> declaration: <!DOCTYPE html>
Ans :
1. The <canvas> element for 2D drawing
2. The <video> and <audio> elements for media playback
3. local storage support.
4. Added New elements, like <figure>,<small>, <header>, <nav>,<article>, <footer>, <section>,<mark>
5. New form controls, like placeholder,calendar, date, time, email, url, search,required ,autofocus
6. In HTML5 there is only one <!doctype> declaration: <!DOCTYPE html>
The first thing in we
need to specify is the “manifest” file. “manifest” file helps you to define how
your caching should work. Below is the structure of the manifest file :-
CACHE MANIFEST
# version 1.0
CACHE :
Login.aspx
- All manifest file starts with CACHE MANIFEST statement.
- #( hash tag) helps to provide the version of the cache
file.
- CACHE command specifies which files needs to be cached.
- The content type of the manifest file should be
“text/cache-manifest”.
Below is how cache
manifest has been provided using ASP.NET C#.
Response.ContentType =
"text/cache-manifest";
Response.Write("CACHE
MANIFEST \n");
Response.Write("#
2012-02-21 v1.0.0 \n");
Response.Write("CACHE
: \n");
Response.Write("Login.aspx
\n");
Response.Flush();
Response.End();
One the cache manifest
file is created the next thing is to provide the link of the manifest file in
the HTML page as shown below.
<html manifest="cache.aspx">
When the above file runs
first time it gets added in the browser application cache and in case server
goes down the page is served from the application cache.
Application cache is
removed by changing version number to a new version number as specified in the
“#” tag in the below code.
CACHE MANIFEST
# version 2.0(new)
CACHE :
Login.aspx
Aboutus.aspx
NETWORK :
Pages.aspx
Fallback in application
cache helps you to specify the file which will displayed if the server is not
reachable. For instance in the below manifest file we are saying if someone
hits “/home” and if the server is not reachable then “homeoffline.html” file
should be served.
FALLBACK:
/home/ /homeoffline.html
Network command says
files which should not be cached. For example in the below code we are saying
that “home.aspx” should never be cached and or available offline.
NETWORK:
home.aspx
What is the application
cache, and what are its benefits?
The application cache
generates offline versions of a web application, making it accessible offline.
It also improves the site’s performance and speed.
How do you enable the
application cache?
To enable the
application cache, just add the manifest attribute inside the <html> tag
and link to the manifest file. If a web user visits a page with the manifest
attribute included, that page will be cached.
Difference Between GET
and POST methods
GET:
1) Data is appended to the URL.
2) Data is not secret.
3) It is a single call system
4) Maximum data that can be sent is 256.
5) Data transmission is faster
6) This is the default method for many browsers
POST:
1) Data is appended to the URL.
2) Data is Secret
3) It is a two call system.
4) There is no Limit on the amount of data.That is characters any amount of data can be sent.
5) Data transmission is comparatively slow.
6) No default and should be Explicitly specified.
GET:
1) Data is appended to the URL.
2) Data is not secret.
3) It is a single call system
4) Maximum data that can be sent is 256.
5) Data transmission is faster
6) This is the default method for many browsers
POST:
1) Data is appended to the URL.
2) Data is Secret
3) It is a two call system.
4) There is no Limit on the amount of data.That is characters any amount of data can be sent.
5) Data transmission is comparatively slow.
6) No default and should be Explicitly specified.
Questions:
1.
Do you know jQuery mobile?
2.
What are the advantages for using jQuery mobile?
3.
If we design page using jQuery mobile, can you able to redesign the same
page with javascript and css without using jQuery mobile?
4.
If so, then y u r using jQuery mobile, what are the advantage?
5.
What is html5 and advantage?
6.
what is css3 and advantage?
7.
responsive design?
8.
How to design a page have different look and feel for different browsers of
same content using css3?
9.
Css3 browser compatibility?
10. Caching
and local storage in HTML5?
11.
Designing jQuery plugin?
Q 1 What is the difference between HTML and HTML5 ?
A
1 HTML5 is nothing more then upgreaded version of
HTML where in HTML5 Lot of new future like
Video,
Audio/mp3, date select function , placeholder , Canvas, 2D/3D Graphics, Local
SQL Database added
so that no need to do external plugin like Flash player or other library
Q2 What is the <!DOCTYPE> ? Is it necessary to
use in HTML5 ?
A
2 The <!DOCTYPE> is an instruction to the
web browser about what version of HTML the page is written in. AND The
<!DOCTYPE> tag does not have an end tag and It is not case sensitive.
The
<!DOCTYPE> declaration must be the very first thing in HTML5 document,
before the <html> tag. As In HTML 4.01, all <! DOCTYPE >
declarations require a reference to a Document Type Definition (DTD), because
HTML 4.01 was based on Standard Generalized Markup Language (SGML). WHERE AS
HTML5 is not based on SGML, and therefore does not require a reference to a
Document Type Definition (DTD).
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Q
3 How many New Markup Elements you know in HTML5
A
3 Below are the New Markup Elements added in HTML5
Tag Description
<article>Specifies independent, self-contained content,
could be a news-article, blog post, forum post, or other articles which can be
distributed independently from the rest of the site.
<aside> For content aside from the content it is placed in. The aside
content should be related to the surrounding content
<bdi> For text that should not be bound to the
text-direction of its parent elements
<command>A button, or a radiobutton, or a checkbox
<details>For describing details about a document, or
parts of a document
<summary>A caption, or summary, inside the details
element
<figure> For grouping a section of stand-alone content,
could be a video
<figcaption>The caption of the figure section
<footer> For a footer of a document or section, could
include the name of the author, the date of the document, contact information,
or copyright information
<header>For an introduction of a document or section, could
include navigation
<hgroup>For a section of headings, using <h1> to
<h6>, where the largest is the main heading of the
section, and the others
are sub-headings
<mark>For text that should be highlighted
<meter> For a measurement, used only if the maximum and
minimum values are known
<nav>For a section of navigation
<progress>The state of a work in progress
<ruby>For ruby annotation (Chinese notes or
characters)
<rt>For explanation of the ruby annotation
<rp>What to show browsers that do not support the
ruby element
<section>For a section in a document. Such as chapters,
headers, footers, or any other sections of the
document
<time> For defining a time or a date, or both
<wbr> Word break. For defining a line-break
opportunity.
Q 4 What are the New Media Elements in HTML5? is
canvas element used in HTML5
A
4 Below are the New Media Elements have added in
HTML5
Tag Description
<audio> For multimedia content, sounds, music or other
audio streams
<video> For video content, such as a movie clip or other
video streams
<source>For media resources for media elements, defined
inside video or audio elements
<embed>For embedded content, such as a plug-in
<track> For text tracks used in mediaplayers
yes we can use
Canvas element in html5 like below
<canvas>
Q
5 Do you know New Input Type Attribute in HTML5
A
5 Yes we can use below new input type Attribute in
HTML5
Type Value
tel The input is of type telephone number
search The input field is a search field
url a URL
email One or more email addresses
datetime A date and/or time
date A date
month A month
week A week
time The input value is of type time
datetime-local A local date/time
number A number
range A number in a given range
color A hexadecimal color, like #82345c
placeholder Specifies a short hint that describes the
expected value of an input field
Q
:6 How to add video and audio in HTML5
A
:6 Like below we can add video in html5
<video
width="320" height="240" controls="controls">
<source src="pcds.mp4"
type="video/mp4" />
<source src="pcds.ogg"
type="video/ogg" />
</video>
And audie like
this
<audio
controls="controls">
<source src="song.ogg"
type="audio/ogg" />
<source src="song.mp3"
type="audio/mpeg" />
</audio>
Q
:7 What the use of Canvas Element in HTML5
A
:7 The canvas element is used to draw graphics
images on a web page by using javascript like below
<canvas id="pcdsCanvas"
width="500" height="400"></canvas>
<script type="text/javascript">
var
pcdsCanvas=document.getElementById("pcdsCanvas");
var
pcdsText=pcdsCanvas.getContext("2d");
pcdsText.fillStyle="#82345c";
pcdsText.fillRect(0,0,150,75);
</script>
Q
:8 What is the use of localStorage in HTML5 ?
A
:8 Before HTML5 Local Stores was done with cookies.
Cookies are not very good for large amounts of data, because they are passed on by every
request to the server, so it was very slow and in-effective.
In HTML5, the data is NOT passed on by every
server request, but used ONLY when asked for. It is possible to store large amounts of data without
affecting the website's performance. and The data is stored in different areas for different
websites, and a website can only access data stored by itself.
And for creating local stores just need to
call local Storage object like below we are storing name and address
<script type="text/javascript">
localStorage.name="PCDS";
document.write(localStorage.name);
</script>
<script type="text/javascript">
localStorage.address="Mumbai
India..";
document.write(localStorage.address);
</script>
Q
:9 What is the session Storage Object in html5 ? How
to create and access ?
A
:9 The session Storage object stores the data for
one session. The data is deleted when the user closes the browser window. like below we can create and access a session
Storage here we created "name" as session
<script type="text/javascript">
sessionStorage.name="PCDS";
document.write(sessionStorage.name);
</script>
Q
10: What is the <!DOCTYPE> ? Is it necessary to use in HTML5 ?
A10: The <!DOCTYPE> is an instruction to
the web browser about what version of HTML the
page is written in. AND The
<!DOCTYPE> tag does not have an end tag and It is not case sensitive.
The <!DOCTYPE> declaration must be the
very first thing in HTML5 document, before the <html> tag. As
In HTML 4.01, all <! DOCTYPE >
declarations require a reference to a Document Type Definition (DTD), because HTML 4.01 was based on Standard Generalized Markup Language (SGML). WHERE AS HTML5 is not based on SGML, and therefore does not
require a reference to a Document Type Definition
(DTD).
Q
11: What purpose does HTML5 serve?
A11: HTML5 is the proposed next standard for HTML 4.01, XHTML 1.0 and
DOM Level 2 HTML. It aims to reduce the need for proprietary plug-in-based rich internet application (RIA) technologies such as Adobe Flash, Microsoft Silverlight, Apache Pivot, and
Sun JavaFX.
Q
12: What is the difference between HTMl5 Application cache and regular
HTML browser cache?
A12: HTML5 specification allows browsers to pre fetch
some or all of a website assets such as HTML files,
images, CSS, JavaScript, and so on, while the
client is connected. It is not necessary for
the user to have accessed this content previously, for fetching
this content. In other words, application cache can pre fetch pages that have not been visited at all and are
thereby unavailable in the regular browser cache. Pre fetching files can speed up the site’s
performance, though you are of course using bandwidth to download those files initially.
Q
13: HOW DO YOU PLAY A AUDIO USING HTML5?
A13: We can display audio using the tag as
shown below:
<audio controls=“controls”>
<source src=“test.mp3″ type=“audio/mp3″ />
</audio>
Q
14: WHAT ARE THE DIFFERENT TYPES OF STORAGE IN HTML5?
A14: HTML5 offers two new objects for storing data on
the client:
LocalStorage – stores data with no time limit
<script type=“text/javascript”>
localStorage.lastname=“ZAG”;
document.write(localStorage.lastname);
</script>
SessionStorage – stores data for one session.The data is
deleted when the user closes the browser window.
<script type=“text/javascript”>
sessionStorage.lastname=“ZAG”;
document.write(sessionStorage.lastname);
</script>
Q
15: WHAT ARE THE NEW APIS PROVIDED BY THE HTML 5 STANDARD? GIVE A
BRIEF DESCRIPTION OF EACH?
A15: The canvas element: Canvas consists of a
drawable region defined in HTML code with height and width attributes. JavaScript code may access the area
through a full set of drawing functions similar to other common 2D APIs, thus allowing for dynamically
generated graphics. Some anticipated uses of the canvas include building graphs, animations, games, and
image composition.
Timed media playback
Offline storage database
Document editing
Drag-and-drop
Cross-document messaging
Browser history management
MIME type and protocol handler registration
Q16: WHAT OTHER ADVANTAGES DOES HTML5 HAVE?
A16: Cleaner markup
Standardized approach to mobile devices
support
Additional semantics of new elements
like <header>, <nav>, and <time>
New form input types and attributes that
will (and in Opera’s case, do) take the hassle out of scripting forms.
Q
17: GIVE AN EXAMPLE OF NEW ELEMENTS IN HTML5 TO SUPPORT MULTIMEDIA AND
GRAPHICS?
A17: HTML5 introduced many elements such as ,
instead of to support multimedia.
Q
18: WHAT IS HTML5?
A18: HTML5 is the latest version of HTML standard supporting multimedia and graphical
content.
Q19: WHAT IS THE DIFFERENCE BETWEEN HTML5 APPLICATION
CACHE AND REGULATE HTML BROWSER CACHE?
A19: The new HTML5 specification allows browsers to
pre fetch some or all of a website assets such as HTML files, images, CSS, JavaScript, and so on, while
the client is connected. It is not necessary for the user to have accessed this content previously, for
fetching this content. In other words, application cache can
prefetch pages that have not been visited at all
and are thereby unavailable in the regular browser cache. Prefetching files can speed up the site’s performance, though you
are of course using bandwidth to download those files
initially.
Q
20: WHAT PURPOSE DOES HTML5 SERVE?
A20: HTML5 is the proposed next standard for HTML
4.01, XHTML 1.0 and DOM Level 2 HTML. It aims to reduce the need for proprietary plug-in-based
rich internet application (RIA) technologies such as Adobe Flash, Microsoft Silver light, Apache Pivot, and
Sun JavaFX.
Q
21: WHAT IS THE STATUS OF THE DEVELOPMENT OF THE HTML 5 STANDARD?
A21: HTML5 is being developed as the next major
revision of HTML (HyperText Markup Language), the core markup language of the World Wide Web. The Web
Hypertext Application Technology Working Group (WHATWG) started work on the specification in
June 2004 under the name Web Applications 1.0.[1] As of March 2010[update], the specification is in the
Draft Standard state at the WHATWG, and in Working Draft state at the W3C.
Q
22: What is the status of the development of the HTML 5 standard?
A22: HTML5 is being developed as the next major
revision of HTML (HyperText Markup Language), the core markup language of the World Wide Web. The Web
Hypertext Application Technology Working Group (WHATWG) started work on the specification in
June 2004 under the name Web Applications 1.0.[1] As of March 2010[update], the specification is in the
Draft Standard state at the WHATWG, and in Working Draft state at the W3C.
Q 23: What is the different between canvas and svg?
A23:
Canvas
|
SVG
|
|
|
CSS3
INTERVIEW QUESTIONS :
CSS-CSS3:
CSS is used to control
the style and layout of multiple Web pages all at once.
text-wrap: values?
text-wrap: normal|none|unrestricted|suppress;
text-wrap: values?
text-wrap: normal|none|unrestricted|suppress;
What is CSS?
CSS stands for Cascading
Style Sheets
CSS Syntax
A CSS rule has two main
parts: a selector, and one or more declarations:
The selector is normally
the HTML element you want to style. Each declaration consists of a property and
a value.
The property is the
style attribute you want to change. Each property has a value.
A CSS declaration always
ends with a semicolon, and declaration groups are surrounded by curly brackets:
Comments are used to
explain your code, and may help you when you edit the source code at a later
date. Comments are ignored by browsers.
A CSS comment begins
with "/*", and ends with "*/", like this:
What is the difference
between CSS & CSS3?
CSS3 is the upgraded
version of CSS with new features like Selectors, Box
model, Backgrounds and Borders, Text Effects, 2D/3D Transformations,
Animation, Multiple column layout, User Interface etc.
What is the difference
between an ID selector and CLASS?
An ID selector
identifies and sets style to only one occurrence of an element, while CLASS can
be attached to any number of elements.
The id Selector:
The id selector is used
to specify a style for a single, unique element.
The id selector uses the
id attribute of the HTML element, and is defined with a "#".
The class Selector:
The class selector is
used to specify a style for a group of elements. Unlike the id selector, the
class selector is most often used on several elements.
This allows you to set a
particular style for many HTML elements with the same class.
The class selector uses
the HTML class attribute, and is defined with a "."
* Do NOT start a
ID/Class name with a number.
What are style sheet
properties?
CSS Background, CSS
Text, CSS Font, CSS Border, CSS Outline, CSS Margin, CSS Padding, CSS List, CSS
Table
List various font
attributes used in style sheet?
font-style,
font-variant, font-weight, font-size/line-height, font-family, caption, icon,
menu, message-box, small-caption, status-bar
What is the correct HTML
for referring to an external style sheet?
<link
rel="stylesheet" type="text/css" href="mystyle.css">
Where in an HTML
document is the correct place to refer to an external style sheet?
In the <head>
section
What are different ways
to apply styles to a Web page?
4 ways we can declare
the CSS in HTML.
Inline, Internal,
External as link("<link href="css/styles.css"
rel="stylesheet" type="text/css">, Import css
by ("@import url('path');")
Cascading order:
What style will be used
when there is more than one style specified for an HTML element?
Generally speaking we
can say that all the styles will "cascade" into a new
"virtual" style sheet by the following rules, where number four has
the highest priority:
Browser
default
External
style sheet
Internal
style sheet (in the head section)
Inline
style (inside an HTML element)
So, an inline style
(inside an HTML element) has the highest priority, which means that it will
override a style defined inside the <head> tag, or in an external style
sheet, or in a browser (a default value).
What is contextual
selector?
For example,
consider the following rules:
H1 { color:
red }
EM { color:
red }
Although the intention
of these rules is to add emphasis to text by changing its color, the effect
will be lost in a case such as:
<H1>This headline
is <EM>very</EM> important</H1>
We address this case by
adding a contextual rule to the previous two that sets the text color to blue
whenever an EM occurs anywhere within an H1:
H1 { color:
red }
EM { color:
red }
H1 EM {
color: blue }
The third rule will also
match the following fragment:
<H1>This
<SPAN
class="myclass">headline is <EM>very</EM>
important</SPAN></H1>
A contextual selector
may also contain attribute selectors.
What are the powerful
features of CSS3?
Media Query and
Animations are the powerful features of css3 A media query consists of a media
type and at least one expression that limits the style sheets scope by using
media features, such as wid...
Set Font Size With Em:
To avoid the resizing
problem with older versions of Internet Explorer, many developers use em
instead of pixels.
The em size unit is
recommended by the W3C.
1em is equal to the
current font size. The default text size in browsers is 16px. So, the default
size of 1em is 16px.
The size can be
calculated from pixels to em using this formula: pixels/16=em
Ems in CSS
Generally, 1em = 12pt = 16px = 100% it is use to scale the value in web.
Crossbrowser Solution
for Lists:
Example explained:
For
ul:
Set
the list-style-type to none to remove the list item marker
Set
both padding and margin to 0px (for cross-browser compatibility)
For
all li in ul:
Set
the URL of the image, and show it only once (no-repeat)
Position
the image where you want it (left 0px and down 5px)
Position
the text in the list with padding-left
Positions in CSS:
Values for position:
static, relative, absolute, fixed, inherit
Here, I’ve listed basic
difference between css positioning properties.
Position-Relative. This
type of positioning is probably the most confusing and misused. What it really
means is “relative to itself”. If you set position: relative;on an element but
no other positioning attributes (top, left, bottom or right), it will no effect
on it’s positioning at all, it will be exactly as it would be if you left it as
position: static; But if you DO give it some other positioning attribute, say,
top: 10px;, it will shift it’s position 10 pixels DOWN from where it would
NORMALLY be.
Position-Absolute. This
is a very powerful type of positioning that allows you to literally place any
page element exactly where you want it. You use the positioning attributes top,
left bottom and right to set the location. Remember that these values will be
relative to the next parent element. If there is no such parent, it will
default all the way back up to the <html> element itself meaning it will
be placed relatively to the page itself.
Position-Fixed. This
type of positioning is fairly rare but certainly has its uses. A fixed position
element is positioned relative to the viewport, or the browser window itself.
The viewport doesn’t change when the window is scrolled, so a fixed positioned
element will stay right where it is when the page is scrolled.
What does z-index
do?
The z-index property
specifies the stack order of an element.
What is Grouping?
When more than one
selector shares the same declaration, they may be grouped together via a
comma-separated list; this allows you to reduce the size of the CSS (every bit
and byte is important) and makes it more readable. The following snippet
applies the same background to the first three heading elements.
h1, h2, h3 {background:
red;}
What are Child
Selectors?
A child selector is used
when you want to match an element that is the child of another specific
element. The parent and child selectors are separated by spaces. The following
selector locates an unordered list element within a paragraph element and makes
a text within that element bold.
p > ul {font-weight:
bold;}
What are Pseudo Classes?
Pseudo classes allow you
to identify HTML elements on characteristics (as opposed to their name or
attributes). The classes are specified using a colon to separate the element
name and pseudo class. A good example is the :link and :visited pseudo classes
for the HTML A element. Another good example is first-child, which finds an
element’s first child element.
The following CSS makes
all visited links red and green, the actual link text becomes yellow when the
mouse pointer is positioned over it, and the text of the first element of a
paragraph is bold.
a:link {font-color:
red;}
a:visited {font-color:
green;}
a:hover {font-color:
yellow;}
p.first-child
{font-weight: bold;}
CSS box model is a
rectangular space around a HTML element which defines border, padding and
margin.
Border: - This defines
the maximum area in which the element will be contained. We can make the border
visible, invisible, define height and width etc.
Padding: - This defines
the spacing between border and element.
Margin: - This defines
the spacing between border and any neighboring elements.
Here the interviewer is
expecting you to answer one of two text effects by CSS.Below are two effects
which are worth noting. Shadow text effect
Syntax:
.specialtext
{
text-shadow: 5px 5px 5px #FF0000;
}
What’s the difference
between an inline element and a block element?
Inline --à Span same line such as <b> Hi</b>.
Block element -à div such as box, container, etc
No Answer:
1. Float option.
2. Box layout.
4. CSS3 keyframes uses and
syntax.
5. In CSS3 to enable he
hardware acceleration for mobile application we need to use translate3d syntax.
6. Manifest use to load the
webpage in the offline. Cache.
7. What is responsive layout.
8. Sprites images.
9. Retina images.
10. CSS3 new properties (shadow, radius, gradient, animation etc..)
11. SASS uses.
12. Word wrap in CSS3.
13. What
is Boostrap? Bootstrap
is an open-source Javascript framework developed by the team at Twitter.
It is a combination of HTML, CSS, and Javascript code designed to help build user interface components.
Bootstrap is Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.
Bootstrap was also programmed to support both HTML5 and CSS3
Bootstrap is a CSS and Javascript framework that is used within your HTML. Bootstrap provides more advanced functionality to your web site.
It is a combination of HTML, CSS, and Javascript code designed to help build user interface components.
Bootstrap is Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.
Bootstrap was also programmed to support both HTML5 and CSS3
Bootstrap is a CSS and Javascript framework that is used within your HTML. Bootstrap provides more advanced functionality to your web site.
Q
1 What is the difference between CSS and CSS3 ?
A
1 CSS3 is upgreaded version of CSS with new future
like Selectors,Box Model, Backgrounds and Borders, Text Effects,2D/3D
Transformations, Animations, Multiple Column Layout,User Interface etc
Q
2 List out CSS3 modules
A
2 Below are the listed major modules
Selectors
Box Model
Backgrounds and Borders
Text Effects
2D/3D Transformations
Animations
Multiple Column Layout
User Interface
Q3 What new futures added in CSS3 for Borders and how
Browser Support it?
A
3 following border futures added
border-radius
box-shadow
border-image
and all modern
Browser Support it like below
Internet Explorer 9
supports border-radius and box-shadow
Firefox requires the
prefix -moz- for border-image.
Chrome and Safari
requires the prefix -webkit- for border-image.
Opera requires the
prefix -o- for
border-image.
Q
4 How you will create Rounded Corners using css3
A
4 We have to creat a class like below
<style>
.roundc{
border:2px solid
#ff0000;
border-radius:25px;
background:#dddddd;
width:300px;
-moz-border-radius:25px;
/* Firefox */
-webkit-border-radius:25px;
/* Chrome and Safari */
-o-border-radius:25px;
/* Opera */
}
</style>
and we have to add
this class where we want the round corner like in below div
<div
class="roundc" > this is the round corner by css3 </div>
This is the div
and round corner by css3
Q 5 How we create border using images by CSS3?
A 5 By using border-image: property of css3 we
can create a border using images like below
.roundpcds
{
border-image:url(borderpcds.png)
30 30 round;
-moz-border-image:url(borderpcds.png)
30 30 round; /* Firefox */
-webkit-border-image:url(borderpcds.png)
30 30 round; /* Safari and Chrome */
-o-border-image:url(borderpcds.png)
30 30 round; /* Opera */
}
.stretchPcds
{
-moz-border-image:url(borderpcds.png)
30 30 stretch; /* Firefox */
-webkit-border-image:url(borderpcds.png)
30 30 stretch; /* Safari and Chrome */
-o-border-image:url(borderpcds.png)
30 30 stretch; /* Opera */
border-image:url(borderpcds.png)
30 30 stretch;
}
Q
6 How you will create Box Shadow and text Shadow
using CSS3
A
6 Like below we can create Box Shadow using CSS3
text-shadow: h-shadow v-shadow blur color;
.boxshadowpcds
{
box-shadow: 10px 10px 5px #ccccc;
}
.textshadowpcds
{
text-shadow: 5px
5px 5px #FF0000;
}
and then need to use
these class boxshadownpcds ,textshadowpcds
Q7 What is the CSS3 The background size Property
A
7 The background-size property specifies the size
of the background image.
As we know Before
CSS3, the background image size was find out by the real size of the image. In
CSS3 it is possible to specify the size of the background image, which allows
you to re-use background images in different ways.
.pcdsbp1
{
background:
url(background.gif);
-moz-background-size:
80px 60px;
/* Firefox 3.6 */
background-size:
80px 60px;
/* or we can do background-size:100% 100%;*/
background-repeat:
no-repeat;
}
Q
8 What is the word wrap / word wrapping in CSS3 ?
A
8 To Allow long words to be able to break and wrap
onto the next line in css3 we used word-wrap property like below class
.wordwrappcds{
word-wrap:break-word;
}
Q
9 What is the CSS3 animation ?
A
9 When the animation is created in the @keyframe,
bind it to a selector, otherwise the animation will have no effect.
Bind the animation to a
selector by specifying at least these two CSS3 animation properties:
Specify the name of the
animation
Specify the duration of
the animation
animation: name duration timing-function delay
iteration-count direction;
div
{
animation:mymove 5s infinite;
-moz-animation:mymove 5s infinite; /* Firefox */
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
-o-animation:mymove 5s infinite; /* Opera */
}
{
animation:mymove 5s infinite;
-moz-animation:mymove 5s infinite; /* Firefox */
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
-o-animation:mymove 5s infinite; /* Opera */
}
Q 10 What is .rolloverfordnd?
A10 .rolloverfordnd is a class selector to which the
style gets applied. Dot(.) is used for class selector as it applies to any HTML
elements that have the attribute as: class="rollverfordnd". This
attribute can be added to multiple elements such that, if separate declarations
are defined then the declaration with a specific selector win over any other.
Q12 Why my div are of different size in IE?
A12 The specification which is been given for the
size of div in IE is as follows:
Width of a box (i.e. a
containing area) in CSS = width + border +padding (+margin).
Total box width is:
300px with a padding of 10px and a border of 5px. This requires the total area
of 330px. IE5 uses different rules and out of width it subtracts the padding
and border from the specific width so the total width becomes 270px. So,
instead of 330px, IE uses 270px that is why the div are of different sizes.
Q13 What are the media types CSS allows?
A13 Media is used to render the design and customize the documents. Media types allow user to load
and apply their own selected style sheets. Media control is applied to external
style sheets, in this way user can save time by retrieving the sheets from the
network itself.
Example: Speech based browsers can avoid the download of
style sheets which are designed for visual rendering.
Q13 Can someone else's Style Sheet be used without
their permission?
A13 Style sheet information is written using special
language syntax. Yes, someone else’s style sheet can be used without their
permission, but it is not recommended, as it might overload the server. So, a
local copy should be maintained, created and used instead of referencing a
remote copy.
Q14 Which style specification method should be used?
A14 Style specification method in your document
should be used according to your need and requirements. The methods that can be
used are:
- External Style Sheets: should be used when you want to apply the same
style to multiple documents.
- Embedded Style Sheets: should be used if you want to specify styles for
a single document.
- Inline Styles: should be used if you want to apply style to one
or few elements in a document.
Q15 How do you override the underlining of hyperlinks?
A15 Using CSS extra style functionality can be
provided, that can control the status of underlining of hyperlinks. You can use
style sheets in whatever way you want and can control the look and style of
your display. The way in which it can be done is by introducing external level
style sheet:
A {
text-decoration: none } //within an anchor element as:
<a
HREF="example.htm" STYLE="text-decoration: none">link
text</a>
Q16 What are logical and physical tags?
A17 - Physical tags are known as presentational markup. They are
used with recent versions of HTML.
It suggests the visual appearance of the
content. Ex: Italics, Underline, Bold
- Logical tags are not used for appearances, but they are used
to show the purpose of the content written. For EX: em tag is used for emphasis not for any other thing.
Q17 What is external Style Sheet? How to link it with
HTML document?
A17 External Style Sheet allows you to write the
style content just like you do in a normal style sheet, but the advantage of it
is that, it can be used anywhere and can be linked with HTML documents. It is
very easy, convenient and portable way to use the formatting for the entire
site.
External Style sheets
can be linked with HTML documents by using a LINK element in HEAD area. It has
the extension as .css. Example
code:
<HEAD>
<LINK
href="special.css" rel="stylesheet"
type="text/css">
</HEAD>
Q18 What is imported Style Sheet? How to link it with
HTML document?
A18 Imported Style Sheet allows you to import the custom made style sheet from anywhere, in your HTML document. In this, one main sheet
is made that consists of declarations applied to the whole site and other sheet
is made, that consists of only specific declarations applied to specific
documents. To link imported style sheet to HTML document @import is used in the
STYLE element.
For example:
<STYLE
TYPE="text=css">
<!--
@import
url(http://www.and.so.on.partial1.css);
@import
url(http://www.and.so.on.partial2.css);
.... Other
statements-->
</STYLE>
Q19 How the concept of Style sheet is different from
HTML?
A19 HTML is an easy way to represent the structure,
but when it comes to style then HTML becomes very hard to work with. The
concept of style sheet is introduced to make the work easy for you to design
without any hassles. Style sheets increases browser capabilities and allow
different formatting options which have not been included in HTML.
Q20 Can CSS be used with other than HTML documents?
A20 Yes. CSS can be used with any ny structured
document format. e.g. XML, however, the method of linking CSS with other
document types has not been decided yet.
Can Style Sheets and
HTML stylistic elements be used in the same document?
Yes. Style Sheets
will be ignored in browsers without CSS-support and HTML stylistic elements
used.
Q21 What are pseudo-classes?
A21 Pseudo-classes are fictional(imaginational) element types that do not exist in HTML.
In CSS1 there is only one element type which can be classed this way, namely
the A element (anchor). By creating three fictional types of the A element
individual style can be attached to each class. These three fictional element types are: A as unvisited link, A as active link and A as
visited link. Pseudo-classes are created by a colon followed by pseudo-class’s
name. They can also be combined with normal classes, e.g.:
A:link {background:
black; color: white}
A:active {background:
black; color: red}
A:visited {background:
transparent; color: black}
<A HREF….>This
anchor (or rather these anchors) will be displayed as declared above</A>
A.foot:link {background:
black; color: white}
A.foft:active
{background; black: color: red}
A.foot:visited
{background: transparent; color: black}
<A CLASS=foot
HREF….>This anchor and all other anchors with CLASS foot will be displayed
as declared above</A>
Q22 How do I design for backward compatibility using
Style Sheets?
A22 Existing HTML style methods (such as <font
SIZE> and <b>) may be easily combined with style sheet specification methods. Browsers that do
not understand style sheets will use the older HTML formatting methods, and
style sheets specifications can control the appearance of these elements in
browsers that support CSS1.
Q23 As a reader, how can I make my browser recognize
my own style sheet?
A23 Netscape
It is not possible
to do this in Netscape yet (as of version 4.0.)
Internet Explorer
3.0 (Win95/NT)
[It is possible to
do this at least in Windows95/NT, but no user interface is provided. Unknown
how this might be accomplished on other operating systems.]
1. Open the Registry
editor (Start..Run..regedit..ENTER)
2. Under the
‘HKEY_LOCAL_MACHINE\Software\Microsoft\InternetExplorer\Styles’ key,
Edit..New..String Value
3. The new value
should be called ‘StyleSheet Pathname’
4. For the value,
type in the full directory path of your .css style sheet.
Internet Explorer 4.0
(Win95/NT)
1. Under the View menu,
select ‘Internet Options’.
2. Under the
‘General’ tab, choose the ‘Accessibility’ button.
3. Choose the
‘Format documents using my style sheet’ check box and ‘Browse…’ to the location
of your .css style sheet.
Q24 How do I get rid of the gap under my image?
A24 Images are inline elements, which means they are
treated in the same way as text. Most people kind of know this – they know that
if you use ‘text-align:center’ on an image it will be centred. What many people
don’t realise is that this means you will have a gap underneath an image. This
gap is for the descenders of letters like j,q,p,y and g. To get rid of this gap
you need to make the image block-level – like this :
CSS img {display:block;}
One problem that this
can cause is when you want to have a few images next to each other – if they
are block-level, they won’t be next to each other. To get around that, you can
use float:left. Of course, this might present another problem – maybe you don’t
want the image to float left. In this case, you can use an unordered list like
this :
CSS
ul, li {
list-style-type:none;
padding:0;
margin:0 auto;
}
ul {
width:150px;
}
li {
float:left;
}
HTML
<ul>
<li>
<img
src="wine.jpg" alt="wine" width="50"
height="50" />
</li>
</ul>
Q25 What is CLASS selector?
A25 Class selector is a “stand alone” class to which
a specific style is declared. Using the CLASS attribute the
declared style can then
be associated with any HTML element. The class selectors are created by a
period followed by the class’s name. The name can contain characters a-z, A-Z,
digits 0-9, period, hyphen, escaped characters, Unicode characters 161-255, as
well as any Unicode character as a numeric code, however, they cannot start
with a dash or a digit. (Note: in HTML the value of the CLASS attribute can
contain more characters).It is a good practice to name classes according to
their function than their appearance.
.footnote {font: 70%} /*
class as selector */
<ADDRESS
CLASS=footnote/>This element is associated with the CLASS
footnote</ADDRESS>
<P
CLASS=footnote>And so is this</P>
Q26 What is CSS declaration?
A26 CSS declaration is style attached to a specific
selector. It consists of two parts; property which is equivalent of
HTML attribute,
e.g. text-indent:
and value which is equivalent of HTML
value,
e.g. 10pt.
NOTE: properties
are always ended with a colon.
Q27 What is ‘important’ declaration?
A27 Important declaration is a declaration with
increased weight. Declaration with increased weight will override declarations
with normal weight. If both reader’s and author’s style sheet contain
statements with important declarations the author’s declaration will override
the reader’s.
BODY {background: white
! important; color: black}
In the example above the
background property has increased weight while the color property has normal.
Q28 What is cascade?
A28 Cascade is a method of defining the weight
(importance) of individual styling rules thus allowing
conflicting rules to be
sorted out should such rules apply to the same selector.
Declarations with
increased weight take precedence over declaration with normal weight:
P {color: white !
important} /* increased weight */
P (color: black} /*
normal weight */
Q29 Are Style Sheets case sensitive?
A29 No. Style sheets are case insensitive. Whatever
is case insensitive in HTML is also case insensitive in CSS.
However, parts that are
not under control of CSS like font family names and URLs can be case sensitive
– IMAGE.gif and image.gif is not the same file.
Q30 How do I have a non-tiling (non-repeating)
background image?
A30 With CSS, you can use the
background-repeat property. The background repeat can be included in the
shorthand background property, as in this example:
body {
background: white
url(example.gif) no-repeat ;
color: black ;
}
Q31 Styles not showing?
A31 There are different ways to apply CSS to a HTML
document with a stylesheet, and these different ways can be combined:
inline (internal)
(Deprecated for XHTML)
embedded (internal)
linked (external) and
@import (external)
Note: An external stylesheet is a text file that
contains only CSS Styles. HTML comments are not supposed to be in there and can
lead to misinterpretation (> is the CSS “Child” selector!).
Q32 How do I quote font names in quoted values of the
style attribute?
A32 The attribute values can contain both single
quotes and double quotes as long as they come in matching
pairs. If two pair of
quotes are required include single quotes in double ones or vice versa:
<P
STYLE="font-family: 'New Times Roman'; font-size: 90%">
<P
STYLE='font-family: "New Times Roman"; font-size: 90%'>
It’s been reported the
latter method doesn’t work very well in some browsers, therefore the first one
should be used.
Q33 What is property?
A33 Property is a stylistic parameter (attribute) that can be influenced through CSS
Eg: FONT or WIDTH.
There must always be a
corresponding value or values set to each property,
Eg: font: bold or font: bold san-serif.
Q34 Can I include comments in my Style Sheet?
A34 Yes. Comments can be written anywhere where
whitespace is allowed and are treated as white space
themselves. Anything
written between /* and */ is treated as a comment (white space).
NOTE: Comments
cannot be nested.
Q35 What is the difference between ID and CLASS?
A35 ID identifies and sets style to one and only one occurrence of an element while class can be attached to any number of elements. By singling out one occurrence of an element the
unique value can be declared to said element.
SS
#eva1 {background: red; color: white}
.eva2 {background: red; color: white}
HTML – ID
<P
ID=eva1>Paragraph 1 - ONLY THIS occurrence of the element P (or single
occurrence of some other element) can be identified as eva1</P>
<P
ID=eva1>Paragraph 2 - This occurrence of the element P CANNOT be identified
as eva1</P>
HTML – CLASS
<P
class=eva2>Paragraph 1 - This occurrence of the element P can be classified
as eva2</P>
<P
class=eva2>Paragraph 2 - And so can this, as well as occurrences of any
other element, </P>
Q36 How do you make a tool tip that appears on hover?
A36 The most simple way is to use the ‘title’
attribute like this…
HTML
<span title=”Example of the title attribute
in use”>like this</span>
CSS
a.tooltip {
position:relative;
cursor:help;
}
a.tooltip span {
display: none;
position:absolute;
top:1.5em;
left:0;
width:15em;
padding:0 2px;
}
a.tooltip:hover {
display:inline;
}
a.tooltip:hover span {
display:block;
border:1px solid gray;
background-color:white;
}
HTML
<a
class="tooltip" href="#n">Karl Marx<span>-info
goes here-</span></a>
Without this part…
a.tooltip:hover {
display:inline;
}
..it won’t work in IE.
The “#n” in the link is
to prevent the page from jumping to the top if the link is clicked. The “href”
part is necessary as it won’t work in IE without it.
Q37 What is cascading order?
A37 Cascading order is a sorting system consisting of rules by which declarations are sorted out so that
there are not conflicts as to which declaration is to influence the
presentation. The sorting begins with rule no 1. If a match is found the search is over. If there
is no match under rule no 1 the search continues under rule no 2 and so on.
1. Find all declarations
that apply to a specific selector/property and Declare the specified style if
the selector matches the element if there isn’t any Let the element inherit its
parent property if there isn’t any Use initial value.
2. Sort by weight
(! important) Increased weight take precedence over normal weight.
3. Sort by origin
Rules with normal weight declared in author’s style sheet will override rules
with normal weight declared in user’s personal style sheets Rules with
increased weight declared in user’s personal style sheet will override rules
with normal weight declared in author’s style sheet Rules with increased weight
declared in author’s style sheet will override rules with increased weight
declared in user’s personal style sheets Author’s and user’s rules will
override UA’s default style sheet.
4. Sort by
selector’s specificity More specific selector will override less specific one:
ID-selector (most specific), followed by Classified contextual selectors (TABLE
P EM.fot) Class selectors (EM.fot) Contextual selectors – the “lower down” the
more weight, (TABLE P EM), (TABLE P EM STRONG) – STRONG has more weight than
EM.
5. Sort by order
specified If two rules have the same weight, the latter specified overrides
ones specified earlier. Style sheets are sorted out as follows: The STYLE
attribute (inline style) overrides all other styles The Style element (embedded
style) overrides linked and imported sheets The LINK element (external style)
overrides imported style The @import statement – imported style sheets also
cascade with each other in the same order as they are imported.
Q38 How do you make a whole div into a link?
A38 You can’t put ‘a’ tags around a div, but you can
do this with javascript :
HTML
<div onclick="javascript:location='http://bonrouge.com'" id="mydiv">
... stuff goes here ...
</div>
If you want to use an
empty div with a background image as a link instead of putting your image into
the html, you can do something like this:
CSS
#empty {
background-image:url(wine.jpg);
width:50px;
height:50px;
margin:auto;
}
#empty a {
display:block;
height:50px;
}
* html #empty a {
display:inline-block;
}
HTML
<div
id="empty"><a href="#n"></a></div>
Q39 What is shorthand property?
A39 Shorthand property is a property made up of
individual properties that have a common “addressee”. For
example properties: font-weight, font-style,
font-variant, font-size, font-family, refer to the font.
To reduce the size of style sheets and also save
some keystrokes as well as bandwidth they can all be specified as one shorthand property font, e.g.:
H1 {font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 160%;
font-family: serif}
Q40 can be all shorthanded to a space separated list:
A40 H1 {font: bold italic small-caps 160% serif}
Note: To make things even simpler the line-height
property can be specified together with the font-size property:
H1 {font: bold italic
small-caps 160%/170% serif}
Q41 How To Style Forms?
A41 Forms and form elements like SELECT, INPUT etc.
can be styled with CSS – partially.
Check boxes and Radio buttons do not yet
accept styles, and Netscape 4.xx has certain issues, but here is a tutorial that explains the application of CSS Styles on Form Elements.
Q42 Can I attach more than one declaration to a
selector?
A42 Yes. If more than one declaration is attached to
a selector they must appear in a semi colon separated list,
Eg.;
Selector
{declaration1; declaration2}
P {background: white;
color: black}
Q43 How do you target a certain browser?
A43 IE can be targeted by preceding your properties
with ‘* html’.
For example…
#nav {
position:fixed;
}
* html #nav { /* this
will target IE */
position:absolute;
}
Another way to target IE
is with conditional comments. Put this (below) in the head – just before the closing tag – and
put anything you want to be directed only at IE in another stylesheet.
<!--[if IE]>
<link
href="ieonly.css" rel="stylesheet"
type="text/css">
<![endif]-->
If you need to target
IE5x…
#wrap {
width:760px; /* for IE5x
*/
w\idth:780px; /* for all
other major browsers */
}
Q43 What is the percentage value in ‘font-size’
relative to?
A43 It is relative to the parent element’s
font-size.
For example:
if the style sheet says:
H1 {font-size: 20pt;}
SUP {font-size: 80%;}
then a <SUP>
inside an <H1> will have a font-size of 80% times 20pt, or 16pt.
Q44 Which style specification method should be used?
Why?
A44 The answer to this one is tricky. The short
answer is: “it depends.” The long answer is, however, another
story.
If you are planning on
using more than one style specification method in your document, you must also
worry about Cascading Order of Style methods. If you are going to use only one
method, then some guidelines about the nature of each method need to be kept in
mind. The answer to this question is also very much related to the advantages
and disadvantages to using each of them.
Method 1: External
Style Sheets (The LINK [-->Index DOT Html] element)
This method should
be used if you want to apply the same style to multiple documents. Each
document can reference the stand-alone style sheet and use the styles contained
within. Using this method, the appearance of many documents can be controlled
using a single or small number of style sheets. This can save a LOT of time for
an author.
Method 2: Embedded
Style Sheets (The Style [-->Index DOT Html] element)
The syntax used
with Method 2 is the same as that for Method 1. This method is a happy medium
between External Style Sheets and Inline Styles. It should be used in place of
Method 1 if you only want to specify styles for a single document. This method
should also be used when you want to specify a style for multiple tag types at
once or the list of style definitions is of larger size. Method 3: Inline
Styles (STYLE attribute to HTML elements)
If you only have to
apply style to one or a few elements in a single document, your best bet will
often be an Inline
Style. This method
attaches a style definition within the HTML element it is modifying.
Q45 Do URL’s have quotes or not?
A45 Double or single quotes in URLs are optional.
The tree following examples are equally valid:
BODY {background: url(pics/wave.png) blue}
BODY {background: url("pics/wave.png")
blue}
BODY {background: url('pics/wave.png') blue}
Q46 How do you show which page you’re on (in a menu)?
A46 If PHP is not available to you, you could use
the cascade. Put an id in your body tags and an id in each of your a tags for the
links.
Let’s say on page one you have this:
HTML
<body id="page1">
<a id="page1link"
href="page1.htm">page one</a>
</body>
In your CSS, you can have something like this:
#page1 a#page1link {
color:purple;
}
Q47 Document Style Semantics and Specification
Language (DSSSL)?
A47 Document Style Semantics and Specification
Language is an international standard, an expression
language, a styling language for associating
processing (formatting and transformation) with SGML documents,
Eg:- XML.
Q48 What is Extensible Stylesheet Language (XSL)?
XSL is a proposed styling language for
formatting XML (eXtensible Markup Language) documents. The proposal was submitted to the W3C by Microsoft,
Inso, and ArborText
Q49 What is a z-index?
A49 Z-index is a CSS property that sets the stack
order of specific elements. An element with greater stack
order is always in front of an element with a
lower stack order.
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
}
Q50 Explain how you solved some css problem?
A50 You should be able to explain a CSS bug that you
worked on and how you went about solving it. You could talk about IE issues, take a look at these CSS problems that often
need solutions for Internet Explorer.
Q51 Explain the benefits of CSS sprites?
A51 Most importantly there is a performance benefit
as CSS sprites reduce page load time by minimizing HTTP
requests for different images. Usually there is
also an accessibility benefit as the code degrades gracefully and shows text to screen readers, search engines, and browsers
without CSS. I also think that CSS sprites are easier to manage as you are working with one image instead of
many small images. Finally, you should also know how to implement CSS sprites.
What is CSS?
CSS stands for Cascading Style Sheets and is a
simple styling language which allows attaching style to HTML elements. Every
element type as well as every occurance of a specific element within that type
can be declared an unique style, e.g. margins, positioning, color or size.
What are Style Sheets?
Style Sheets are templates, very similar to
templates in desktop publishing applications, containing a collection of rules
declared to various selectors (elements).
What is external Style Sheet? How to link?
External Style Sheet is a template/document/file
containing style information which can be linked with any number of HTML
documents. This is a very convenient way of formatting the entire site as well
as restyling it by editing just one file.
The file is linked with HTML documents via the
LINK element inside the HEAD element. Files containing style information must
have extension .css, e.g. style.css.
<HEAD>
<LINK REL=STYLESHEET
HREF="style.css" TYPE="text/css">
</HEAD>
What is embedded style? How to link?
Embedded style is the style attached to one
specific document. The style information is specified as a content of the STYLE
element inside the HEAD element and will apply to the entire document.
<HEAD>
<STYLE TYPE="text/css">
<!--
P {text-indent: 10pt}
-->
</STYLE>
</HEAD>
Note: The styling rules are written as a
HTML comment, that is, between <!-- and --> to hide the content in
browsers without CSS support which would otherwise be displayed.
What is inline style? How to link?
Inline style is the style attached to one
specific element. The style is specified directly in the start tag as a value
of the STYLE attribute and will apply exclusively to this specific
element occurance.
<P STYLE="text-indent:
10pt">Indented paragraph</P>
What is imported Style Sheet? How to link?
Imported Style Sheet is a sheet that can
be imported to (combined with) another sheet. This allows creating one main
sheet containing declarations that apply to the whole site and partial sheets
containing declarations that apply to specific elements (or documents) that may
require additional styling. By importing partial sheets to the main sheet a
number of sources can be combined into one.
To import a style sheet or style sheets include
the @import notation or notations in the STYLE element. The @import notations
must come before any other declaration. If more than one sheet is imported they
will cascade in order they are imported - the last imported sheet will override
the next last; the next last will override the second last, and so on. If the
imported style is in conflict with the rules declared in the main sheet then it
will be overridden.
<LINK REL=STYLESHEET
HREF="main.css" TYPE="text/css">
<STYLE TYPE="text=css">
<!--
@import url(http://www.and.so.on.partial1.css);
@import url(http://www.and.so.on.partial2.css);
.... other statements
-->
</STYLE>
What is alternate Style Sheet? How to link?
Alternate Style Sheet is a sheet defining
an alternate style to be used in place of style(s) declared as persistent
and/or preferred .
Persistent style is a default style that
applies when style sheets are enabled but can disabled in favor of an alternate
style, e.g.:
<LINK REL=Stylesheet HREF="style.css"
TYPE="text/css">
Preferred style is a default style that
applies automatically and is declared by setting the TITLE attribute to the
LINK element. There can only be one preferred style
<LINK REL=Stylesheet
HREF="style2.css" TYPE="text/css" TITLE="appropriate
style description">
Alternate style gives an user the choice
of selecting an alternative style - a very convenient way of specifying a media
dependent style. Note: Each group of alternate styles must have unique TITLE,
e.g.:
<LINK REL="Alternate
Stylesheet" HREF="style3.css" TYPE="text/css"
TITLE="appropriate style description" MEDIA=screen>
<LINK REL="Alternate
Stylesheet" HREF="style4.css" TYPE="text/css"
TITLE="appropriate style description" MEDIA=print>
Alternate stylesheets are not yet
supported.
How do I combine multiple sheets into one?
To combine multiple/partial style sheets
into one set the TITLE attribute taking one and the same value to the LINK
element. The combined style will apply as a preferred style, e.g.:
<LINK REL=Stylesheet
HREF="default.css" TITLE="combined">
<LINK REL=Stylesheet
HREF="fonts.css" TITLE="combined">
<LINK REL=Stylesheet
HREF="tables.css" TITLE="combined">
What is CSS rule 'ruleset'?
There are two types of CSS rules: ruleset
and at-rule. Ruleset identifies selector or selectors and declares style which
is to be attached to that selector or selectors. For example P {text-indent:
10pt} is a CSS rule. CSS rulesets consist of two parts: selector, e.g. P and
declaration, e.g. {text-indent: 10pt}.
P {text-indent: 10pt} - CSS rule (ruleset)
{text-indent: 10pt} - CSS declaration
text-indent - CSS property
10pt - CSS value
What is CSS rule 'at-rule'?
There are two types of CSS rules: ruleset
and at-rule. At-rule is a rule that applies to the whole style sheet and not to
a specific selector only (like in ruleset). They all begin with the @ symbol
followed by a keyword made up of letters a-z, A-Z, digits 0-9, dashes and
escaped characters, e.g. @import or @font-face.
What is selector?
CSS selector is equivalent of HTML element(s).
It is a string identifying to which element(s) the corresponding declaration(s)
will apply and as such the link between the HTML document and the style sheet.
For example in P {text-indent: 10pt} the
selector is P and is called type selector as it matches all instances of this
element type in the document.
in P, UL {text-indent: 10pt} the selector is P
and UL (see grouping); in .class {text-indent: 10pt} the selector is .class
(see class selector).
What is contextual selector?
Contextual selector is a selector that
addresses specific occurrence of an element. It is a string of individual
selectors separated by white space, a search pattern, where only the last
element in the pattern is addressed providing it matches the specified context.
TD P CODE {color: red}
The element CODE will be displayed in red
but only if it occurs in the context of the element P which must occur in the
context of the element TD.
TD P CODE, H1 EM {color: red}
The element CODE will be displayed in red
as described above AND the element EM will also be red but only if it occurs in
the context of H1
P .footnote {color: red}
Any element with CLASS footnote will be
red but only if it occurs in the context of P
P .footnote [lang]{color: red}
Any element with attribute LANG will be
red but only if it is classed as "footnote" and occurs in the context
of P
What is attribute selector? [CSS2]
Attribute selector is a selector defined
by 1) the attribute set to element(s), 2) the attribute and value(s), 3)
the attribute and value parts:
1a) A[title] {text-decoration: underline}
All A elements containing the TITLE
attribute will be underlined
1b) A[class=name] {text-decoration:
underline}
The A elements classed as 'name' will be
underlined
2) A[title="attribute element"]
{text-decoration: underline}
The A elements containing the TITLE
attribute with a value that is an exact match of the specified value,
which in this example is 'attribute element', will be underlined
3) A[title~="attribute"]
{text-decoration: underline}
The A elements containing the TITLE
attribute with a value containing the specified word, which in this example is
'attribute', will be underlined
What is parent-child selector? [CSS2]
Parent-child selector is a selector representing
the direct descendent of a parent element. Parent-child selectors are created
by listing two or more tilde (~) separated selectors.
BODY ~ P {background: red; color: white}
The P element will be declared the
specified style only if it directly descends from the BODY element:
<BODY><P>Red and white
paragraph </P></BODY>
BODY ~ P ~ EM {background: red; color:
white}
The EM element will be declared the
specified style only if it directly descends from the P element which in its
turn directly descends from the BODY element:
<BODY><P><EM>Red and
white EM</EM></P></BODY>
What is CSS declaration?
CSS declaration is style attached to a specific
selector. It consists of two parts; property which is equivalent of HTML
attribute, e.g. text-indent: and value which is equivalent of HTML value, e.g.
10pt. NOTE: properties are always ended with a colon.
What is 'important' declaration?
Important declaration is a declaration with
increased weight. Declaration with increased weight will override declarations
with normal weight. If both reader's and author's style sheet contain
statements with important declarations the author's declaration will override
the reader's.
BODY {background: white ! important; color:
black}
In the example above the background property has
increased weight while the color property has normal.
What is property?
Property is a stylistic parameter (attribute)
that can be influenced through CSS, e.g. FONT or WIDTH. There must always be a
corresponing value or values set to each property, e.g. font: bold or font:
bold san-serif.
What is shorthand property?
Shorthand property is a property made up of
individual properties that have a common "addressee". For example
properties: font-weight, font-style, font-variant, font-size, font-family,
refer to the font. To reduce the size of style sheets and also save some
keystrokes as well as bandwidth they can all be specified as one shorthand
property font, e.g.:
H1 {font-weight:
bold;
font-style:
italic;
font-variant:
small-caps;
font-size:
160%;
font-family:
serif}
can be all shorthanded to a space separated
list:
H1 {font: bold italic small-caps 160% serif}
Note: To make things even simpler the
line-height property can be specified together with the font-size property:
H1 {font: bold italic small-caps 160%/170%
serif}
What is value?
Value is a 'physical' characteristic of the
property. Property declares what should be formatted, e.g. FONT while
value suggests how the property should be formatted, e.g. 12pt. By setting the
value 12pt to the property FONT it is suggested that the formatted text be
displayed in a 12 point font. There must always be a corresponding property to
each value or set of values.
H1 {font: bold 180%}
In the example above the H1 selector is
declared the FONT property which in its turn is declared the values BOLD and
180%.
The values suggesting alternatives are specified
in a comma separated list, e.g.
H1 {font-family: font1, font2}
What is initial value?
Initial value is a default value of the
property, that is the value given to the root element of the document tree. All
properties have an initial value. If no specific value is set and/or if a
property is not inherited the initial value is used. For example the background
property is not inherited, however, the background of the parent element shines
through because the initial value of background property is transparent.
<P style="background:
red">Hello <strong>World</strong></P>
Content of the element P will also have
red background
Can I attach more than one declaration to a
selector?
Yes. If more than one declaration is attached to
a selector they must appear in a semi colon separated list, e.g.;
Selector {declaration1; declaration2}
P {background: white; color: black}
What is grouping ?
Grouping is gathering (1) into a comma
separated list two or more selectors that share the same style or (2) into a
semicolon separated list two or more declarations that are attached to the same
selector (2).
1. The selectors LI, P with class name .first
and class .footnote share the same style, e.g.:
LI {font-style: italic}
P.first {font-style: italic}
.footnote {font-style: italic}
To reduce the size of style sheets and also save
some typing time they can all be grouped in one list.
LI, P.first, .footnote {font-style: italic}
2. The declarations {font-style: italic}
and {color: red} can be attached to one selector, e.g.:
H2 {font-style: italic}
H2 {color: red}
and can also be grouped into one list:
H2 {font-style: italic; color: red}
What are pseudo-elements?
Pseudo-elements are fictional elements that do
not exist in HTML. They address the element's sub-part (non-existent in HTML)
and not the element itself. In CSS1 there are two pseudo-elements: 'first-line
pseudo-element' and 'first-letter pseudo-element'. They can be attached to
block-level elements (e.g. paragraphs or headings) to allow typographical
styling of their sub-parts. Pseudo-element is created by a colon followed by
pseudo-element's name, e.g:
P:first-line
H1:first-letter
and can be combined with normal classes; e.g:
P.initial:first-line
First-line pseudo-element allows sub-parting the
element's first line and attaching specific style exclusively to this sub-part;
e.g.:
P.initial:first-line {text-transform: uppercase}
<P class=initial>The first line of this
paragraph will be displayed in uppercase letters</P>
First-letter pseudo-element allows sub-parting
the element's first letter and attaching specific style exclusively to this
sub-part; e.g.:
P.initial:first-letter { font-size: 200%; color:
red}
<P class=initial>The first letter of this
paragraph will be displayed in red and twice as large as the remaining
letters</P>
What are pseudo-classes?
Pseudo-classes are fictional element types that
do not exist in HTML. In CSS1 there is only one element type which can be
classed this way, namely the A element (anchor). By creating three
fictional types of the A element individual style can be attached to each
class. These three fictional element types are: A as unvisited link, A as
active link and A as visited link. Pseudo-classes are created by a colon
followed by pseudo-class's name. They can also be combined with normal classes,
e.g.:
A:link {background: black; color: white}
A:active {background: black; color: red}
A:visited {background: transparent; color:
black}
<A HREF....>This anchor (or rather these
anchors) will be displayed as declared above</A>
A.foot:link {background: black; color: white}
A.foft:active {background; black: color: red}
A.foot:visited {background: transparent; color:
black}
<A CLASS=foot HREF....>This anchor and all
other anchors with CLASS foot will be displayed as declared above</A>
What is cascade?
Cascade is a method of defining the weight
(importance) of individual styling rules thus allowing conflicting rules to be
sorted out should such rules apply to the same selector.
Declarations with increased weight take
precedence over declaration with normal weight:
P {color: white ! important} /*
increased weight */
P (color: black} /* normal weight */
Contextual selectors - the "lower down" the more weight, (TABLE P EM),
(TABLE P EM STRONG) - STRONG has more weight than EM.
Sort by order specified
If two rules have the same weight, the
latter specified overrides ones specified earlier. Style sheets are sorted out
as follows:
The STYLE attribute (inline style)
overrides all other styles
The Style element (embedded style)
overrides linked and imported sheets
The LINK element (external style)
overrides imported style
The @import statement - imported style
sheets also cascade with each other in the same order as they are imported
What are inline, block, parent, children,
replaced and floating elements?
Inline
elements which do not have line breaks. Can
occur in block elements or other inline elements, cannot contain block elements.
Inline elements in HTML 3.2; EM, STRONG, DFN,
CODE, SAMP, KBD, VAR, CITE, TT, I, B, U, STRIKE, BIG, SMALL, SUB, SUP, A, IMG,
APPLET, FONT, BASEFONT, BR, SCRIPT, MAP, INPUT, SELECT, TEXTAREA.
Inline elements in HTML 4.0; EM, STRONG, DFN,
CODE, SAMP, KBD, VAR, CITE, ABBR, ACRONYM, TT, I, B, BIG, SMALL, SUB, SUP, A,
IMG, OBJECT, BR, SCRIPT, MAP, Q, SPAN, BDO, INPUT, SELECT, TEXTAREA, LABEL,
BUTTON, (INS, DEL).
Inline elements in HTML 4.0 Transitional; EM,
STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR, ACRONYM, TT, I, B, U, S, STRIKE,
BIG, SMALL, SUB, SUP, A, IMG, APPLET, OBJECT, FONT, BASEFONT, BR, SCRIPT, MAP,
Q, SPAN, BDO, IFRAME, INPUT, SELECT, TEXTAREA, LABEL, BUTTON, (INS, DEL).
Block
elements which do have line breaks. May occur in
other block elements, cannot occur in inline elements, may contain both block
and inline elements.
Block elements in HTML 3.2; H1, H2, H3, H4, H5,
H6, ADDRESS, P, DL, DT, DD, UL, OL, DIR, MENU, LI, DIV, CENTER, BLOCKQUOTE,
PRE, HR, ISINDEX, TABLE, FORM.
Block elements in HTML 4.0; P, H1, H2, H3, H4,
H5, H6, UL, OL, PRE, DL, DIV, NOSCRIPT, BLOCKQUOTE, FORM, HR, TABLE, FIELDSET,
ADDRESS, (INS, DEL).
Block elements in HTML 4.0 Transitional; P, H1,
H2, H3, H4, H5, H6, UL, OL, DIR, MENU, PRE, DL, DIV, CENTER, NOSCRIPT, NOFRAMES,
BLOCKQUOTE, FORM, ISINDEX, HR, TABLE, FIELDSET, ADDRESS, (INS, DEL).
Parents and children
elements which either contain (parents) or are
in the content of (children) other elements, e.g.
<P>text<STRONG>text</STRONG>text</P>. P is a parent of
STRONG. STRONG is a child of P. If not specified otherwise, children will
inherit parent's properties. NOTE: not all properties are inherited. For more
information, see INHERITANCE.
Replaced
elements which content is replaced. For example
content of the IMG element is replaced with an image, content of the INPUT
element is replace with a field.
Floating
elements which follow the flow of a parent -
inline elements.
How does inheritance work?
HTML documents are structured
hierarchically. There is an ancestor, the top level element, the HTML element,
from which all other elements (children) are descended. As in any other family
also children of the HTML family can inherit their parents, e.g. color or size.
By letting the children inherit their
parents a default style can be created for top level elements and their
children. (Note: not all properties can be inherited). The
inheritance starts at the oldest ancestor and is passed on to its children and
then their children and the children's children and so on.
Inherited style can be overridden by
declaring specific style to child element. For example if the EM
element is not to inherit its parent P then own style must be declared to it.
For example:
BODY {font-size: 10pt}
All text will be displayed in a 10 point
font
BODY {font-size: 10pt}
H1 {font-size: 14pt} or H1 {font-size:
180%}
All text except for the level 1 headings
will be displayed in a 10 point font. H1 will be displayed in a 14 point font
(or in a font that is 80% larger than the one set to BODY). If the element H1
contains other elements, e.g. EM then the EM element will also be displayed in
a 14 point font (or 180%) it will inherit the property of the parent H1. If the
EM element is to be displayed in some other font then own font properties must
be declared to it, e.g:
BODY {font-size: 10pt}
H1 {font-size: 14pt} or H1 {font-size:
180%}
EM {font-size: 15pt} or EM {font-size:
110%}
The EM element will be displayed in a 15
point font or will be 10% larger than H1. NOTE: EM is, in this example, inside H1
therefore will inherit H1's properties and not BODY's.
The above declaration will display all EM
elements in 15 point font or font that is 10% larger than font declared to the
parent element. If this specific font is to apply to EM elements but only if
they are inside H1 and not every occurrence of EM then EM must take a form of a
contextual selector.
H1 EM {font-size: 15pt} or H1 EM {font-size:
110%}
In the example above EM is a contextual
selector. It will be displayed in specified font only if it will be found in
the context of H1.
Not all properties are inherited. One such
property is background. However, since it's initial value is transparent the
background of the parent element will shine through by default unless it is
explicitly set.
Are Style Sheets case sensitive?
No. Style sheets are case insensitive.
Whatever is case insensitive in HTML is also case insensitive in CSS. However,
parts that are not under control of CSS like font family names and URLs can be
case sensitive - IMAGE.gif and image.gif is not the same file.
Which characters can CSS-names contain?
The CSS-names; names of selectors, classes and
IDs can contain characters a-z, A-Z, digits 0-9, period, hyphen, escaped
characters, Unicode characters 161-255, as well as any Unicode character as a
numeric code. The names cannot start with a dash or a digit. (Note: in HTML the
value of the CLASS attribute can contain more characters).
Can Style Sheets and HTML stylistic elements be
used in the same document?
Yes. Style Sheets will be ignored in browsers
without CSS-support and HTML stylistic elements used.
Which set of definitions, HTML attributes or CSS
properties, take precedence?
CSS properties take precedence over HTML
attributes. If both are specified, HTML attributes will be displayed in
browsers without CSS support but won't have any effect in browsers with CSS
support.
Can CSS be used with other than HTML documents?
Yes. CSS can be used with any ny structured
document format. e.g. XML, however, the method of linking CSS with other document
types has not been decided yet (Feb 98).
1
1
What are css3 modules?
wrap in css3?
white space in css3?
track ?
difference between
delegate() and live()?
Media elements other
then audio and video?
canvas?
how to display/draw
charts in html5?
.holdready()?
difference between
onload() vs readyState(). ??
embeded?
deprecated elements in
html5?
jquery data()?
what do you mean by
chaining in jquery?
list of API's in
html5?
2
1. 10 div's to be
selected 5th div, how?
2. select links of pdf
file using jquery?
3. how to print only
content area of webpage?
4. html5 new features?
5. css3 new features?
6. what is RWD?
7. how to change font
color using jquery & css3?
8. jquery wrap();
9.differnce between
jquery & jquery mobile?
10. how to call/
create dynamic elements?
11.javascript (oops
concepts)
12. how to make my
span elements side by side?
3
1. Browser compatibility?
2. jquery concepts?
3. how to write media
query for iphone 4s?
4. <! doctype>??
5. jquery mobile page
creation?
6. knowledge on
photoshop?
7. .dpi?
4
1. can we have
multiple <body> elements in a single html doc?
2. how will you redude
http request?
3.Have you used local
storage of html5?
4. I want to load
other HTML file using ajax what should i do?
5. how do you write
media queries and how you will assign them to your html document?
6. new elements in
html5?
7. new css3 elements?
8. append vs
appendto()?
9. canvas?
10. differnce between
post and get?
11. debugging tools u
used till now?
12. live()vs
delegate() vs bind()
13. how to select even
elements in my document?
14. new input type
elements?
5
1. what does $ mean in
jQuery?
2. why $ is used?
3. onload();
4. what differnce
between onload() and .ready()?
5 .addClass();?
6. types of local
storages in html5?
7. what is the
differnce between local storage and web storage?
8. closures in
javascript?
9. what is json?
10. XML vs Json?
11. jquery vs JQuery
Mobile?
12. what is DOM?
13. what is Name
Space?
14. few DOM Objects?
15. Position?
16. relative vs
absolute?
17. z-index?
18. css hacks and iE
issues?
19. After login i
should get Thank you pop up, what should i do?
20. prototype?
21. RWD?
22. Does iE supports
media queries?
23. How will you made
IE to support media queries?
24. How will you write
media queries?
25. Does IE 8 support
canvas?
26. How will you make
IE 8 work with canvas element?
27. What is different
between position absolute and relative?
Ans: Absolute : The element is positioned
relative to its first positioned (not static) ancestor element.
This is a very
powerful type of positioning that allows you to literally place any page
element exactly where you want it.
Relative :The element is positioned relative to its normal position, so
"left:20" adds 20 pixels to the
element's LEFT position. What
it really means is "relative to itself".
Fixed : The element is positioned relative to
the browser window.
28. What
is different between HTML4 and HTML5?
29. What
is different between css2 and css3?
30. What is min.js?
Ans: Jquery.min.js is nothing else but
compressed version of jquery.js. You can use it the same way
as jquery.js, but it's smaller, so in
production you should use minified version and when you're
debugging you can use normal jquery.js
version.
31. What is parameter2
and parameter 3 ?
6
1. what is new in
HTML5 in comparrision with HTML4?
2.What are the new
tags and what they do?
3. what are the new
API's and what they do?
4. what are selectors?
5. what is css reset?
6. how do you write
cross browser css?
7. what and / and how
to use gradients, border, inmages, round borders, shadows in css3?
8. what are / and how
to use transformations and animations in css3?
9.Does java script
support objects?
10. does javascript
support associative arrays?
11.tell me about the
scope of variable?
12.What javascript
frame works have you used? till now?
13. what javascript
mobile frame works have you used?
14. why would yo want
to use jquery?
7
1. Prototype in Js?
2. live() and bind()?
3. $ vs $fn?
4. in $(document).ready()
-- why we use document keyword?
5. $closest()?
6 media Queries?
7. form -
autocomplete?
8. GET, POST?
9. pesudo classes?
10. how to create
objects in javascript?
11. told to write ajax
code.?
12. told to write
local storage, session storage code?
13. told to wriete
canvas program ?
14. what happens if we
didn't decalre doctype in our html document?
15. why we use
doctype?
16. told to write
gradient program?
17. different types of
doctypes?
16. how to create
dynamic elements?
17. autofocus? place
holder?
18. javascript string
methods?
19.javascript
Array methosds?
20. how to call parent
element using childnodes?
21. form input
attributes, elements?
22. sibling()?
23. closest()
24. empty() vs
remove();
25. Where to you
declare javascript files in html file? and why?
26. Does css elements
works without writing doctype?
27. pattern?
26. jquery.connect()?
27. CDN?
8
1. what happens if we
didn't write doctype in html document?
2. difference between
float left and dispaly: inline?
3. differnce between
<ul> and <ol>
4.differnce between
size(). vs length()?
5. absolute vs
relative?
6. how to check
webstorage compatibility with browser?
7.animate method in
jquery?
8. tell some array
methods in javascript?
9.Datatypes supported
in javascript?
10. call back function
in javascript?
11. What are the
properties of xmlhttpRequest objece?
12. what are different
types of ready states in Ajax?
13. html5 webstorage
methods?
14.what is the
advantage of html5 semantic tags?
15. how many types you
can declare color in css?
16. what is sprite?
why you use it?
17. Describe event
bubling?
18. what are closures
in javascript?
19. box model in css?
20. jquery template?
21. reflow in jQM?
22. does .ready()
works on JQM?
23. type of
transistions in JQM?
24. navbar in JQm?
25. pageinit?
26. how to enable /
disable form using jquery?
27. tables in JQM?
28. grid system in
JQM?
29. how to create
table with two columns and one row in JQM?
30. Give five reasons
why you use jQuery?
9
1.eval()?
2.param()?
3. canvas vs svg?
4. canvas code to make
circle object?
5. transform and
transitions?
6. API's in HTML5?
7. Geolocation API
code?
8. argument in javascript?
9. selectors in
jQuery?
10. after and before
pseudo classes?
11. .noConflict();
12. preventDefault();
13. literal notation
in javascript?
14. live() &
delegate();
15. stopPropagation();
16. HTML5 semantic
elements?
17. CSS3 box model?
18. media Queries.
19. Ajax , json();
20. How to create
class in javascript?
21. using constructor
can we create an object?
22. how to fetch
particular table td element with native javascript?
23. i have div with
position relative at x, y 150px, an in same div i have inner div with
position absolute, now my Question is what would be the postion of inner div
(which is absolute)?
24. does padding-left:
-20px takes to content of div?
25. mordenizar for css
support??
No comments:
Post a Comment