<h2>
Naslov h2 je 150% veći od teksta odlomka.
</h2>
<p>
Pozdrav svima koliko vas god ima.
</p>
body {
background-color: lime;
}
p {
background-color: #FF0;
}
- font-family
- font-size
- font-style
- font-weight
font-family: Tahoma, Arial, sans-serif;
Vrijednost svojstva font-family mora biti font instaliran na korisničkom računalu ili generički font.
Dopušteno je navesti popis fontova, odvojenih zarezom.
Vrijednosti font-family: naziv fonta | generički naziv
a) Naziv fonta su određeni fontovi, kao Arial, Verdana itd.
b) Generički nazivi su: serif | sans-serif | cursive | fantasy | monospace
body {
font-size: 100%;
background-color: #FF0;
}
p {
font-size: 16px;
background-color: lime;
}
h2 {
font-size: 150%;
}
body {
font-size: 62.5%;
background-color: lime;
}
p {
font-size: 16px;
background-color: #FF0;
}
h2 {
font-size: 24px;
}
- normal
- italic
- oblique
- 100
- 200
...- 800
- 900
- normal
- lighter
- bold
- bolder
<body>
<ul>
<li>
Stavka popisa izvan i <span class="boja"> unutar </span> span elementa.
<p>
Odlomak izvan i <span class="boja"> unutar </span> span elementa.
</p>
</li>
</ul>
</body>
body {
font-weight: bold;
}
li {
font-style: italic;
}
p {
font-weight: lighter;
}
.boja {
font-weight: normal;
}
- text-indent
- text-align
- text-decoration
- letter-spacing
- text-transform
- word-spacing
- line-height
<h2>Bez uvlake</h2>
<h2 class="prvi">Uvučen 2em</h2>
<h2 class="drugi">Uvučen 30px</h2>
<h2 class="treci">Negativno -2em</h2>
<h2 class="cetvrti">Uvučen 20%</h2>
h2 {
font-size: 150%;
}
.prvi {
text-indent: 2em;
}
.drugi {
text-indent: 30px;
}
.treci {
text-indent: -2em;
}
.cetvrti {
text-indent: 20%;
}
<h2 class="prvi">Lijevo poravnato. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.</h2>
<h2 class="drugi">Desno poravnato. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</h2>
<h2 class="treci">Središnje poravnato. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</h2>
<h2 class="cetvrti">Obostrano poravnato. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h2>
.prvi {
text-align: left;
}
.drugi {
text-align: right;
}
.treci {
text-align: center;
}
.cetvrti {
text-align: justify;
}
<h2 class="prvi">Crta iznad</h2>
<h2 class="drugi">Crta preko</h2>
<h2 class="treci">Crta ispod</h2>
<h2 class="cetvrti">Bez crte</h2>
.prvi {
text-decoration: overline;
}
.drugi {
text-decoration: line-through;
}
.treci {
text-decoration: underline;
}
.cetvrti {
text-decoration: none;
}
<h2>Razmak među slovima 5px.</h2>
h2 {
letter-spacing: 5px;
}
<h2 class="prvi">Prvo slovo u riječi veliko.</h2>
<h2 class="drugi">Sva slova u rečenici velika.</h2>
<h2 class="treci">Sva slova u rečenici mala.</h2>
<h2 class="cetvrti">Slova ostaju nepromijenjena.</h2>
.prvi {
text-transform: capitalize;
}
.drugi {
text-transform: uppercase;
}
.treci {
text-transform: lowercase;
}
.cetvrti {
text-transform: none;
}
<h2>Razmak među riječima 8px.</h2>
h2 {
word-spacing: 8px;
}
<h2>Normalna visina retka.</h2>
<h2>Normalna visina retka.</h2>
<h2 class="prvi">Visina retka 300%.</h2>
<h2>Normalna visina retka.</h2>
<h2>Normalna visina retka.</h2>
<h2 class="drugi">Visina retka 25px.</h2>
<h2>Normalna visina retka.</h2>
<h2>Normalna visina retka.</h2>
.prvi {
line-height: 300%;
}
.drugi {
line-height: 25px;
}