CSS (mangler kode for tekst)

[akura]

Har et stildokument (CSS) hvor jeg ønsker å legge inn en kode som definerer teksten i et html-dokument. Altså fonttype, farge og størrelse på en webside.

 

Noen vet hvordan denne koden blir?

 

Vedlegget viser det jeg bruker på lenkene, men mangler altså koden for tekst ellers.

[Dan-Levi]

Hei,

Du må definere stilene for de andre html elementene. 

paragraf er for eksempel slik:

p {
  color:red;
}

Eller du kan gi elementene en id eller klasse. Id er slik:

<p id="first-paragraph">Har et stildokument (CSS) hvor jeg ønsker å legge inn en kode som definerer teksten i et html-dokument. Altså fonttype, farge og størrelse på en webside.</p>

For id definerer du stilen med firkant (hash) symbolet:

#first-paragraph {
  color:red;
}

Klasse er med punktum foran, slik:

<p class="first-paragraph">Har et stildokument (CSS) hvor jeg ønsker å legge inn en kode som definerer teksten i et html-dokument. Altså fonttype, farge og størrelse på en webside.</p>

og i stilarket:

.first-paragraph {
  color:red;
}

 

Forskjellen på id og klasse er at id er unikt, kan kun brukes en gang, er for html elementer som det bare er ett av, klasse kan være flere elementer.

 

Et eksempel er at du har 2 lister som er unike, men flere elementer i listene som er like.

HTML

<ul id="first-list">
  <li class="list-item-blue">1</li>
  <li class="list-item-red">2</li>
  <li class="list-item-blue">3</li>
  <li class="list-item-blue">4</li>
</ul>
<ul id="second-list">
  <li class="list-item-red">1</li>
  <li class="list-item-blue">2</li>
  <li class="list-item-red">3</li>
  <li class="list-item-red">4</li>
</ul>

 CSS

#first-list {
  border: 1px solid red;
}
#second-list {
  border: 1px solid blue;
}

.list-item-blue {
  color:blue;
}

.list-item-red {
  color:red;
}

 

Endret 19. oktober 2020 av Dan-Levi

[akura]

Hallo,

Helt supert!!! Dette her har du tydeligvis stålkontroll på.

Har endel huller i kunnskapen min rundt html, men nå skal jeg sikkert klare å få løst problemet.

Veldig takknemlig for svar. Takker så mye for hjelp.