CSS

Akronimo de "Cascading Style Sheets". En Esperanto signifas "laŭtemaj stilfolioj". CSS permesas al ni ŝanĝi la aspekton de retpaĝo.

Bazika stilo

Ĉiu HTML elemento povas havi sian propran stilon kaj oni modifas ĝin per atributoj: tipografioj, la koloroj de la teksto, la fono, la ligiloj, ktp. Jen ekzemplo de atributoj por la elemento "body":

<style>
body {
  margin: 1em auto;
  max-width: 42em;
  font-size: 1.5rem;
  font-family: sans-serif;
  background: #eff0d1;
  color: #3b3c36;
}
</style>

Aldonu stilon al index.html

Por plibonigi nian ekobitan retpaĝon kaj doni al ĝi alian stilon, oni povas aldoni tiujn liniojn al la elemento "head" de nia dosiero nomita "index.html":

<!DOCTYPE html>
<html lang="eo">

<head>
<title>Titolo de la paĝo</title>

<style>
body {
  margin: 1em auto;
  max-width: 42em;
  font-size: 1.5rem;
  font-family: sans-serif;
  background: #eff0d1;
  color: #3b3c36;
}
</style>

</head>

<body>
<h1>Tio estas kapo</h1>
<p>Tio ĉi estas paragrafo.</p>
</body>

</html>

Kreu apartan stilfolion

Se la stilo kreskas estas utila movi ĝin al sia propra dosiero. Por fari tion oni devas krei stilfolion.

En via komputilo, malfermu tekstan programaron kiel Pluma aŭ Geddit.
Eltondu kaj algluu la texton de la bazika stilo en la teksta programaro.
Konservu la dosieron kiel: stilo.css

Rilatu dosierojn

Por rilati nia HTML paĝo (index.html) kun nia CSS aspekto (stilo.css), oni devas aldoni tiu linio en la "head" elemento:

<link rel="stylesheet" href="stilo.css">

Do nun, oni povas forigi la etikedo "style" en nia "index.html" dosiero, kiu aspektas tiel:

<!DOCTYPE html>
<html lang="eo">

<head>
<title>Titolo de la paĝo</title>
<link rel="stylesheet" href="stilo.css">
</head>

<body>
<h1>Tio estas kapo</h1>
<p>Tio ĉi estas paragrafo.</p>
</body>

</html>

Vidu la resulton!

Iru al la dosiero "index.html".
Klaku dekstran butonon en la dosiero kaj elektu malfermi per via retumilo.

Malkovru Markdown

Markdown estas alia marklingvo kaj ĝi estas pli simpla ol HTML.

Enkonduko al Markdown