HTML & CSS Cheatsheat

Her er en oversigt over basale elementer og syntaks til HTML og CSS.

HTML elementer

<h1> ... <h8> Header - Bruges til at betegne over og underoverskrifter.
Eksempel:
<h1>Overskrift</h1>

Overskrift

<p> Paragraf - Til almindelig tekst. Elementet giver margener oven over og nedenunder paragraf elementet.
Eksempel:
<p>Paragraftekst 1</p>
<p>Paragraftekst 2<br />
Paragraftekst 2's anden linje</p>

Paragraftekst 1

Paragraftekst 2
Paragraftekst 2's anden linje

<b>, <i>, <u>

Inline skrift-mutatorer

Eksempel:
<b>Fed skrift (Bold)</b>
<i>Skråskrift (Italic)</i>
<u>Understreget skrift (Underlined)</u>
Fed skrift (Bold) Skråskrift (Italic) Understreget skrift (Underlined)
<a>, <a href="{url}"> Anker element - bruges til at omdanne indre tekst til et link. Tilføj atributten href (hypertekst reference) for at beskrive linkets destination.
Eksempel:
<a href="http://killjoy.dk/">link til killjoy.dk</a>
link til killjoy.dk
<img>, <img src="{url}" /> Billedtag - bruges til at indsætte et billede som element. Tilføj atributten src (source) for at beskrive billedfilens placering.
Eksempel:
<img src="http://killjoy.dk/Content/h130/princesses.jpg" />

CSS Syntaks

selector {
  attribut : attributværdi ;
  attribut : attributværdi ;
}
Standardblok i css. Selector beskriver, hvordan elementer udvælges til at blive påvirket af det efterfølgene attributsæt. sæt f.eks. selector til at være h1, hvis du vil tilknytte css-styling til alle <h1>-tags i dokumentet.

Selector syntaks

  tagnavn Denne selector rammer alle tags af typen <tagnavn>.
  Eksempel:
p {
  font-size : 10px ;
}
Sætter skriftstørelsen på tekst i alle <p>-tags i hele dokumentet til at være 10 pixels.
  selector , selector Komma (,) adskiller flere selectors, som skal have de samme attributter tilknyttet.
  Eksempel:
a, h2 {
  color : blue ;
}
Sætter skriftfarven på tekst i alle <a>-tags og <h2>-tags i hele dokumentet til at være blå.
  #idværdi Havelåge (#) bruges til at markere, at der er tale om et elemnt-id i stedet for tag-navn. Denne selector rammer alle elementer, der har sin id-attribut sat til idværdi.
  Eksempel:
#menu {
  font-weight : bold ;
}
Forudsæt at dokumentet har et element <p id="menu">. Denne CSS-blok gør alt tekst i elementet med id sat til menu fed.