Edit in JSFiddle

	p, blockquote {
		text-align: justify;
	}
	.otkucano {
	   font-family: monospace;
	   font-size: 14pt;
	}
	.tipografija {
	   font-variant: small-caps;
	}
	.strip {
	   font-family: "Comic Sans MS";
	}
	.citat {
	   font-family: "Comic Sans MS";
	}
	.autor {
	   font-weight: bold;
	}
	.roman {
	   font-style: italic;
	} 
	.element {
	   font-weight: bold;
	}
	
	.svojstvo {
	   font-style: italic;
	}
	
	.engPojam {
	   font-style: italic;
	}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Uvod u logičko formatiranje</title>
	<style>
	p, blockquote {
		text-align: justify;
	}
	.otkucano {
	   font-family: monospace;
	   font-size: 14pt;
	}
	.tipografija {
	   font-variant: small-caps;
	}
	.strip {
	   font-family: "Comic Sans MS";
	}
	.citat {
	   font-family: "Comic Sans MS";
	}
	.autor {
	   font-weight: bold;
	}
	.roman {
	   font-style: italic;
	} 
	.element {
	   font-weight: bold;
	}
	
	.svojstvo {
	   font-style: italic;
	}
	
	.engPojam {
	   font-style: italic;
	}
	</style>
</head>
<body>
        <h3>Logičko formatiranje - nastavak</h3>
		<p>U ovom odeljku ilustrujemo formatiranje teksta pomoću elementa span i CSS-klasa.</p>
		<p>Ne koristimo element <span class='element'>tt</span> već CSS-svojstvo <span class='svojstvo'>font-family</span>: <span class='otkucano'>tekst čiji su karakteri iste širine (neproporcionalni font, kao na pisaćoj mašini, ali veličine 14pt)</span>.</p>
		<p>"Mala velika slova" (eng. <span class='engPojam'>small capitals, small caps</span>) u tipografiji predstavljaju zapis svih slova u tekstu tako da se glif malog slova zamenjuje glifom odgovarajućeg velikog slova, ali se zato zadržava veličina malog slova. 
		<span class='tipografija'>"Mala velika slova" (eng. <span class='engPojam'>small capitals, small caps</span>) u tipografiji predstavljaju zapis svih slova u tekstu tako da se glif malog slova zamenjuje glifom odgovarajućeg velikog slova, ali se zato zadržava veličina malog slova.</span></p>
        <p>Eksperimentalni tekst: <span class='strip'>kao da je u pitanju tekst iz stripa</span>.</p>
        
	<h3>Element pre</h3>
    <p>Element pre se koristi kada želimo da se tekst prikaže tačno onako kako smo ga formatirali (razmaci, novi redovi i sl.). Sledi poznata pesmica Duška Radovića na dva načina, bez etiketa (sa namernim višestrukim razmacima), odnosno obeležena kao element <span class='element'>pre</span>.</p>
	
	Kad je bio mrak
	pojurila                       mačka miša
	čak čak čak
	pojurila mačka miša
	čak čak čak
	
	Da li ga je progutala
	il' ga nije progutala
	to ni ona nije znala
	jer je bio mrak
	jer je bio mrak.
	
	
<pre>
	Kad je bio mrak
	pojurila                       mačka miša
	čak čak čak
	pojurila mačka miša
	čak čak čak
	
	Da li ga je progutala
	il' ga nije progutala
	to ni ona nije znala
	jer je bio mrak
	jer je bio mrak.
</pre>
        
<p>Očigledno element <span class='element'>pre</span> čuva sve korisnikove razmake.</p>        

<h3>Citati: elementi blockquote i q</h3>
<p>Sledeći primer ilustruje razliku između neetiketiranog teksta i teksta obeleženog elementom <span class='element'>p</span>, odnosno elementom <span class='element'>pre</span> (oba elementa su formatirana na isti način jer pripadaju istoj klasi <span class='klasa'>citat</span>).</p>

Većim delom svoga toka reka Drina protiče kroz tesne gudure izmeđustrmih planina ili kroz duboke kanjone okomito odsečenih obala. Samona nekoliko mesta rečnog toka njene se obale proširuju u otvorenedoline i stvaraju, bilo na jednoj bilo na obe strane reke, župne,delimično ravne, delimično talasaste predele, podesne za obrađivanje inaselja. Takvo jedno proširenje nastaje i ovde, kod Višegrada, namestu gde Drina izbija u naglom zavoju iz dubokog i uskog tesna cakoji stvaraju Butkove Stijene i Uzavničke planine.


<p class='citat'>Većim delom svoga toka reka Drina protiče kroz tesne gudure izmeđustrmih planina ili kroz duboke kanjone okomito odsečenih obala. Samona nekoliko mesta rečnog toka njene se obale proširuju u otvorenedoline i stvaraju, bilo na jednoj bilo na obe strane reke, župne,delimično ravne, delimično talasaste predele, podesne za obrađivanje inaselja. Takvo jedno proširenje nastaje i ovde, kod Višegrada, namestu gde Drina izbija u naglom zavoju iz dubokog i uskog tesnaca koji stvaraju Butkove Stijene i Uzavničke planine.</p>

		<blockquote class='citat'>Većim delom svoga toka reka Drina protiče kroz tesne gudure između strmih planina ili kroz duboke kanjone okomito odsečenih obala. Samo na nekoliko mesta rečnog toka njene se obale proširuju u otvorene doline i stvaraju, bilo na jednoj bilo na obe strane reke, župne, delimično ravne, delimično talasaste predele, podesne za obrađivanje i naselja. Takvo jedno proširenje nastaje i ovde, kod Višegrada, na mestu gde Drina izbija u naglom zavoju iz dubokog i uskog tesnaca koji stvaraju Butkove Stijene i Uzavničke planine. — <span class='autor'>Ivo Andrić</span>, <span class='roman'>Na Drini ćuprija</span></blockquote>
    
<p>Element <span class='element'>q</span> se razlikuje od elementa <span class='element'>blockquote</span> po tome što nije blokovski već linijski (prikazuje se u istoj liniji kao okolni tekst), dok se blokovski elementi uvek počinju u novom redu, kao i sadržaj koji sledi posle njih. Takođe, element <span class='element'>q</span> automatski ubacuje znake navode oko svog sadržaja, što nije slučaj sa elementom <span class='element'>blockquote</span>.</p>
<p>Što kaže Andrić u svojoj besedi: <q>Biti čovek, rođen bez svoga znanja i bez svoje volje, bačen u okean postojanja. Morati plivati. Postojati.</q> Baš mu se nije plivalo.</p>

<p>Što kaže Andrić u svojoj besedi: <blockquote>Biti čovek, rođen bez svoga znanja i bez svoje volje, bačen u okean postojanja. Morati plivati. Postojati.</blockquote> Baš mu se nije plivalo.</p>

</body>
</html>