![CSS Hacks - IE Detection andConditional CSS• http://www.sitepoint.com/microsoft-drop-ie10-conditional-comments/• http://msdn.microsoft.com/en-us/library/ms537512%28VS.85%29.aspx<!--[if IE]><p>You are using Internet Explorer >=5 and <= 9.</p><![endif]--><![if !IE]><p>You are using Internet Explorer >=10 or other browsers.</p><![endif]>• Using jQuery for jQuery < 1.9if (jQuery.browser.msie && jQuery.browser.version < 8) {// do something}](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fhtmlcss-140226013240-phpapp01%2f75%2fIntroduction-to-HTML-and-CSS-77-2048.jpg&f=jpg&w=240)
Uploaded byFerdous Mahmud Shaon
11,892 views
Introduction to HTML and CSS
This document summarizes a knowledge sharing session on HTML and CSS basics. It covers topics like HTML tags and structures, CSS rules and selectors, the CSS box model, positioning, sprites, and hacks for dealing with browser inconsistencies. The session introduced fundamental concepts for using HTML to structure content and CSS for styling and layout, providing examples for common tags, selectors, properties and techniques. It aimed to give attendees an overview of the core building blocks of HTML and CSS.
Recommended
Introduction to HTML and CSS
- 1.Knowledge Sharing SessiononHTML and CSSBasic HTML and CSSFerdous Mahmud ShaonFebruary 2014
- 2.
- 3.HTML Tags andNested Tags
- 4.
- 5.HTML <head> and<title>
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.HTML frameset• Notrecommended tag• Not supported in HTML5
- 14.
- 15.HTML Block vsInline elements• Block Elements– Takes up the full width available, and has a linebreak before and after it.– <p>, <div>, <h1>…. <h6>, <ul>, <ol>, <li>, <table>• Inline Elements– Takes up only as much width as necessary, anddoes not force line breaks after it.– <a>, <span>, <img>
- 16.
- 17.
- 18.
- 19.HTML Table vsDIV• Most websites have put their content in multiple columns.• Multiple columns can be created by using <div> or <table>elements.• Even though it is possible to create nice layouts with HTMLtables, tables were designed for presenting tabular data -NOT as a layout tool!• The div element is used for grouping HTML elements andfor creating rows and columns with the help of CSS.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.HTML <!DOCTYPE>• Mustbe the very first thing in HTML document,even before the <html> tag• Provides information to the web browser aboutwhat version of HTML the page is written in.• In HTML 4, the <!DOCTYPE> declaration refers to aDTD, but in HTML5, the <!DOCTYPE> declarationdoes NOT refer to any DTD.
- 26.
- 27.
- 28.HTML vs XHTMLXHTML–eXtensible HyperText Markup Language– Stricter and cleaner version of HTML similar toXML– Better cross browser support
- 29.HTML vs XHTMLXHTMLDOCTYPE– mandatoryXHTML elements– must be properly nested– must always be closed– must be in lowercase– must have one root elementXHTML attributes– names must be in lower case– values must be quoted– minimization is forbidden• <input type="checkbox" checked="checked" />• <input disabled="disabled" />
- 30.SEO friendly HTML•Meaningful and relevant HTML <title> per page• Define <meta> description and keywords for each page.<meta name="description" content="Free Web tutorials on HTML and CSS"><meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">• Use an <h1> tag for the main headline of the page. It shouldn’t bemore than one in a single page.• Relevant sub-headlines should use an <h2>…<h6> tags according totheir priority.• Avoid embedded JS and CSS whenever possible. Try to use externalCSS and JS and if possible minimize them.
- 31.New HTML5 Tags•<canvas> defines graphic drawing usingJavaScript• <audio> defines sound or music content• <video> defines video or movie content• <header> defines a header for the documentor a section• <nav> defines navigation links in the document
- 32.New HTML5 Tags•<section> defines a section in the document• <main> defines the main content of adocument• <article> defines an article in the document• <footer> defines a footer for the document ora section• <figure> defines self-contained content, likeillustrations, diagrams, photos etc.
- 33.HTML Style Elements<font>,<strong>, <b>, <u>, <i>, <em>, <center>
- 34.What is CSS?•Cascading Style Sheets• Defines how to display HTML elements• Added to HTML 4.0• Current version is CSS 2.• CSS 3 is also released and supported by mostof the browsers.
- 35.How to useCSS
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.CSS class vsid selector
- 44.
- 45.
- 46.CSS Box Model(block element)
- 47.CSS Box Model(block element)
- 48.CSS Box Model(block element)
- 49.CSS Box Model– Margin Collapse
- 50.CSS Box Model– Margin Collapse
- 51.CSS Box Model– Margin Collapse
- 52.CSS Box Model– Margin Collapse
- 53.CSS Box Model– Margin Collapse
- 54.CSS Box Model(inline element)
- 55.CSS Box Model(inline element)
- 56.CSS Box ModelShortcuts
- 57.CSS Box ModelDimensions
- 58.CSS Box Modeland Box Sizing• CSS3 Property– box-sizing: content-box; /* Default value */– box-sizing: border-box; /* Grid in Twitter Bootstrap */
- 59.CSS Dimension• height–Sets the height of an element• max-height– Sets the maximum height of an element• min-height– Sets the minimum height of an element• width– Sets the width of an element• max-width– Sets the maximum width of an element• min-width– Sets the minimum width of an element
- 60.Display and Visibility•Hiding an Element– display:none (doesn’t take space)– visibility:hidden (takes space)• Styling block / inline HTML Element– ul.menu li { display:inline; }– div.data span { display:block; }
- 61.Building Menu usingHTML & CSS
- 62.Building Menu usingHTML & CSS
- 63.CSS ‘position’ Property•static– default value– not affected by top, right, bottom, left• relative– positioned relative to its normal position• absolute– positioned relative to the nearest relatively positioned ancestor– if no relatively positioned ancestors, then it uses the document body• fixed– positioned relative to the viewport– always stays in the same place even if the page is scrolled.
- 64.
- 65.
- 66.CSS Relative andAbsolute Positioning
- 67.
- 68.
- 69.
- 70.
- 71.
- 72.
- 73.Grouping and NestingSelectors• Grouping Selectors– div, p, span {font-family: "Helvetica Neue", Arial, Helvetica;}• Nesting Selectors– #main .data p { color:blue; }– .widget.data p { color:blue; }– #main .data > p { color:blue; }
- 74.CSS Pseudo-classes Selectors•Syntax:selector:pseudo-class { property:value; }• Anchor Pseudo-classes– a:link {color:#FF0000;} /* unvisited link */– a:visited {color:#00FF00;} /* visited link */– a:hover {color:#FF00FF;} /* mouse over link */– a:active {color:#0000FF;} /* selected link */• First-child Pseudo-class– ul.menu > li:first-child { margin-left:0; }
- 75.CSS Opacity /Transparency• Transparency– opacity:0.5;– filter:alpha(opacity=50); /* For old IEs */• Cross browser Transparency.transparent {/* IE 8 */-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";filter: alpha(opacity=50); /* IE 5-7 */-moz-opacity: 0.5; /* Netscape */-khtml-opacity: 0.5; /* Safari 1.x */opacity: 0.5; /* Good browsers */}
- 76.CSS Image Sprites•An image sprite is a collection of images putinto a single image.• Reduces load time and saves bandwidth.• img.home { width:46px; height:44px;background:url(img_navsprites.gif) 0 0; }• img.next { width:43px; height:44px;background:url(img_navsprites.gif) -91px 0; }
- 77.CSS Hacks -IE Detection andConditional CSS• http://www.sitepoint.com/microsoft-drop-ie10-conditional-comments/• http://msdn.microsoft.com/en-us/library/ms537512%28VS.85%29.aspx<!--[if IE]><p>You are using Internet Explorer >=5 and <= 9.</p><![endif]--><![if !IE]><p>You are using Internet Explorer >=10 or other browsers.</p><![endif]>• Using jQuery for jQuery < 1.9if (jQuery.browser.msie && jQuery.browser.version < 8) {// do something}
- 78.CSS Hacks• IE7doesn’t understand ‘display: inline-block’1. display:block;float:left;2. display: inline-block;*display: inline;zoom: 1;
- 79.CSS – majorIE6 Problem• IE6 doesn't support multiple class selectors.• So when we write,div.menu.horizontal.widget { color: blue; }in IE6, the above style is interpreted as:div.widget { color: blue; }• This style definition affects all div elementshaving widget style class.
- 80.