HTML/CSS

to merge from bits of design. aaand break out.

Browsers

Specs

HTML Living Standard
HTML: The Markup Language
HTML5: Edition for Web Authors - omits UA aspects

HTML Design Principles

W3C: CSS (2010 snapshot)
W3C Wiki: CSS

Docs, guides, etc.

Basics

A Beginner’s Guide to HTML & CSS is a simple and comprehensive guide dedicated to helping beginners learn HTML and CSS. Outlining the fundamentals, this guide works through all common elements of front-end design and development.

CSS Structure and Rules

http://www.w3.org/community/webed/wiki/Optimizing_content_for_different_browsers:_the_RIGHT_way

Resources

Articles

About HTML semantics and front-end architecture
HTML5 id/class name cheatsheet - Or, “The mapping of HTML5 structural elements to id and class names for use with
s”

Principles of writing consistent, idiomatic CSS
Scalable and Modular Architecture for CSS - A flexible guide to developing sites small and large.

Tools

Bookmarklets

http://speckyboy.com/2009/02/16/32-indispensable-bookmarklets-for-web-developers-and-designers/

Overlay

div { outline:1px solid red; }

http://aymanh.com/css-debugging-bookmarklets - outline is border not outline >_<

javascript:(function(){var t=['div','table','form','address','blockquote','h1','h2','h3','h4','h5','h6','p','pre','dd','dl','dt','ol','ul'];
var c=['blue','blue','blue','red','red','red','red','red','red','red','red','red','red','green','green','green','green','green'];for (var i in t){var l=document.getElementsByTagName(t[i]);var j=0,e;while(e=l.item(j++)){e.style.outline='solid '+c[i]+' 1px';}}})(); [

http://subtlegradient.com/articles/2009/07/23/subtle_hover_css_inspect_bookmarklet.html

Testing

Holmes is stand-alone diagnostic CSS stylesheet that can highlight potentially invalid, inaccessible or erroneous HTML(5) markup by adding one class.

Testing

Browsers available:

Chromium 22 (Dev)
Google Chrome 20
Firefox 13
Firefox 16 (Nightly)
Opera 12

Plus Windows; Firefox, Chrome, IE.

To check

http://www.webupd8.org/2011/09/test-websites-in-internet-explorer-9-8.html

Resets, normalize, etc.

Different browsers have different defaults.

http://html5boilerplate.com/
- http://html5boilerplate.com/docs/css/

http://html5reset.org/
- https://github.com/murtaugh/HTML5-Reset

http://stackoverflow.com/questions/6887336/what-is-the-different-between-normalize-css-and-reset-css

Selectors

Selectors Level 3 - W3C Recommendation 29 September 2011
- http://www.w3.org/community/webed/wiki/CSS/Selectors

h1 + h2
  <h1></h1><h2></h2>

h1 > h2
  <h1><h2></h2></h1>

Pseudo Class Selectors

root - Selects the element that is at the root of the document. Almost certainly will select the <html> element, unless you are specifically working in some weird environment that somehow also allows CSS. Perhaps XML.

first-child - Selects the first element of its type within a parent.

last-child - Selects the last element of its type within a parent.

nth-child(N) - Selects elements based on a simple provided algebraic expression (e.g. "2n" or "4n-1"). Has the ability to do things like select even/odd elements, "every third", "the first five", and things like that. Covered in more detail here with a tester tool.

nth-of-type(N) - Works like :nth-child, but used in places where the elements at the same level are of different types. Like if inside a div you had a number of paragraphs and a number of images. You wanted to select all the odd images. :nth-child won't work there, you'd use div img:nth-of-type(odd). Particularly useful when working with definition lists and their alternating -dt- and -dd- elements.

first-of-type - Selects the first element of this type within any parent. So if you have two divs, each had within it a paragraph, image, paragraph, image. Then div img:first-of-type would select the first image inside the first div and the first image inside the second div.

last-of-type - Same as above, only would select the last image inside the first div and the last image inside the second div.

nth-last-of-type(N) - Works like :nth-of-type, but it counts up from the bottom instead of the top.

nth-last-child(N) - Works like :nth-child, but it counts up from the bottom instead of the top.

only-of-type - Selects only if the element is the only one of its kind within the current parent.

Specificity

p has a specificity of 1 (1 HTML)
div p has a specificity of 2 (2 HTML; 1+1)
.sith has a specificity of 10 (1 class)
div p.sith has a specificity of 12 (2 HTML and a class; 1+1+10)
#sith has a specificity of 100 (1 id)
body #darkside .sith p has a specificity of 112 (HTML, id, class, HTML; 1+100+10+1)

[1] [2] ([3]),[4]

Positioning

Google HTML/CSS/Javascript from the Ground Up Class: CSS Walkthrough - video

display: block - default 100% width, flows vertically
display: inline - consumes width of content, flows horizontally
display: inline-block
display: table-cell - vertical align method [5]
  http://www.quirksmode.org/css/display.html

float - floats element next to containing box or other floated element

position: absolute - out of flow