Tukaj je nekaj CSS primerov in nasvetov, da mi ne pobegnejo iz glave.

ID SELECTORS
#id  lahko uporabiš samo 1x na stran
p#id   -  velja za paragraph znotraj #id    (BREZ PRESLEDKA)
td#id
th#id

CLASS SELECTORS
li.class {background: red;}   -  samo velja za li znotraj class
td.class   -   samo za td znotraj class

<li class="first urgent">  pomeni da ima dva selektorja, na katera lahko ciljaš individualno.
.first {..........
.urgent {..............

GRUPIRANJE SELEKTORJEV (lahko vendar uporabi presledek, ampak za zadnjim ni presledka!!!)
h1, h2, h3, h4, h5 {...............
ali
h1,
h2,
h3,
h4,
h5 {................

th, td {.............


PARENT CHILD (parent vedno prvi v kodi, vmes presledek obvezno)
classparent
           classchild

#parent child {...................
.parent child {....................


KONFLIKTI  (če imata dva ista selektorja različno kodo, potem se upošteva vrstni red - ampak ne vedno)
#links a {background: red;}
#links a {background: green;}
               potem bodo linki green, ker se upošteva vrstni red

body li {background: red;}
li {background: green;}
                  upošteva se prvi, ker je bolj specifičen, vrstni red tukaj ne velja

!IMPORTANT (če imaš konflikt, vedno dodaj !important, ki bo premegal vse konflikte)  - vedno dodaj presledek na začetku
li {background: green !important;}

CENTRIRAJ BLOK (z margin auto)

p {margin: 10px auto 10px auto;}  centriraj na sredino, če samo en auto potem je lahko align na levo ali desno
width!!!! pomeni samo širino texta, margin, border padding se prišteje!!!! dodatno

FLOAT CONTENT
#content {
float: left;
padding: 0 240px 15px 5px;
}

#right-bar {
float: right;
margin: 0 0 15px -200px;
}

margin nastaviš na nagativno vrednost, ki mora biti manjša kot je širina content bloka, da potem ne overlapata eden čez drugega. To je osnova za css float of content boxes. Footer pa daš pod clear:both;

MARGIN JE LAHKO NEGATIVEN; PADDING NIKOLI

Se pravi floataš box, uporabiš negativni margin in pozitivni padding in float both.

ČE hočeš da je FOOTER odmaknjen zgoraj oziroma da ima margin nekaj px, recimo 20, ne pomaga margin:20px; v footer kodi, ampak moraš dati margin-bottom: 20px; na content in right-bar, najbolje na oba naenkrat.

CLEAR ignorira margin-top!!!!

CONTAINER (ki zajema content in desni bar) mu daš width 100% in OVERLOW:AUTO;
ne vem točno zakaj ampak tako mora bit da vse lepo deluje :)

KAKO SPREMENITI li V VODORAVNI POLOŽAJ (recimo dati menu v inline)
#navtopmenu li {
    display: inline; list-style:none; (to moraš dodati, da v nekaterih browserjih ne vidiš cifer pred linki, recimo 1, 2, 3, 4, ....)
}

DISPLAY: NONE;  --- se uporablja recimo za dropdown menije, ko želiš skriti submenuje v ne-hover stanju


BACKGROUNDS --- lokacija slik je relativna na lokacijo css file-ja in ne na html lokacijo!!!!
background-image: url(images/lepavida.jpg);     repeat-left, repeat-right, no-repeat
background-position: 50% (vodoravno) 0 (navpično);  50% 40px (lahko uporabiš pixle tudi

TEXT ALIGN
p { text-align: left, right, justify, center; }

VERTICAL ALIGN TEXT
p {vertical-align: 10px (1em, -1em - za subscript fonte recimo)

Tag:Emergency