Kilka zasad:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="pl" xml:lang="pl">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />

<p>Aby być zgodnym z XHTML ten tag musi zostać zamknięty.</p>

oraz

<img src="obrazek/hawt_chix.jpg" alt="babe" />

<p>Myślę, <em>ergo</em> jestem.</p>

Tagi wbudowane (inline) to przykładowo a lub em. Tagi blokowe to p i div.

<select name="animals">
<option value="cats"></option>
<option value="dogs" selected="selected">Dogs</option>
</select>

Przykładowo &lt; to odpowiednik <. & to &amp;

Są trzy sposoby użycia stylów na stronie: wewnętrzne (inline), osadzone i znajdujące się w osobnym pliku.

<p style="color:blue; margin:20px">...</p>

wstawiając go w nagłówku pliku HTML:

<head>
<style type="text/css">
hr {color:sienna}
p {margin-left:20px}
body {background-image:url("images/back40.gif")}
</style>
</head>

wstawiając style w pliku CSS i linkując go ze stroną HTML:

selector {property:value;}

i wtedy w pliku HTML:

<link rel="stylesheet" type="text/css" href="style.css" />

inline > wewnętrzny (w dokumencie) > wewnętrzny (zaimportowany) > zewnętrzny (w pliku css) > zewnętrzny zaimportowany > wartości domyślne

Klasy definiujemy w CSS przez:

p.right {text-align: right;}

a w pliku HTML:

<p class="right">...</p>

Zapis:

.right {text-align: right;}

odnosić się będzie do wszystkich selektorów o klasie right.

#green {color: green;}

a w pliku HTML:

<p id="right">...</p>

Komentarze:

/* komentarz */

Importowanie innych plików CSS:

@import url(style.css);

Grupowanie:

h1,h2,h3,h4,h5 {color:navy;}

Nadawanie stylu elementom HTML o danym typie:

input[type="text"] {background-color:blue}

• http://www.smashingmagazine.com/2009/11/23/6-useful-coding-solutions-for-designers-and-developers/
• http://www.webdesignerwall.com/tutorials/5-simple-but-useful-css-properties/
• http://net.tutsplus.com/tutorials/html-css-techniques/30-css-best-practices-for-beginners/
• http://speckyboy.com/2010/04/26/30-pure-css-alternatives-to-javascript/

• http://net.tutsplus.com/tutorials/html-css-techniques/11-classic-css-techniques-made-simple-with-css3/
• http://net.tutsplus.com/videos/screencasts/a-crash-course-in-advanced-css3-effects/
• http://www.smashingmagazine.com/2010/02/01/50-brilliant-css3-javascript-coding-techniques/
  • http://tutorialzine.com/2010/01/sweet-tabs-jquery-ajax-css/
  • http://www.smashingmagazine.com/2009/12/19/what-you-need-to-know-about-behavioral-css/
  • http://www.zenelements.com/blog/css3-hsl-hsla-color-opacity/
  • http://perishablepress.com/press/2010/01/11/css3-progressive-enhancement-smart-design/
  • http://inspectelement.com/tutorials/a-look-at-some-of-the-new-selectors-introduced-in-css3/
  • http://24ways.org/2009/cleaner-code-with-css3-selectors
  • http://webdesignernotebook.com/css/the-css3-target-pseudo-class-and-css-animations/
  • http://kilianvalkhof.com/2008/css-xhtml/the-css3-not-selector/
  • http://tutorialzine.com/2009/11/hovering-gallery-css3-jquery/
  • http://www.viget.com/inspire/practical-uses-of-css3/
  • http://inspectelement.com/tutorials/code-a-backwards-compatible-one-page-portfolio-with-html5-and-css3/
  • http://www.netmag.co.uk/zine/develop-css/get-the-best-out-of-css3
• http://net.tutsplus.com/tutorials/html-css-techniques/design-a-prettier-web-form-with-css-3/
• http://www.smashingmagazine.com/2010/05/06/modern-css-layouts-part-2-the-essential-techniques/