HTML & CSS




HTML5

Doctype

Earlier:
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"    "http://www.w3.org/TR/html4/strict.dtd">
Now:
 <!DOCTYPE html>

NEW HTML TAGS

  • <video> <audio>
  • <canvas>
  • <header> <footer> <aside>
  • <article> <section>
  • <output>
  • <details>
  • <figure> <figcaption>
  • <progress> <meter>

form elements

New Input "type" Attributes
search email url tel number range date colormonth week time datetime datetime-local
Placeholder
 <input name="email" type="email" placeholder="Enter Your email address" />
Required
 <input name="search" required />
Autofocus
 <input name="search" autofocus />

video

<video poster="movie.jpg" preload controls>
        <source src="movie.webm" type='video/webm; codecs="vp8.0, vorbis"'>
        <source src="movie.ogg" type='video/ogg; codecs="theora, vorbis"'>
        <source src="movie.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
        <p>This is fallback content</p>
</video>
Media support
  • Theora: Chrome, FF, Opera
  • H.264: Chrome, IE 9+, FF, Safari (In FF, disabled by default until v26)
  • VP8: Chrome, FF, Opera
  • VP9: Chrome

For reference





CSS

Box Model


  • Content Box
  • Padding Box
  • Border box

 box-sizing: border-box;

Display

  • none
  • inline
  • list-item
  • block, inline-block
  • flex, inline-flex
  • grid, inline-grid
  • run-in
  • table
    • inline-table, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row, table-row-group
  • inherit

Position

  • static
  • relative
  • absolute
  • fixed




CSS Rule Priority

CSS Units

  • EM
  • Pixel
  • Point
  • Percent

Browser CSS




HTML & CSS

By Subin Varghese

Made with Slides.com

HTML & CSS

  • 82

More from Subin Varghese