{"id":2158,"date":"2026-04-12T08:53:42","date_gmt":"2026-04-12T08:53:42","guid":{"rendered":"https:\/\/mytekataloget.dk\/?page_id=2158"},"modified":"2026-04-12T17:12:06","modified_gmt":"2026-04-12T17:12:06","slug":"eksperimentet","status":"publish","type":"page","link":"https:\/\/mytekataloget.dk\/?page_id=2158","title":{"rendered":"Eksperimentet"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\">Inline styling<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Den f\u00f8rste metode er <em>inline styling<\/em>. Det betyder at man tilf\u00f8jer CSS-koden direkte inde i HTML-filen ved hj\u00e6lp af attributten . Det vil se s\u00e5dan her ud:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;h1 style = \"color: blue; font-size: 20px;\"&gt;Denne titel bliver farvet bl\u00e5 ved hj\u00e6lp af inline styling!&lt;\/h1&gt;<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">P\u00e5 ovenst\u00e5ende kode tilf\u00f8jede vi en overskrift med -tagget. Inde i \u00e5bningstagget tilf\u00f8jede vi attributten som vi satte til at v\u00e6re lig med teksten \u201ccolor: blue; font-size: 20px;\u201d. Denne tilf\u00f8jelse medf\u00f8rer, at overskriftens farve bliver bl\u00e5 og overskriftens st\u00f8rrelse bliver 20 pixels. Selve koden som bestemmer hvordan elementet styles skal st\u00e5 mellem to anf\u00f8rselstegn (\u201d \u201c).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><a><\/a>Internt style sheet<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Den anden metode er styling via et internt style sheet. Det betyder at man tilf\u00f8jer hele sin CSS-kode inde imellem -tagget i sin HTML-fil ved hj\u00e6lp at tagget . Det vil se s\u00e5dan her ud:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;head&gt;\n  &lt;style&gt;\n    p {\n     color: green;\n    } \n  &lt;\/style&gt;\n&lt;\/head&gt;<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">I ovenst\u00e5ende eksempel er -tagget blevet indsat inde i -tagget. Koden som er inde i skifter farven p\u00e5 alle paragraf-tekster til gr\u00f8n. L\u00e6g m\u00e6rke til, at \u201cp\u201d specificerer at CSS-koden g\u00e6lder for alle -elementer. P\u00e5 den m\u00e5de kan man specificere hvilke elementer der skal styles. Imellem de to turborgklammer skal selve koden som bestemmer hvordan elementet skal styles angives.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><a><\/a>Eksternt style sheet<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Den sidste metode er styling via et eksternt style sheet. Denne metode anbefales her p\u00e5 siden, da det er den mest overskuelige af de tre valgmuligheder. Derudover overskrider de to andre metoder et eksternt style sheet, s\u00e5 hvis man hurtigt vil \u00e6ndre p\u00e5 et element som allerede er \u00e6ndret, s\u00e5 kan man altid overskride den tidligere kode med de andre metoder. Men det er selvf\u00f8lgelig op til en selv hvilken metode man vil benytte.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I denne metode skriver man alle sine CSS-koder i en ekstern fil, som har filformatet \u201c.css\u201d, separat fra HTML-filen. De to filer skal kobles sammen ved hj\u00e6lp af et tag som s\u00e6ttes ind imellem -tagget i HTML-filen. Tagget kan ses p\u00e5 nedenst\u00e5ende kodestykke:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;head&gt;\n  &lt;link href = \"filnavn.css\" type = \"text\/css\" rel = \"stylesheet\"&gt;\n&lt;\/head&gt;<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">I kodestykket indtastes et -tag. L\u00e6g m\u00e6rke til at -tagget ikke har noget luknings-tag. Inde i tagget er der tilf\u00f8jet tre attributter. Den f\u00f8rste attribut hedder og den skal v\u00e6re lig med filnavnet p\u00e5 din CSS-fil og slutte med \u201c.css\u201d. Den n\u00e6ste attribut hedder og specificerer den type dokument som du forbinder til. Den skal v\u00e6re lig med \u201ctext\/css\u201d. Den sidste attribut hedder og den beskriver forholdet mellem HTML- og CSS-filen. den skal v\u00e6re lig med \u201cstylesheet\u201d. N\u00e5r alt det er indtastet, s\u00e5 har du forbundet din HTML- og CSS-fil.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Koden i den eksterne CSS-fil er opbygget s\u00e5ledes:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">h1 {\n  font-size: 20px;\n  color: yellow;\n}\n\np {\n  color: green; \n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">I det ovenst\u00e5ende kodestykke styles -tagget til at have en tekstst\u00f8rrelse p\u00e5 20 pixels og en gul tekstfarve. Derudover styles -tagget til at have en gr\u00f8n tekstfarve. Imellem de to turborgklammer skal selve koden som bestemmer hvordan elementet skal styles angives.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><a href=\"https:\/\/simplecode.dk\/css\/udvaelg-elementer\/\"><strong>Udv\u00e6lg elementer: <\/strong>V\u00e6lg hvilke HTML-elementer som vil style i CSS<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/simplecode.dk\/css\/farver\/\"><strong>Farver: <\/strong>L\u00e6r hvordan man angiver farver p\u00e5 de forskellige elementer, samt hvordan man v\u00e6lger de rigtige farver<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/simplecode.dk\/css\/typografi\/\"><strong>Typografi: <\/strong>Juster teksternes st\u00f8rrelse, type, v\u00e6gt, position, linjeh\u00f8jde, formatering og afstand<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/simplecode.dk\/css\/boks-modellen\/\"><strong>Boks-modellen: <\/strong>L\u00e6r hvordan boks-modellen er bygget op samt hvordan man justerer de forskellige dimensioner i modellen<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/simplecode.dk\/css\/elementplacering\/\"><strong>Elementplacering: <\/strong>Juster elementernes placering p\u00e5 siden, samt hvordan de skal blive vist og hvordan de skal interagere med andre elementer<\/a><\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-preformatted\">.Tekst_1 {\n  line-height: 1.2;\n}\n\n.Tekst_2 {\n  line-height: 30px;\n}\n\n\n<\/pre>\n\n\n\n<h1 class=\"wp-block-heading\">Udv\u00e6lg elementer i CSS<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Indhold p\u00e5 denne side<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/simplecode.dk\/css\/udvaelg-elementer\/#Udvaelg_elementer_i_CSS\">Udv\u00e6lg elementer i CSS<\/a>\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/simplecode.dk\/css\/udvaelg-elementer\/#Udvaelg_tag\">Udv\u00e6lg tag<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/simplecode.dk\/css\/udvaelg-elementer\/#Udvaelg_class\">Udv\u00e6lg class<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/simplecode.dk\/css\/udvaelg-elementer\/#Udvaelg_id\">Udv\u00e6lg id<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">N\u00e5r man styler sin hjemmeside med inline styling, s\u00e5 skriver man CSS-koden inde i det element man vil style, s\u00e5 med inline styling er det meget nemt at v\u00e6lge hvilke elementer der skal styles. N\u00e5r man derimod styler elementer ved hj\u00e6lp af et internt eller eksternt style sheet, s\u00e5 skal man angive, hvilke elementer p\u00e5 hjemmesiden der skal styles. Heldigvis er det ikke s\u00e5 sv\u00e6rt. Man skal bare vide hvilke metoder der kan benyttes til at udv\u00e6lge de elementer der skal styles. Disse metoder vil blive gennemg\u00e5et her.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><a><\/a>Udv\u00e6lg tag<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">I CSS kan man angive hvilke slags elementer som man vil style ved at benytte tag-navnet, som er navnet mellem taggets \u00e5bnings- og lukningsklamme (&lt; &gt;).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Hvis man f.eks. ville \u00e6ndre p\u00e5 alle paragrafelementerne, s\u00e5 skal man skrive f\u00f8lgende:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">p {\n  color: green;\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">I ovenst\u00e5ende eksempel er \u201cp\u201d angivet, da det er tag-navnet for paragraffer. Efter \u201cp\u201d er der benyttet to tuborgklammer. Imellem de to turborgklammer skal koden som styler elementet angives. I det her tilf\u00e6lde er det angivet, at tekstfarven skal \u00e6ndres til gr\u00f8n. I stedet for \u201cp\u201d kan tagget ogs\u00e5 v\u00e6re for alle andre slags elementer, som f.eks. \u201ch1\u201d, \u201cbody\u201d og \u201ca\u201d.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Det upraktiske ved at benytte tag-navne n\u00e5r man skal angive hvad der skal styles er, at det vil g\u00e6lde for alle af den slags tags p\u00e5 hjemmesiden. Hvis man vil v\u00e6re mere specifik med hvad der skal styles, s\u00e5 skal man benytte et -navn eller et -navn.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><a><\/a>Udv\u00e6lg <em>class<\/em><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Med attributten er det muligt at tilegne hvert HTML-element en -v\u00e6rdi, som kan v\u00e6re et hvilket som helst navn der klassificerer elementet. overskrider tags, s\u00e5 derfor er det en god ide at benytte tags, hvis man skal angive styling der g\u00e6lder for alle elementer af samme slags. Hvis man skal v\u00e6re mere specifik med hvilke elementer der skal styles, s\u00e5 skal man benytte . I HTML-dokumentet kan man tilegne et element en -v\u00e6rdi p\u00e5 f\u00f8lgende m\u00e5de:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;h1 class = \"Overskrift\"&gt;Dette er en overskrift&lt;\/h1&gt;<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Dette -element har f\u00e5et -v\u00e6rdien \u201cOverskrift\u201d. Bem\u00e6rk at andre elementer ogs\u00e5 kan f\u00e5 den samme overskrift. N\u00e5r man skal style elementet med den -v\u00e6rdi s\u00e5 skal man s\u00e6tte et punktum foran og angive -v\u00e6rdien, som vist her:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">.Overskrift {\n  color: green;\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Ovenst\u00e5ende kodestykke vil resultere i, at alle elementer, hvis class er lig med \u201cOverskrift\u201d vil f\u00e5 en gr\u00f8n tekstfarve.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Det er ogs\u00e5 muligt at lave flere -v\u00e6rdier for det samme element ved at separere dem med et mellemrum. Det betyder, at man ikke beh\u00f8ver at lave en ny for hvert enkelt element.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;h1 class = \"Overskrift Forside\"&gt;Dette er en overskrift&lt;\/h1&gt;<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Nu har -elementet f\u00e5et -v\u00e6rdierne \u201cOverskrift\u201d og \u201cForside\u201d. Det betyder at n\u00e5r vi refererer til en som enten hedder \u201cOverskrift\u201d eller \u201cForside\u201d s\u00e5 vil det g\u00e6lde for elementet.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">.Overskrift {\n  color: green;\n}\n\n.Forside{\nbackground-color: red;\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Ovenst\u00e5ende kodestykke resulterer i at -elementet b\u00e5de har f\u00e5et en r\u00f8d baggrundsfarve og en gr\u00f8n skriftfarve.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><a><\/a>Udv\u00e6lg <em>id<\/em><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Med attributten er det muligt at tilegne hvert HTML-element en -v\u00e6rdi, som kan v\u00e6re et hvilket som helst navn der kan bruges til at identificere elementet. Bem\u00e6rk at forskellen p\u00e5 og er, at er unikt, hvilket betyder, at det kun kan h\u00f8re til \u00e9t element. overskrider , s\u00e5 derfor er det en god ide holde sig til at benytte og kun benytte n\u00e5r det er n\u00f8dvendigt og n\u00e5r det kun er \u00e9t element som skal styles p\u00e5 \u00e9n bestemt m\u00e5de. Man kan tilegne et element en -v\u00e6rdi p\u00e5 f\u00f8lgende m\u00e5de:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;p id = \"Forsidetekst\"&gt;Dette er en paragraf&lt;\/p&gt;<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Dette paragrafelement har f\u00e5et id\u2019et \u201cForsidetekst\u201d. For at angive hvilket der skal styles, s\u00e5 skal man s\u00e6tte et nummertegn (#) foran -navnet. Det vil se s\u00e5dan her ud:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">#Forsidetekst {\n  font-size: 16px;\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Ovenst\u00e5ende kodestykke styler paragraf-elementet, s\u00e5 skriftst\u00f8rrelsen bliver 16 pixels.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">.komm {<br> &#8220;has-text-align-right&#8221;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"> line-height: 1;<br>}<\/p>\n\n\n\n<p class=\"has-text-align-right wp-block-paragraph\"><em><sup>&#8220;Noget g\u00e5r tabt, som skal kompenseres gennem hele livet, <br> jeg ved ikke rigtig hvad jeg mister, men s\u00e5 kan jeg rage til mig! <br> Alt jeg kan f\u00e5 fat i, s\u00e5 meget jeg kan. Det giver kort lindring. <br> Jeg opdager de tomme v\u00e6rdier jeg g\u00e5r efter. S\u00e5 er det for sent, s\u00e5 kommer skuffelsen. <br> Jeg bebrejder mig selv, bortforklarer, fral\u00e6gger mig skyld, skuffelsen tynger alligevel. <br> Spildt tid, spildte kr\u00e6fter. Spildt liv! <br> Jeg omdefinerer v\u00e6rdierne og s\u00e6tter mig selv h\u00f8jere: <br> Rigdom er roden og midlet til magt! <br> Magt gir respekt og agtelse, men i hvis \u00f8jne? <br> I mine egne \u00f8jne! Lige s\u00e5 sygt?&#8221;<\/sup><\/em><\/p>\n\n\n\n<p class=\"has-text-align-right wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Inline styling Den f\u00f8rste metode er inline styling. Det betyder at man tilf\u00f8jer CSS-koden direkte inde i HTML-filen ved hj\u00e6lp [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":629,"menu_order":8,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-2158","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mytekataloget.dk\/index.php?rest_route=\/wp\/v2\/pages\/2158","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mytekataloget.dk\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mytekataloget.dk\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mytekataloget.dk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mytekataloget.dk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2158"}],"version-history":[{"count":4,"href":"https:\/\/mytekataloget.dk\/index.php?rest_route=\/wp\/v2\/pages\/2158\/revisions"}],"predecessor-version":[{"id":2167,"href":"https:\/\/mytekataloget.dk\/index.php?rest_route=\/wp\/v2\/pages\/2158\/revisions\/2167"}],"up":[{"embeddable":true,"href":"https:\/\/mytekataloget.dk\/index.php?rest_route=\/wp\/v2\/pages\/629"}],"wp:attachment":[{"href":"https:\/\/mytekataloget.dk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2158"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}