Sada ćemo da vidimo još jedan trik, klijent traži da neki naslovi koji su definisani stilom h1 budu lijevo poravnati, a drugi da budu desno. Jasno je da to ne može biti jedan te isti h1 jer on mora biti ili lijevo ili desno, dakle trebaju nam bar 2 stila h1, jedan lijevo, a drugi desno. Naravno ovo je nerješivo jer ne možemo imati tako nešto, ali niko nam ne brani da napravimo recimo 2 klase pa im damo imena npr .h1lijevo i .h2desno (primjetite da imam tačku ispred imena stila jer je ovo stil sa našim imenom tj klasa, a ne originalni h1) i da koristimo njih.
Zdravo, ja sam .h1lijevo
A, ja sam .h1desno
Nekad vas ne buni ovo h1 u .h1lijevo, stil se mogao zvati i .mojnaslovlijevo ili .palacinkasacokoladomlijevo. Naime stavio sam h1 samo zato da bude jasno da je to naslov, ovaj moj h1lijevo nema ništa sa izvornim h1 koji je ostao nepromjenjen (jer ga ni nema u stilovima).
OK ovo je ovako moguće i sasvim OK, ali nije baš profesionalno, neki profić da pogleda ovaj kod rekao bi da to nije baš to jer može i drugačije.
CSS stilovi se mogu i kombinovati, pazite sad, koristićemo izvorni H1, a onda ćemo mu dodati klasu .lijevo ako je h1 poravnat liijevo, i .desno, ako je poravnat desno. Kod će izgledati ovako
<h1 class="lijevo">Zdravo, ja sam h1 lijevo</h1>
i
<h1 class="desno">Zdravo, ja sam h1 desno</h1>
Ruku na srce ovaj .lijevo nam nije ni trebao jer je h1 svakako defaultno lijevo, ali eto...
Kako je ovo napravljeno? Pogledajte CSS stilove u CSS Designeru, vidite da imate stilove .lijevo i .desno i jedino što je njima zadato je poravnanje, lijevo ili desno, oni su tu svoju karakteristiku faktički dodali na originalni h1.
Pogledajmo sada gornji kod, vidjećete da HTML linija počinje <h1 class="lijevo">, dakle počinje h1 stil, a njemu je još dodan naš stil .lijevo tako što je naveden iza ovog h1 čime je stil .lijevo dodao ono što je njemu zadano, tome što h1 već posjeduje.
Kakve ovo mogućnosti otvara? Pa recimo da je neki h2 tekst u jednom naslovu crven, a u drugom zelen, pogledajte primjer ispod
<h2 class="crven"> ja sam h2 crven</h2>
<h2 class="zelen"> ja sam h2 zelen</h2>
A šta mislite da li možemo više stilova odjednom da kombinujemo, npr h1 .crven .desno, hajde da probamo, ako imamo ovakav kod
<h1 class="crven desno">Zdravo, ja sam h1 crven desno</h1>
dobijemo
dakle kombinovanje je moguće! U praksi je zato česta situacija da imate stil koji se nove npr "naslov crven desno sport" čime su kombinovana četiri stila u jedan.
Obratite pažnju samo na jedno, a to je da u kodu nemate tačku ispred imena stila, naime, kada dajete svoje ime stilu u CSS Designeru kucate tačku, npr .lijevo ali u kodu gdje piše class="lijevo" primjetite da nema tačke, evo recimo pogledajte odmah ovaj ispod.