selektor { waciwo1: warto1; waciwo2: warto2; ...
waciwoN: wartoN; }

=====================================

h1 { color: red; }

=====================================

h1, h2, h3, 4h, h5, h6 { color: red; }

=====================================

* { color: red; }

=====================================

tr td ol  { color: red; }

=====================================

tr * ol  { color: red; }

=====================================

p.darkarea  { color: white; }

=====================================

<p class="darkarea">Lorem ipsum dolor sit amet, consectetuer 
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut 
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad 
minim veniam, quis nostrud exerci tation ullamcorper suscipit 
lobortis nisl ut aliquip ex ea commodo consequat.</p>

=====================================

*.darkarea  { color: white; }

=====================================

.darkarea  { color: white; }

=====================================

#comment  { background-color: green; }

=====================================

element[atrybut="warto"]

=====================================

table[border="3"]

=====================================

table[border]

=====================================

table.datalist[border="3"]

=====================================

table[border="3"][width="100%"]

=====================================

[language~="us"]

=====================================

<html>
<body>
<div class="div1">
  <h1>Nagwek 1</h1>
  <table>
    <tr><td>Komrka 1</td><td>Komrka 2</td></tr>
    <tr><td>Komrka 3</td><td>Komrka 4</td></tr>
  </table>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing 
  elit, sed diam nonummy nibh euismod tincidunt ut laoreet 
  dolore magna aliquam erat volutpat. Ut wisi enim ad minim 
  veniam, quis nostrud exerci tation ullamcorper suscipit 
  lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<div class="div2">
  <h1>Nagwek 2</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing 
  elit, sed diam nonummy nibh euismod tincidunt ut laoreet 
  dolore magna aliquam erat volutpat. Ut wisi enim ad minim 
  veniam, quis nostrud exerci tation ullamcorper suscipit 
  lobortis nisl ut aliquip ex ea commodo consequat.</p>
  <ol>Uporzdkowana lista
    <li>Pierwszy element
    <li>Drugi element
    <li>Trzeci element
  </ol>
</div>
</body>
</html>

=====================================

div.div2 li

=====================================

div.div1 > table

=====================================

table + p

=====================================

body { color: blue; }

=====================================

body { color: blue; }
p.notblue { color: red; }

=====================================

body { color: blue; }
p.akcent { font-weight: bold; }

=====================================

:link  { color: blue; }
:visited { color: red; }
:hover {color: green; }

=====================================

:link.important { font-weight: bold; }
...
<a href="http://jakis.przyklad.pl/wazne.html" 
  class="important">Wana wiadomo</a>

=====================================

div > p:first-child { text-indent: 25px; }

=====================================

/* Dwa poziomy cudzysowu dla dwch jzykw */
:lang(en) { quotes: '"' '"' "'" "'"; }
:lang(fr) { quotes: "" "" "<" ">"; }

/* Dodaje cudzysw (przed i po) do cytatu */
blockquote:before { content: open-quote; }
blockquote:after  { content: close-quote; }

=====================================

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Formatowanie pierwszego wiersza</title>
  <style type="text/css">
    p:first-line { text-decoration: underline; }
    p.noline:first-line { text-decoration: none; }
  </style>
</head>
<body>
<h1>GENERALNY KONGRES, 4 lipca 1776.</h1>
<p class="noline">Deklaracja Niepodlegoci trzynastu Stanw Zjednoczonych,</p>

<p>Ilekro wskutek biegu wypadkw koniecznym si staje dla jakiego narodu, by zerwa wizy polityczne czce go z innym narodem i zaj wrd potg ziemskich oddzielne i rwnorzdne stanowisko, do ktrego upowaniaj go prawa natury i jej Bg, to waciwy respekt wymaga, aby nard ten poda powody, ktre zmusiy go do oderwania si.</p>

</body>
</html>

=====================================

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Formatowanie inicjau</title>
  <style type="text/css">
    p.dropcap:first-letter { font-size: 3em;
       font-weight: bold; float: left;
       border: solid 1px black; padding: .1em;
       margin: .2em .2em 0 0; }
  </style>
</head>
<body>
<h1>GENERALNY KONGRES, 4 lipca 1776.</h1>
<p>Deklaracja Niepodlegoci trzynastu Stanw Zjednoczonych,</p>
<p class="dropcap">Ilekro wskutek biegu wypadkw koniecznym si staje dla jakiego narodu, by zerwa wizy polityczne czce go z innym narodem i zaj wrd potg ziemskich oddzielne i rwnorzdne stanowisko, do ktrego upowaniaj go prawa natury i jej Bg, to waciwy respekt wymaga, aby nard ten poda powody, ktre zmusiy go do oderwania si.</p>
</body>
</html>

=====================================

blockquote:before { content: "; }
blockquote:after  { content: "; }

=====================================

p.bordered {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: black;

  border-right-width: 2px;
  border-right-style: dashed;
  border-right-color: red;

  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: black;

  border-left-width: 2px;
  border-left-style: dashed;
  border-left-color: red;
}

=====================================

p.bordered {
  border-top: 1px solid black;
  border-right: 2px dashed red;
  border-bottom: 1px solid black;
  border-left: 2px dashed red;
}

=====================================

p.bordered {
  border: 1px solid black;
  border-right: 2px dashed red;
  border-left: 2px dashed red;
}

=====================================

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Formatowanie za pomoc em</title>
  <style type="text/css">
    /* Ustawia wielko czcionki w akapicie na 10pt */
    p { font-size: 10pt; }
    /* Ustawia wielko czcionki na 1.1 * rodzic */
    i.def1 { font-size: 1.1em; }
    /* Ustawia wielko czcionki na 110% rodzica */
    i.def2 { font-size: 110%; }
  </style>
</head>
<body>
  <p>Lorem ipsum dolor sit amet, <i class="def1">consectetuer 
  adipiscing</i> elit, sed diam nonummy nibh euismod 
  tincidunt ut laoreet dolore magna <i class="def2">aliquam 
  erat volutpat</i>. Ut wisi enim ad minim veniam, quis 
  nostrud exerci tation ullamcorper suscipit obortis nisl ut 
  aliquip ex ea commodo consequat.</p>
</body>
</html>

=====================================


