Színek és tipográfia

<p class="csak-szoveg">Csak a szöveg színes.</p>

<p class="csak-hatter">Csak a háttér színes.</p>

<p class="mindketto">Szöveg és háttér is.</p>

.csak-szoveg {
  color: #be123c;
}

.csak-hatter {
  background-color: #fde68a;
}

.mindketto {
  color: white;
  background-color: #be123c;
}

<p class="nev">név: crimson</p>
<p class="hex">hex: #dc143c</p>
<p class="rgb">rgb(220 20 60)</p>
<p class="hsl">hsl(348 83.3% 47.1%)</p>

p {
  color: white;
  padding: 6px 10px;
  margin: 4px 0;
}

.nev { background-color: crimson; }
.hex { background-color: #dc143c; }
.rgb { background-color: rgb(220 20 60); }
.hsl { background-color: hsl(348 83.3% 47.1%); }

<p class="s1">L = 20%</p>
<p class="s2">L = 35%</p>
<p class="s3">L = 50%</p>
<p class="s4">L = 75%</p>
<p class="s5">L = 92%</p>

p {
  padding: 5px 10px;
  margin: 3px 0;
}

.s1 { background-color: hsl(348 83% 20%); color: white; }
.s2 { background-color: hsl(348 83% 35%); color: white; }
.s3 { background-color: hsl(348 83% 50%); color: white; }
.s4 { background-color: hsl(348 83% 75%); }
.s5 { background-color: hsl(348 83% 92%); }

<div class="minta">
  <p class="alpha">
    Átlátszó HÁTTÉRSZÍN — a szöveg éles.
  </p>
  <p class="opacity">
    OPACITY — a szöveg is elhalványul.
  </p>
</div>

.minta {
  padding: 10px;
  background-image: repeating-linear-gradient(
    45deg, #fde68a 0 12px, #fef3c7 12px 24px);
}

.alpha, .opacity {
  color: white;
  font-weight: bold;
  padding: 10px;
}

.alpha {
  background-color: rgb(190 18 60 / 0.5);
}

.opacity {
  background-color: rgb(190 18 60);
  opacity: 0.5;
}

<p class="rossz1">Világosszürke fehéren — 2,2 : 1</p>
<p class="rossz2">Sárga fehéren — 1,5 : 1</p>
<p class="rossz3">Piros zöldön — 1,4 : 1</p>
<p class="jo1">Sötétszürke fehéren — 7,6 : 1</p>
<p class="jo2">Fehér bordón — 6,3 : 1</p>

p {
  padding: 6px 10px;
  margin: 4px 0;
}

.rossz1 { color: #b0b0b0; background-color: white; }
.rossz2 { color: #facc15; background-color: white; }
.rossz3 { color: #e11d48; background-color: #16a34a; }
.jo1    { color: #4b5563; background-color: white; }
.jo2    { color: white;   background-color: #be123c; }

<p class="serif">serif — Árvíztűrő tükörfúrógép</p>
<p class="sans">sans-serif — Árvíztűrő tükörfúrógép</p>
<p class="mono">monospace — Árvíztűrő tükörfúrógép</p>
<p class="rendszer">system-ui — Árvíztűrő tükörfúrógép</p>
<p class="kezi">cursive — Árvíztűrő tükörfúrógép</p>

p { font-size: 18px; margin: 6px 0; }

.serif    { font-family: serif; }
.sans     { font-family: sans-serif; }
.mono     { font-family: monospace; }
.rendszer { font-family: system-ui; }
.kezi     { font-family: cursive; }

<p><strong>em egységgel:</strong></p>
<ul class="em">
  <li>Első szint
    <ul class="em">
      <li>Második szint
        <ul class="em">
          <li>Harmadik szint</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

<p><strong>rem egységgel:</strong></p>
<ul class="rem">
  <li>Első szint
    <ul class="rem">
      <li>Második szint
        <ul class="rem">
          <li>Harmadik szint</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

html {
  font-size: 16px;
}

.em {
  font-size: 1.3em;
}

.rem {
  font-size: 1.3rem;
}

<p class="w300">300 — vékony</p>
<p class="w400">400 — normál</p>
<p class="w600">600 — félkövér</p>
<p class="w700">700 — kövér</p>
<p class="w900">900 — nagyon kövér</p>

<p class="dolt">Dőlt betű</p>

<h3 class="vekony-cim">Címsor normál vastagsággal</h3>
<strong class="normal">Strong, félkövérség nélkül</strong>

body {
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 18px;
}
p { margin: 3px 0; }

.w300 { font-weight: 300; }
.w400 { font-weight: 400; }
.w600 { font-weight: 600; }
.w700 { font-weight: 700; }
.w900 { font-weight: 900; }

.dolt { font-style: italic; }

.vekony-cim { font-weight: 400; }
.normal     { font-weight: normal; }

<p class="szuk"><strong>1.1</strong> — A weboldalak
szövegét többnyire képernyőn olvassák, ahol a
szem gyorsabban fárad, mint papíron. A megfelelő
sortáv segít, hogy a szem könnyen megtalálja a
következő sor elejét.</p>

<p class="jo"><strong>1.6</strong> — A weboldalak
szövegét többnyire képernyőn olvassák, ahol a
szem gyorsabban fárad, mint papíron. A megfelelő
sortáv segít, hogy a szem könnyen megtalálja a
következő sor elejét.</p>

<p class="tag"><strong>2.4</strong> — A weboldalak
szövegét többnyire képernyőn olvassák, ahol a
szem gyorsabban fárad, mint papíron. A megfelelő
sortáv segít, hogy a szem könnyen megtalálja a
következő sor elejét.</p>

p {
  font-size: 15px;
  margin: 0 0 14px;
}

.szuk { line-height: 1.1; }
.jo   { line-height: 1.6; }
.tag  { line-height: 2.4; }

<p class="balra">Balra igazítva (alapértelmezés)</p>
<p class="kozepre">Középre igazítva</p>
<p class="jobbra">Jobbra igazítva</p>

<p>Ár: <span class="regi">4990 Ft</span> 3490 Ft</p>
<p class="hullam">Hullámos aláhúzás</p>

<p class="felirat">Új termékek</p>
<p class="nagy">minden szó nagybetűvel kezdődik</p>

p { margin: 5px 0; }

.balra   { text-align: left; }
.kozepre { text-align: center; }
.jobbra  { text-align: right; }

.regi {
  text-decoration: line-through;
  color: #9ca3af;
}
.hullam {
  text-decoration: underline wavy #be123c;
}

.felirat {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 13px;
  font-weight: bold;
  color: #be123c;
}
.nagy {
  text-transform: capitalize;
}

<h1>A kovászos kenyér titka</h1>
<p class="lead">Három hozzávaló, egy kis türelem,
és a konyhádban olyan illat lesz, mint egy
pékségben.</p>
<h2>Miért kovász?</h2>
<p>A kovász élő kultúra: vadélesztőből és
tejsavbaktériumokból áll. Lassabban kel, mint
a bolti élesztő, de cserébe mélyebb ízt és
tovább friss kenyeret ad.</p>

<h1>A kovászos kenyér titka</h1>
<p class="lead">Három hozzávaló, egy kis türelem,
és a konyhádban olyan illat lesz, mint egy
pékségben.</p>
<h2>Miért kovász?</h2>
<p>A kovász élő kultúra: vadélesztőből és
tejsavbaktériumokból áll. Lassabban kel, mint
a bolti élesztő, de cserébe mélyebb ízt és
tovább friss kenyeret ad.</p>

body {
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  color: #3a2f35;
  background-color: #fdfaf6;
  margin: 16px;
}

h1, h2 {
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.2;
  color: #7f1d1d;
}
h1 { font-size: 2rem; }
h2 { font-size: 1.35rem; }

.lead {
  font-size: 1.2rem;
  color: #6b5a62;
}