Zkopíruj CSS kód dle potřeby do CSS kódu Tvého webu. Nebo si CSS soubor přímo stáhni.
Stáhni si CSS soubor zdeDostyluj velikost, barvu a jednotlivé typy textu (body, nadpisy h1-h6, odstavec p a další) v CSS kódu Tvého webu podle potřeby.
V případě jednorázové potřeby jednoho z řezů můžeš použít předem nastylované tagy <strong> a <em>.
Pokud používáš redakční systém WordPress, můžeš také využít plugin či skautské šablony od Dobrého skautského webu:
SKAUT Font plugin Šablona DSW1 pro oddíly Šablona DSW2 pro oddíly Šablona DSW3 pro střediska
Tento kód obsahuje veškeré nastavení textu z tohoto webu. Případně si můžeš stáhnout pouze základní definici webových písem.
Nezapomeň si velikost textu a další typy textu dostylovat dle potřeby!
Stáhni si CSS soubor tohoto webu zde Stáhni si pouze definici webových písem
@charset "utf-8";
/* CSS Document */
@font-face {
font-family: 'themix';
src: url('https://cdn.skauting.cz/fonts/TheMix_LT_400.eot');
src: url('https://cdn.skauting.cz/fonts/TheMix_LT_400.eot? #iefix') format('embedded-opentype');
src: url('https://cdn.skauting.cz/fonts/TheMix_LT_400.woff') format('woff'),
url('https://cdn.skauting.cz/fonts/TheMix_LT_400.woff2') format('woff2'),
url('https://cdn.skauting.cz/fonts/TheMix_LT_400.otf') format('opentype'),
url('https://cdn.skauting.cz/fonts/TheMix_LT_400.svg#themix') format('svg');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'themix';
src: url('https://cdn.skauting.cz/fonts/TheMix_LT_400i.eot');
src: url('https://cdn.skauting.cz/fonts/TheMix_LT_400i.eot? #iefix') format('embedded-opentype');
src: url('https://cdn.skauting.cz/fonts/TheMix_LT_400i.woff') format('woff'),
url('https://cdn.skauting.cz/fonts/TheMix_LT_400i.woff2') format('woff2'),
url('https://cdn.skauting.cz/fonts/TheMix_LT_400i.otf') format('opentype'),
url('https://cdn.skauting.cz/fonts/TheMix_LT_400i.svg#themix') format('svg');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'themix';
src: url('https://cdn.skauting.cz/fonts/TheMix_LT_700.eot');
src: url('https://cdn.skauting.cz/fonts/TheMix_LT_700.eot? #iefix') format('embedded-opentype');
src: url('https://cdn.skauting.cz/fonts/TheMix_LT_700.woff') format('woff'),
url('https://cdn.skauting.cz/fonts/TheMix_LT_700.woff2') format('woff2'),
url('https://cdn.skauting.cz/fonts/TheMix_LT_700.otf') format('opentype'),
url('https://cdn.skauting.cz/fonts/TheMix_LT_700.svg#themix') format('svg');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'themix';
src: url('https://cdn.skauting.cz/fonts/TheMix_LT_700i.eot');
src: url('https://cdn.skauting.cz/fonts/TheMix_LT_700i.eot? #iefix') format('embedded-opentype');
src: url('https://cdn.skauting.cz/fonts/TheMix_LT_700i.woff') format('woff'),
url('https://cdn.skauting.cz/fonts/TheMix_LT_700i.woff2') format('woff2'),
url('https://cdn.skauting.cz/fonts/TheMix_LT_700i.otf') format('opentype'),
url('https://cdn.skauting.cz/fonts/TheMix_LT_700i.svg#themix') format('svg');
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: 'skautbold';
src: url('https://cdn.skauting.cz/fonts/skaut-bold-webfont.eot');
src: url('https://cdn.skauting.cz/fonts/skaut-bold-webfont.eot? #iefix') format('embedded-opentype');
src: url('https://cdn.skauting.cz/fonts/skaut-bold-webfont.woff') format('woff'),
url('https://cdn.skauting.cz/fonts/skaut-bold-webfont.woff2') format('woff2'),
url('https://cdn.skauting.cz/fonts/skaut-bold-webfont.otf') format('opentype'),
url('https://cdn.skauting.cz/fonts/skaut-bold-webfont.svg#skautbold') format('svg');
font-weight: normal;
font-style: normal;
}
/* Typography Scale: https://www.modularscale.com/?1&rem&1.2 */
html {
/* Set Base Text Size */
font-size: 16px;
}
body {
font-family: themix, sans-serif;
color: #00395b;
}
h1, .h1 {
font-family: skautbold, sans-serif;
font-weight: normal;
font-size: 2.986rem;
}
h2, .h2 {
font-weight: 700;
font-size: 2.488rem;
}
h3, .h3 {
font-weight: 700;
font-size: 2.074rem;
}
h4, .h4 {
font-weight: 700;
font-style: italic;
font-size: 1.728rem;
}
h5, .h5 {
font-weight: 700;
font-size: 1.44rem;
}
h6, .h6 {
font-weight: 700;
font-style: italic;
font-size: 1.2rem;
}
p {
font-weight: 400;
font-style: normal;
font-size: 1rem;
}
b {
font-weight: 700;
}
i {
font-style: italic;
}
.italic {
font-style: italic;
}
.bold {
font-weight: 700;
}
.uvodlogo {
max-height: 200px;
min-height: 70px
}
Následující HTML kód Ti ukáže, jak jednoduše stylovat text.
Nadpis velikosti H1
<h1>
Nadpis velikosti H1
</h1>
Nadpis velikosti H2
<h2>
Nadpis velikosti H2
</h2>
Nadpis velikosti H3
<h3>
Nadpis velikosti H3
</h3>
Nadpis velikosti H4
<h4>
Nadpis velikosti H4
</h4>
Nadpis velikosti H5
<h5>
Nadpis velikosti H5
</h5>
Nadpis velikosti H6
<h6>
Nadpis velikosti H6
</h6>
Odstavec běžného textu. Odstavec běžného textu lze dostylovat příslušnými tagy přímo pro daná slova, spojení či věty.
<p>
Odstavec běžného textu. Odstavec běžného textu lze
<strong>
dostylovat
</strong>
příslušnými tagy přímo
<em>
pro daná slova, spojení či věty.
</em>
</p>
Odstavec běžného textu, který je kurzívou.
<p class="italic">
Odstavec běžného textu, který je kurzívou.
</p>
Odstavec běžného textu, který je tučně.
<p class="bold">
Odstavec běžného textu, který je tučně.
</p>
Odstavec běžného textu, který je tučnou kurzívou.
<p class="bold italic">
Odstavec běžného textu, který je tučnou kurzívou.
</p>