HTML and CSS. Site layout. Best practices презентация

HTML and CSS. Site layout. Best practices.

Agenda Knowledge base HTML / CSS basics HTML tags, their attributes CSS specification and possibilities rules for tags, classes, pseudoclasses rule dependencies ‘elephant vs. whale’ Best practices Wrapping elements Setting classes Using names Classes tricks

Knowledge base TextTextTextTextTextTextTextTextTextTextText

Knowledge base Difference between: .style1 .style2 {color: red;} .style1, .style2 {color: green;} .style1.style2 {color: blue;}

Knowledge base What does it mean: .style1 {background: url(gfx/logo.png) -20px 0px;}

HTML / CSS basics – HTML tags, their attributes <span id=“name” class=“classname”> Content </span> <div>, <p>, <a>,… <ul>, <ol>, <li>,… <img/>, <br/> <table> Block elements and inline elements http://www.w3schools.com/html/html_elements.asp http://www.w3schools.com/html/html_attributes.asp

HTML / CSS basics – CSS specification and possibilities span {color: red;} .classname {color: blue;} a:hover {color: orange;} #id {color: yellow;} http://www.w3schools.com/css/css_id_class.asp

HTML / CSS basics – CSS rule dependencies div span {color: red;} div .c1 #c2 {color: blue;} div>span {color: yellow;} #id1, #id2 {color: yellow;} .c1.c2 {color: yellow;} .c1.c2 a:hover {color: yellow;} http://www.w3schools.com/css/css_grouping_nesting.asp

HTML / CSS basics – CSS rules weight !important; .class {color: #454545 !important;} Inline style; script set style <span style=“font-size: 18px;”> CSS definitions comlination: tagname = 1 classname = 10 id = 100 #id.class a span.i {font-style: italic;} Browser/OS defaults

Best practices Use clean and clear HTML with CSS: avoid inline styling; try to avoid <table> tag; use clear names for id’s and classes; Wrap elements and functional parts in <div> for simple and clear styling: Divide et impera! Progressive JPEG method

Best practices Set classes, nevertheless it looks unnecessary Browser specific content; using classes instead of hacks Use JS for Browser determination <!--IF IE--> for ie.css Easy restyling/rebranding Easy access to abstractions and enhance styling possibilities

Best practices Use multiple classes for one elements: Abstract classes {float: left;}, {position: relative;}, {display: none;} Similar elements styling TextTextTextTextTextTextTextText example form elements event-depended styling Hover styling (a img {behavoir_1} / a:hover img {behavoir_2}) Menus, events, notifications, etc. – it’s web 2.0, man!

References http://www.w3schools.com http://google.com

Thank you!