Gå til innhold

CSS (mangler kode for tekst)


Anbefalte innlegg

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.

css.jpg

Lenke til kommentar
Videoannonse
Annonse

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;
}

 

Skjermbilde.PNG

Endret av Dan-Levi
  • Liker 1
Lenke til kommentar

Bli med i samtalen

Du kan publisere innhold nå og registrere deg senere. Hvis du har en konto, logg inn nå for å poste med kontoen din.

Gjest
Skriv svar til emnet...

×   Du har limt inn tekst med formatering.   Lim inn uten formatering i stedet

  Du kan kun bruke opp til 75 smilefjes.

×   Lenken din har blitt bygget inn på siden automatisk.   Vis som en ordinær lenke i stedet

×   Tidligere tekst har blitt gjenopprettet.   Tøm tekstverktøy

×   Du kan ikke lime inn bilder direkte. Last opp eller legg inn bilder fra URL.

Laster...
  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...