HTML/CSS

From Things and Stuff Wiki
Jump to navigation Jump to search


to merge from bits of design. aaand break out. and generally sort.

Standards

HTML

CSS

Working Drafts

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.

Resources

Articles

Tools

See also Browsers

Bookmarklets

Overlay

div { outline:1px solid red; }

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';}}})();

Testing

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

Testing

Browsers available:

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

Plus Windows; Firefox, Chrome, IE.

To check

Resets, normalize, etc.

Different browsers have different defaults.

Properties

Selectors

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

h1 > h2
  <h1><h2></h2></h1>
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

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

Tips

Mobile & Responsive

Basics

Examples

Viewport

Media Types/Queries

@media <media type (expressions)> {
  /* media-specific rules */
}

 @media screen and (min-width: 500px) and (max-width: 800px) { ... }

or 

<link rel="stylesheet" media="<media type (expressions)>" href="specific.css" />

Articles

320andup

Mobile first system. 

@media only screen and (min-width: 480px) {
 /* 480 =================================================== */
}
@media only screen and (min-width: 600px) {
 /* 600 =================================================== */
}
@media only screen and (min-width: 768px) {
 /* 768 =================================================== */
}
@media only screen and (min-width: 992px) {
 /* 992 =================================================== */
}
@media only screen and (min-width: 1382px) {
 /* 1382 =================================================== */
 body {
   max-width: 1440px;
 }
}

Other

From the Responsive Design Testing bookmarklet;

  • 240 x 320 (mobile)
  • 320 x 480 (mobile)
  • 480 x 640 (small tablet)
  • 768 x 1024 (tablet - portrait)
  • 1024 x 768 (tablet - landscape)
  • 1200 x 800 (desktop)

Navigation

Shim

Video

Grid

Frameworks

960.gs

blueprint

Generators

Overlays

Vertical rhythm

Web

JS

Bookmarklets

CSS

Sass

Accessibility

See also Design

Headings should not be removed using display:none, because it removes the headings from assistive technology. Instead headings can be made invisible to sighted users using CSS class="element-invisible". [10]

Typography

body
article
h1
h2
h3
p, ul
small, aside

Kerning

Font symbols

Background

Outline

Data

Animations & transitions

Sprites

Header, footer

Menus

Gradients

Full screen

Misc

Preprocess

See also Sass

JS Shims

For fixing the lack of HTML5/CSS3 support in older browsers.

Frameworks

Retrieved from "https://wiki.thingsandstuff.org/index.php?title=HTML/CSS&oldid=2244"