@font-face Browser support

IEOperaOpera MobileFirefoxChromeSafariSafari on IOS
EOT4 and aboveNot supportedNot SupportedNot supportedNot supportedNot supportedNot supported
SVGNot supported10 and above10 and above9.7 and above0.3 and above3.1 and above3.1 and above
TTF9 and above10 and above10 and above9.7 and above4 and above3.1 and aboveNot supported
OTFNot supported10 and above10 and above9.7 and above4 and above3.1 and aboveNot supported
WOFF9 and aboveNot supportedNot supportedNot supported6 and aboveNot supportedNot supported

EOT    =Embedded Open Type.
SVG    =Scalable Vector Graphics
TTF    =True Type Font
OTF    =Open Type Font
WOFF    =Web Open Font Format

Fore more info about @font-face Click here
http://www.w3.org/TR/css3-fonts/

CSS3 Multiple Backgrounds

Another useful feature in CSS3 is the ability to creat multiple backgrounds on a single box element.
In CSS2, you could only create one background image per element. So having multiple backgrounds required you to create many elements and apply an extra <div> for each extra image. This resulted
in heavy markup text and increased the page file size. If you wanted to add more images later, you would need to change both the HTML and the CSS structure.
There are many situations where you can use multiple background images:
Using several images to cover the full width or height of a box element.
creating a jigsaw image that is made up of multiple images.
Creating a parallax effect that lets the images shift disproportionately when the web page is resize or a mouse is rolled over an object.
Creating irregular or rough-edged box effects that need images on both sides.
Using a combination of background images, textures, and solid colors.
Browser support of multiple background
BrowserVersionsSupported or Not
IE9Yes
Firefox3.6Yes
Chrome7Yes
Opera10.5Yes
Safari3Yes
Example:
/* support for multiple backgrounds */
div#container {
background:url(images/lily.jpg) no-repeat top left,
url(images/sunflower.jpg) no-repeat top right;
}
In the above example, 
You can apply multiple background images by adding a new background declaration. Then you specify a comma-separated list of values in the background or background-image property,
The first value in the list represents the top layered image, with subsequent image rendered behind successively. You can resize, repeat or reposition independent images using properties like background-repeat:no-repeat, repeat-x, repeat-y etc…

New Tags in HTML5


  • <!DOCTYPE>         =  Defines the document type.
  • <article>              =  Defines and article.
  • <aside>                =  Defines content aside from the page content.
  • <header>             = Defines a header for a document or section.
  • <hgroup>             = Groups heading( <h1> to <h6> ) elements.
  • <section>            = Defines a section in a document.
  • <nav>= Defines navigation links.
  • <footer>              = Defines a footer for a document or section.
  • <audio>               = Defines sound content.
  • <video>              = Defines a video or movie.
  • <bdi>                 = Isolates a part of text that might be formatted in a different                                           direction from other text outside. 
  • <canvas>            = Used to draw graphics, on the fly via scripting (usually                      
                                      Javascript).
  • <command>          = Defines a command button that a user can invoke.
  • <details>              = Defines additional details that the user can view or hide.
  • <summary>           = Defines a visible heading for a <details> element.
  • <embed>              = Defines a container for an external (non-HTML) application.
  • <figure>               = Specifies self-contained content.
  • <figcaption>         = Defines a caption for a <figure> element.
  • <keygen>             = Defines a key-pair generator field (for forms).
  • <mark>                = Defines marked/highlighted text.
  • <meter>              = Defines a scalar measurement within a known range (a gauge).
  • <output>             = Defines the result of calculation.
  • <progress>          = Represents the progress of a tast.
  • <rp>                   = Defines what to show in browsers that do not support ruby annotations.
  • <rt>                 = Defines an explanation/pronunciation of characters ( for East Asian      typography).
  • <ruby>             = Defines a ruby annotation (for East Asian typography).
  • <source>          = Defines multiple media resources for media elements (<video> and <audio> ).

  • <time>            = Defines a date/time.
  • <track>           =Defines text tracks for media elements ( <video> & <audio> ).

Style Sheet Types in CSS

A CSS style sheet can be linked to an HTML document in 3 ways.

1) Internal Style Sheet
2) External Style Sheet
3) In-line style


1) Internal Style Sheet :-



                      The Internal style sheet is written within the HEAD element of the HTML document. This style applied only to the documents in which it is defined and not referenced by any other web document.


Syntax :-  <style type="text/css">
                        selector { property: value;}
                 </style>


The above syntax contains : -

Starting and ending tags of the Style element.
The style element contains a type attribute with value text/css.
The declaration consists of a selector followed by curly braces.
The curly braces hold a property followed by a colon, which is further followed by a value and followed by a semicolon.


Example : 

       <head>
           <style type="text/css">
             p {
                   font-family:candara;
                   color:cyan;
                 }
       
           </style>
       </head>

Advantages of using Internal style sheets :

  • · Affects only the page in which they are placed.  If you are working on a large site and need to test styles before loading them on the site as a whole, then internal style sheets can be great tool as they allow you to test the styles on a single page.
  • · Allows you to test the styles on a single page.


Disadvantages of using Internal style sheets :-

  • · Affects only the page to which they applied. If you want to use same styles in several documents, you need to repeat them for every page.
  • · Increases the page load time because the entire CSS file needs to be implemented first to apply CSS.
            2) External Style Sheet
                Here CSS file is written outside the HTML document and the reference of the CSS file is placed in the HTML document. In external style sheet, the style sheet rules are saved into a text file with the .css extension. Once you have a style sheet document, you can link it with your web pages in the following two ways
i)  Linking : Refers to the HTML link element, which is used to link a style sheet.

<link rel=”stylesheet” type=”text/css” href=”test/css”/>
Here…
rel attribute specifies what you are linking.
type  attribute specifies the MIME type for the browser
href attribute specifies the path of the .css file.
                  In the above code, the value of the rel attribute is set to style sheet, value of          the type attribute is set to text/css and that of the href attribute is set to test.css.
ii) Importing :  Here the @import keyword is used followed by the Uniform Resource Identifier(URI)  of the style sheet to which you want to import the style rules.

<style type=”text/css”>
                @import url(‘demostyle.css”)
                H1 {color:blue;}
</style>
           In the above code @import keyword followed by the URI of the style sheet named                             demostyle.css is used.

         Advantages of External Style Sheets :-
        Allows you to control the look and feel of several documents in one go and do not need to define a specific style for every element.
         Allows you to easily group your styles in a more efficient way.

        Disadvantages of External Style Sheets :-
     Increases the download time as the entire CSS file has to be downloaded to apply the  style to the HTML document.
        Displays the web page only after the entire style sheet is loaded.

        3) Inline style:- 
                These styles are written in a single line separated by semicolons. These properties               are placed inside the style attribute of the HTML element, on which you want to apply the style.
     <p style=”background:cyan; color:black; border:2px solid white;”>
        In the above code the <p> is styled.
     Advantages of inline style :-
     Provides highest precedence over internal and external style sheets.
      Provides and easy and quick approach to add a style sheet in a web page. You don’t need to create a whole new document or edit a new element in the head of your document to add an inline style.
     Disadvantages of inline style :-
      Makes a document difficult to maintain and increases the download time. Inline style must be applied to every element on which you want to apply a style.
     Doesn’t allow to style pseudo-elements, which are used to add special effects to the selectors.



CSS3 Modules


CSS3 (June 1999)

CSS3 is divided into separate documents called "modules" that are designed to be implemented separately and independently from each other.

The W3C explains the module approach :--

                           " Rather than attempting to shave dozens of updates into a single monolithic specification, it will be much easier and more efficient to be able to update individual pieces of the specification. Modules will enable CSS to be updated in a more timely and precise fashion, thus allowing for a more flexible and timely evolution of the specification as a whole "

Here is the list of modules that are currently available.

1. Media Queries:-
               It is one of the CSS3 modules, it allows to adopt the rendering of web pages based on conditions. 
It has the following media types.
braille, embossed, handheld, print, projection, screen, speech, tty, tv

2. Namespaces :-
XML based formats can use namespaces.
Css selectors can be extended to select those elements based on their namespaces.

3. Selectors level 3 :-
Selectors describes the element selector used in CSS, selectors are used to select elements in HTML or XML document.

4. Color :- 
It specifies the color related aspects of CSS.

5. CSS Background & Borders :-
It specifies new functions for backgrounds and borders including background images and rounding border angles.

6. Fonts :-
It includes new properties and values to describe CSS fonts, such as the use of fonts that can be downloaded with the @font-face directive.

7. CSS Lists :-
 This module specifies the list layouts with more detail and precision than in earlier releases.

8. CSS Multicolumn Layout :-
It describes multi-column layouts in CSS, a style sheet language for the web.
Using this, content can be flowed into multiple columns with a gap and rule between them.

9. CSS Text :-
It specifies the need for internationalization in defining new properties and values to control the text using CSS.

and much more.....
For all the modules kindly visit http://www.w3.org



Introduction to CSS3

Cascading Style Sheets: 
  • It is the way to present HTML document as per the endusers requirements.
  • Here cascading means inheriting the features from parent to child.
  • Style means collection of specially designed formats like color, font, backgrounds, layouts, animations, variants , text transformations etc.
  • It is the separate from HTML5 with the extension of .CSS.

What is CSS ?
CSS Satisfying the following points.

  • CSS we can integrated with HTML, PHP, Java Script, ASP etc.
  • Cascading means inheriting the features.
  • Stylesheet means group of styles.
  • It is used to add more effects to HTML5.
  • Styles generally storing in style sheets.
  • CSS is a kind of language used for describing the presentation semantics of a document.
  • CSS main approach to provide more styles to the web documents.
CSS Versions.
As per W3C recommendation the following versions are in the industry.
  1. CSS1.0 (dec 1996)
  2. CSS2.0 (May 1998)
  3. CSS3.0 (Jun 1999)
(Here i am not going to discuss about CSS1.0 and CSS2.0. So lets starts about CSS3.0)



* Advantages of CSS :- 
  1. Flexibility
  2. Codes rendering.
  3. Accessibility
  4. Performance
  5. Powerful designing
  6. Consistency
  7. Types of style sheets
  8. Easy syntax etc..







The HTML5 DOCTYPE

The DOCTYPE declaration optionally appears at the start of an HTML document. It comes from the Standard Generalized Markup Language (SGML) that was used to define previous versions of HTML in terms of the language syntax.
The DOCTYPE is used by HTML validation services to determine which version the document uses.

  • The doctype for HTML4.01 looks like this.
         <!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.01//EN"
               "http://www.w3.org/TR/html4/strict.dtd">

  • The doctype for XHTML1.0 looks like this.
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict //EN"
                     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  • And here is the doctype for HTML5
         <!DOCTYPE html>

You can see that the HTML5 DOCTYPE is much shorter, easier to type, and easier to remember.

HTML5

HTML5 and CSS3 are more than just two new standards proposed by the World Wide Web Consortium (W3C) and its working groups. They are the next iteration of technologies you use every day, and they’re here to help you build better modern web applications. Before we dive into the deep details of HTML5 and CSS3, let’s talk about some benefits of HTML5 and CSS3, as well as some of the challenges we’ll face.


With us you will be learning all the concepts of HTML5 & CSS3.
HTML is the merging language of the World Wide Web. Using just the simple tags it contains, the whole world has created an amazingly different network of hyperlinked documents, from Amazon, eBay, and Wikipedia, to personal blogs and dedicated websites.

While it is the most determined transform to our common this isn’t the first time that HTML has been updated. The Hyper Text Markup Language was the brainchild of Sir Tim Berners-Lee. In 1991 he wrote a document called “HTML Tags” in which he proposed fewer than two dozen elements that could be used for writing web pages. Sir Tim didn’t come up with the idea of using tags consisting of words between angle brackets; those kinds of tags already existed in the SGML (Standard Generalized Markup Language) format. Rather than inventing a new standard, Sir Tim saw the benefit of building on top of what already existed—a trend that can still be seen in the development of HTML5.

The complete Road Map for HTML5
There was never any such thing as HTML 1. The first official specification was HTML 2.0, published by the IETF, the Internet Engineering Task Force. Many of the features in this specification were driven by existing implementations. For example, the market-leading Mosaic web browser of 1994 already provided a way for authors to embed images in their documents using an <img>tag. The img element later appeared in the HTML 2.0 specification. Using this tag IE Browser would play Videos. This is developed and stabled as <Video> tag in HTML5.

The role of the IETF was superseded by the W3C, the World Wide Web Consortium, where subsequent iterations of the HTML standard have been published at http://www.w3.org. The latter half of the nineties saw a flurry of revisions to the specification until HTML 4.01 was published in 1999.
It was a Rebel time --- WHATWG TF?

A rebellion formed within the W3C. The consortium seemed to be formulating theoretically pure standards unrelated to the needs of web designers. Representatives from Opera, Apple, and Mozilla were unhappy with this direction. They wanted to see more emphasis placed on formats that allowed the creation of web applications.

Things came to a head in a workshop meeting in 2004. Ian Hickson, who was working for Opera Software at the time, proposed the idea of extending HTML to
allow the creation of web applications. The proposal was rejected. The disaffected rebels formed their own group: the Web Hypertext Application Technology Working Group or WHATWG for short.

From the start, the WHATWG operated quite differently than the W3C. The W3C uses a consensus-based approach: issues are raised, discussed, and voted on. At the WHATWG, issues are also raised and discussed, but the final decision on what goes into a specification rests with the editor. The editor is Ian Hickson.

On the face of it, the W3C process sounds more democratic and fair. In practice, politics and internal bickering can bog down progress. At the WHATWG, where anyone is free to contribute but the editor has the last word, things move at a faster pace. But the editor doesn’t quite have absolute power: an invitation-only steering committee can accuse him in the unlikely event of a state of affairs. Initially, the bulk of the work at the WHATWG was split into two specifications: Web 2.0 and Web 1.0. Both specifications were intended to extend HTML. Over time, they were merged into a single specification called simply HTML5.

While HTML5 was being developed at the WHATWG, the W3C continued working on XHTML 2. It would be inaccurate to say that it was going nowhere fast. It was going nowhere very, very slowly.

In October 2006, Sir Tim Berners-Lee wrote a blog post in which he admitted that the attempt to move the web from HTML to XML just wasn’t working. A few months later, the W3C issued a new charter for an HTML Working Group. Rather than start from scratch, they wisely decided that the work of the WHATWG should be used as the basis for any future version of HTML.

All of this stopping and starting led to a somewhat confusing situation. The W3C was simultaneously working on two different, incompatible types of markup: XHTML 2 and HTML 5 (note the space before the number five). Meanwhile a separate organization, the WHATWG, was working on a specification called HTML5 (with no space) that would be used as a basis for one of the W3C specifications!

Any web designers trying to make sense of this situation would have had an easier time make sense of.
The fog of confusion began to clear in 2009. The W3C announced that the charter for XHTML 2 would not be renewed. The format had been as good as dead for several years; this announcement was little more than a death certificate.

Strangely, rather than passing unnoticed, the death of XHTML 2was greeted with some mean-spirited gloating. XML naysayersused the announcement as an opportunity to deride anyonewho had ever used XHTML 1—despite the fact that XHTML 1and XHTML 2 have almost nothing in common.

Meanwhile, authors who had been writing XHTML 1 in order to enforce a stricter writing style became worried that HTML5 would herald a return to sloppy markup.

The current state of HTML5 isn’t as confusing as it once was, but it still isn’t straightforward.

There are two groups working on HTML5. The WHATWG is creating an HTML5 specification using its process of “commit then review.” The W3C HTML Working Group is taking that specification and putting it through its process of “review then commit.” As you can imagine, it’s an uneasy alliance. Still, there seems to finally be some agreement about that annoying.

“Space or no space?” question (it’s HTML5 with no space, just in case you were interested).

Perhaps the most confusing issue for web designers dipping their toes into the waters of HTML5 is getting an answer to the question, “when will it be ready?”

In an interview, Ian Hickson mentioned 2022 as the year he expected HTML5 to become a proposed recommendation. What followed was a wave of public outrage from some web designers. They didn’t understand what “proposed recommendation” meant, but they knew they didn’t have enough fingers to count off the years until 2022.

The outrage was unwarranted. In this case, reaching a status of “proposed recommendation” requires two complete implementations of HTML5. Considering the scope of the specification, this date is incredibly ambitious. After all, browsers don’t have the best track record of implementing existing standards. It took Internet Explorer over a decade just to add support for the abbrelement.

The date that really matters for HTML5 is 2012. That’s when the specification is due to become a “candidate recommendation.” That’s standards-speak for “done and dusted.”

But even that date isn’t particularly relevant to web designers. What really matters is when browsers start supporting features. We began using parts of CSS 2.1 as soon as browsers started shipping with support for those parts. If we had waited for every browser to completely support CSS 2.1 before we started using any of it, we would still be waiting.

It’s no different with HTML5. There won’t be a single point in time at which we can declare that the language is ready to use. Instead, we can start using parts of the specification as web browsers support those features.

Keen to avoid the mistakes of the past, the WHATWG drafted a series of design principles to guide the development of HTML5. One of the key principles is to “Support existing content.” That means there’s no Year Zero for HTML5.

Where XHTML 2 attempted to sweep aside all that had come before, HTML5 builds upon existing specifications and implementations. Most of HTML 4.01 has survived in HTML5. Some of the other design principles include “Do not reinvent the wheel,” and “Pave the cowpaths,” meaning, if there’s a widespread way for web designers to accomplish a task—even if it’s not necessarily the best way—it should be codified in HTML5. Put another way, “If it ain’t broke, don’t fix it.”

The creation of HTML5 has been driven by an ongoing internal tension. On the one hand, the specification needs to be powerful enough to support the creation of web applications. On the other hand, HTML5 needs to support existing content, even if most existing content is a complete mess. If the specification strays too far in one direction, it will suffer the same fate as XHTML 2. But if it goes too far in the other direction, the specification will enshrine <font>tags and tables for layout because, after all, that’s what a huge number of web pages are built with. It’s a delicate balancing act that requires a pragmatic, levelheaded approach.