Kijelölő - Selector

Ennek a segítségével hozhatjuk kapcsolatba a HTML kódot és a CSS stílus utasításainkat.
Felépítése (szintaxisa - syntax):

http://www.w3schools.com/Css/css_syntax.asp

A Kijelölő (jelen estben a H1) határozza majd meg, hogy melyik elemre vonatkozzon az utána kapcsos zárójelek között megadott stílusdeklaráció. A pontos meghatározás mindig a megadható tulajdonság (property) nevével kezdődik, majd egy kettőspont után írjuk az értékét (value). Több deklarációt egymás után úgy adhatunk meg, hogy pontosvesszóvel válasszuk el egymástól őket. A záró kapcsoszárójel után írhatnánk a következő stílusdeklarációt. Viszont ez elég olvashatatlanná tenné, ezért a gyakorlatban elterjedt módszereket itt bemutatom:

  h1 {color:blue; font-size: 12px;}
  p { border:solid #C63 2px; background-color: lime; font-size: small; font-style: italic;}
  

Itt soronként egy deklaráció történik, amely már könnyebben értelmezhető, mintha mindent egy sorba írtunk volna. A második sorban elhelyezett megadásnál viszont már láthatjuk, hogy esetleg egy bonyolultabbb meghatározás még mindig nehezen áttekinthető forrás hoz létre. A gyakorlatban követendő minta ezekután tehát nézzen így ki:

  h1 {
  	color:blue; 
    font-size: 12px;
  }
  p {
  	border:solid #C63 2px; 
    background-color: lime; 
    font-size: small; 
    font-style: italic;
  }
  

Ezzel a formával azt hiszem, hogy tényleg jól áttekinthető és értelmezhető a deklaráció.

Megjegyzés beszúrása a CSS-be (Comment)

Gyakran van szükségünk arra, hogy kommenteket helyezzünk el a forráskódban a későbbi javítás elősegítése érdekében, vagy csak egy ideiglenes teszteléshez. Erre más programokhoz hasonlóan itt is van lehetőségünk. Kezdő jele a "/*" és a befejező jele pedig a "*/". A megjegyzés lehet egysoros vagy több soros is.

	/* ez egy megjegyzés */
  h1 {
  	color:blue; 
    font-size: 12px;
  }
  p {
  	border:solid #C63 2px; 
    /* background-color: lime;  most tesztelek, ne legyen zöld a háttér, ezért megjegyzésbe teszem */
    font-size: small; 
    font-style: italic;
  }