{"id":22,"date":"2019-03-29T14:05:42","date_gmt":"2019-03-29T14:05:42","guid":{"rendered":"https:\/\/html.dk\/?p=22"},"modified":"2019-04-10T06:43:05","modified_gmt":"2019-04-10T06:43:05","slug":"css","status":"publish","type":"post","link":"https:\/\/html.dk\/tutorials\/css\/","title":{"rendered":"Den ultimative guide til CSS"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 ez-toc-wrap-right counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Indhold<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-69ee32bbd0dee\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-69ee32bbd0dee\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/html.dk\/tutorials\/css\/#Hvilke_programmer_skal_jeg_bruge\" >Hvilke programmer skal jeg bruge?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/html.dk\/tutorials\/css\/#Hvad_er_forskellen_paa_CSS_og_HTML\" >Hvad er forskellen p\u00e5 CSS og HTML?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/html.dk\/tutorials\/css\/#Hvorfor_er_CSS_smart\" >Hvorfor er CSS smart?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/html.dk\/tutorials\/css\/#Hvordan_fungerer_CSS\" >Hvordan fungerer CSS?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/html.dk\/tutorials\/css\/#3_metoder_til_at_bruge_CSS_i_et_HTML_dokument\" >3 metoder til at bruge CSS i et HTML dokument<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/html.dk\/tutorials\/css\/#Metode_1_Atributten_style\" >Metode 1: Atributten style<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/html.dk\/tutorials\/css\/#Metode_2_Elementet_style\" >Metode 2: Elementet style<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/html.dk\/tutorials\/css\/#Metode_3_Linke_til_et_stylesheet\" >Metode 3: Linke til et stylesheet<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/html.dk\/tutorials\/css\/#Farver_og_baggrunde\" >Farver og baggrunde<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/html.dk\/tutorials\/css\/#Color\" >Color<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/html.dk\/tutorials\/css\/#background-color_og_background-image\" >background-color og background-image<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/html.dk\/tutorials\/css\/#Fonte\" >Fonte<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/html.dk\/tutorials\/css\/#Tekst_styling\" >Tekst styling<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/html.dk\/tutorials\/css\/#Link_styling\" >Link styling<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/html.dk\/tutorials\/css\/#Pseudo-class_link\" >Pseudo-class :link<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/html.dk\/tutorials\/css\/#Pseudo-class_visited\" >Pseudo-class :visited<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/html.dk\/tutorials\/css\/#Pseudo-class_active\" >Pseudo-class :active<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/html.dk\/tutorials\/css\/#Pseudo-class_hover\" >Pseudo-class :hover<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/html.dk\/tutorials\/css\/#Selektion_af_elementer_class_og_id\" >Selektion af elementer (class og id)<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/html.dk\/tutorials\/css\/#Class\" >Class<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/html.dk\/tutorials\/css\/#Id\" >Id<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/html.dk\/tutorials\/css\/#Begraensning_af_klasse\" >Begr\u00e6nsning af klasse<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/html.dk\/tutorials\/css\/#Layout_med_div_elementet\" >Layout med div elementet<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-24\" href=\"https:\/\/html.dk\/tutorials\/css\/#Boksmodellen\" >Boksmodellen<\/a><\/li><\/ul><\/nav><\/div>\n\n<p> <br>CSS, som st\u00e5r for Cascading Style Sheets, giver dig et hav af sp\u00e6ndende muligheder, og kan potentielt spare dig for en masse arbejde, n\u00e5r det kommer til designet p\u00e5 din hjemmeside. CSS intet mindre end uundv\u00e6rlig for enhver der arbejder med webdesign.<\/p>\n\n\n\n<p>Derfor skal du selvf\u00f8lgelig ogs\u00e5 l\u00e6re det, og derfor har vi skrevet denne ultimative guide til at l\u00e6re CSS.<\/p>\n\n\n\n<p>M\u00e5let med denne guide er, at give dig en let, men ogs\u00e5 grundig indf\u00f8rsel i hvordan du kommer igang med at bruge CSS p\u00e5 din egen hjemmeside. <\/p>\n\n\n\n<p>Guiden starter helt fra bunden, men kr\u00e6ver dog, at du allerede kender lidt til HTML. <\/p>\n\n\n\n<p>Derfor kan vi anbefale dig, at du l\u00e6ser vores <a href=\"https:\/\/html.dk\/tutorials\/html\/\">ultimative guide til HTML<\/a>, inden du g\u00e5r igang, hvis du ikke allerede har godt styr p\u00e5 HTML.<\/p>\n\n\n\n<p>N\u00e5r du nu skal i gang med guiden, s\u00e5 er det vigtigt at huske p\u00e5, at du ogs\u00e5 selv skal pr\u00f8ve tingene af. <\/p>\n\n\n\n<p>Hvis du blot l\u00e6ser guiden uden at pr\u00f8ve tingene af i praksis, s\u00e5 l\u00e6rer du ikke noget. S\u00e5 fat tasterne og pr\u00f8ve tingene af selv!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Hvilke_programmer_skal_jeg_bruge\"><\/span> Hvilke programmer skal jeg bruge?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Der skal faktisk ikke s\u00e5 meget til at g\u00e5 i krig med CSS. Lige som med HTML, s\u00e5 anbefaler vi, at du bruger programmet <a href=\"https:\/\/atom.io\/\">ATOM<\/a>, s\u00e5 er utrolig nemt at bruge. Det virker desuden b\u00e5de til Mac og Windows. <\/p>\n\n\n<h2><span class=\"ez-toc-section\" id=\"Hvad_er_forskellen_paa_CSS_og_HTML\"><\/span>Hvad er forskellen p\u00e5 CSS og HTML?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Det korte svar er at HTML er et struktur-sprog, og CSS er et layout-sprog.<\/p>\n<p>Det kan godt lyde lidt forvirrende, hvis man aldrig har t\u00e6nkt over det f\u00f8r, men pr\u00f8v alligevel at l\u00e6se lidt videre.<\/p>\n<p>Oprindeligt &#8211; da Internettet blev opfundet &#8211; var HTML et rent struktursprog. Det vil sige at man med HTML kunne strukturere en tekst ved at sige &#8220;Dette er en overskrift&#8221;, &#8220;Dette er et tekstafsnit&#8221;, eller &#8220;Dette er en tabel&#8221; &#8211; ved at benytte tags som &lt;h1&gt;, &lt;p&gt; og &lt;table&gt;.<\/p>\n<p>Udviklingen p\u00e5 Internettet gjorde imidlertid, at mange kreative webdesignere hungrede efter muligheder for at tilf\u00f8je layout til deres dokumenter. Browserfabrikanterne (Netscape og Microsoft) fandt derfor p\u00e5 nye tags til HTML, som f.eks. &lt;font&gt;, der jo netop definerer layout &#8211; og ikke struktur.<\/p>\n<p>Udviklingen bet\u00f8d alts\u00e5, at HTML i st\u00f8re og st\u00f8rre udstr\u00e6kning blev benyttet til layout, selvom det aldrig havde v\u00e6ret meningen. CSS blev opfundet for at give webdesignere flere muligheder for layout, og samtidig beholde HTML som et struktursprog.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Hvorfor_er_CSS_smart\"><\/span>Hvorfor er CSS smart?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>CSS har rigtig mange fordele. Vi kan f.eks. n\u00e6vne:<\/p>\n<ul>\n<li>Du kan vedligeholde styling p\u00e5 mange dokumenter centralt fra \u00e9t stylesheet<\/li>\n<li>Du kan styre layout mere pr\u00e6cist<\/li>\n<li>Pr\u00e6cisere layout til forskellige medier (sk\u00e6rm, print. m.fl.)<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Hvordan_fungerer_CSS\"><\/span>Hvordan fungerer CSS?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>CSS fungerer p\u00e5 den m\u00e5de, at du med CSS kan \u00e6ndre p\u00e5 dine HTML elementer. Du kan f.eks. \u00e6ndre kant, baggrund, farve, h\u00f8jde, bredde og meget mere.<\/p>\n<p>Du g\u00f8r det ved at f\u00f8rst at angive en selektor, som siger hvilket element, du gerne vil ramme. Herefter angiver du en egenskab, som er den egenskab p\u00e5 elementet du vil \u00e6ndre p\u00e5. Til sidst angiver du en v\u00e6rdi p\u00e5 den egenskab.<\/p>\n<p>Det hele s\u00e6ttes sammen til f\u00f8lgende syntaks.<\/p>\n<p>Selektor {egenskab:v\u00e6rdi;}<\/p>\n<p>S\u00e5 hvis jeg f.eks. vil lave om p\u00e5 baggrundsfarven p\u00e5 min side kunne jeg lave f\u00f8lgende deklaration:<\/p>\n<p>body {background-color: #EEE;}<\/p>\n<p>S\u00e5 det er egentlig ret simpelt. udv\u00e6lg dit html element, angiv hvad du vil \u00e6ndre p\u00e5 og v\u00e6lg en v\u00e6rdi for dette, f.eks. en farvekode eller et antal pixels.<\/p>\n<p>Men hvor skal man s\u00e5 lige skrive det her? Jo der er 3 forskellige m\u00e5der at angive CSS p\u00e5.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"3_metoder_til_at_bruge_CSS_i_et_HTML_dokument\"><\/span>3 metoder til at bruge CSS i et HTML dokument<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Metode_1_Atributten_style\"><\/span>Metode 1: Atributten style<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Den f\u00f8rste metode er ved ar bruge atributten style. Dette er en attribut som du p\u00e5f\u00f8re dit html element, og heri skriver du din CSS. F.eks.<\/p>\n<p>&lt;body style=&#8221;background-color: #FF0000;&#8221;&gt;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Metode_2_Elementet_style\"><\/span>Metode 2: Elementet style<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Du kan ogs\u00e5 v\u00e6lge at bruge &lt;style&gt; elementet og skrive din CSS seperat heri. Med style skal du ikke angive en Selektor, da det giver sig selv, nu hvor du s\u00e6tter style-atributten direkte p\u00e5 elementet, men nu hvor vi bruger elementet style, skal vi bruge en selektor til at bestemmet det element vi vil ramme.<\/p>\n\n\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">&lt;html&gt;\n&lt;head&gt;\n&lt;title&gt;Eksempel&lt;\/title&gt;\n&lt;style type=&quot;text\/css&quot;&gt;\n\tbody {background-color: #FF0000;}\n&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n<\/pre>\n\n\n<h3><span class=\"ez-toc-section\" id=\"Metode_3_Linke_til_et_stylesheet\"><\/span>Metode 3: Linke til et stylesheet<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Dette er lidt lige som ovenfor, men her g\u00f8r vi istedet det at vi laver en fil kaldet style.css (Den kan hedde det hele, bare den ender p\u00e5 .css), og heri angiver vi vores CSS deklarationer. Denne fil inkluderer vi s\u00e5 p\u00e5 de sider, som skal bruge vores CSS. Dette er den klart bedste m\u00e5de at anvende CSS, da du kan styre din CSS fra \u00e9t centralt sted. Du kan placere CSS filen hvor du vil, men i eksemplet herunder har vi placeret den i roden af vores mappe.<\/p>\n<p>Indholdet i vores .css fil ser s\u00e5ledes ud:<\/p>\n\n\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">body {background-color: #FF0000;}<\/pre>\n\n\n\n<p>Filen skal s\u00e5 inkluderes p\u00e5 siden som vist herunder<\/p>\n\n\n\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">&lt;html&gt;\n&lt;head&gt;\n&lt;title&gt;Mit dokument&lt;\/title&gt;\n&lt;link rel=&quot;stylesheet&quot; type=&quot;text\/css&quot; href=&quot;style.css&quot;&gt;\n&lt;\/head&gt;\n&lt;body&gt;<\/pre>\n\n\n\n<p>Linket fort\u00e6ller browseren, at den skal hente layout fra CSS-filen. Som du m\u00e5ske har regnet ud, kan flere HTML-dokumenter alts\u00e5 linke til det samme stylesheet, og dermed &#8220;hente&#8221; sit layout fra den samme fil.&nbsp; <\/p>\n\n\n\n<p>Alene denne mulighed kan spare dig for utroligt meget arbejde. Lad os f.eks. sige at du har et website med 100 HTML-dokumenter &#8211; og at du \u00f8nsker at \u00e6ndre baggrundsfarven p\u00e5 dine sider. Hvis du benytter HTML til at definere baggrundsfarven, m\u00e5 du manuelt sidde og rette 100 filer igennem. Men hvis du benytter CSS, kan du g\u00e5 ind \u00e9t sted og rette baggrundsfarven for alle 100 dokumenter p\u00e5 \u00e9n gang.<\/p>\n\n\n\n<p>Ganske smart ikke?&nbsp;<\/p>\n\n\n\n<p>Pr\u00f8v selv at g\u00f8re dette. Lav en HTML side, inkluder CSS filen og pr\u00f8v at \u00e6ndre baggrundsfarven i denne fil. Sl\u00e5r det igennem p\u00e5 din HTML side?<\/p>\n\n\n<h2><span class=\"ez-toc-section\" id=\"Farver_og_baggrunde\"><\/span>Farver og baggrunde<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Noget af det vigtigste du kan bruge CSS til er at styre baggrunde og farver. Farver giver liv til din hjemmeside og s\u00f8rger for at du igennem hele hjemmesiden kan holde en bestemt stil og design.<\/p>\n<p>I denne sektion kigger vi p\u00e5, hvilke muligheder der findes for baggrunde og farver i CSS. Vi kan desv\u00e6rre ikke komme omkring dem alle, da der er rigtig mange.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Color\"><\/span>Color<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Den allerf\u00f8rste egenskab vi skal kigge p\u00e5 er <strong>color<\/strong>. Som du sikkert kan regne ud bruges color til at definere farver.<\/p>\n<p>Lad os sige at vi gerne vil have alle overskrifter i et dokument til at v\u00e6re m\u00f8rker\u00f8de. Overskrifterne er markeret med elementet &lt;h1&gt;. Derfor knytter vi egenskaben til &lt;h1&gt;:<\/p>\n\n\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">h1 {\n\tcolor: #99FF00;\n}<\/pre>\n\n\n<p>Ovenst\u00e5ende CSS deklaration vil farve teksten p\u00e5 dine overskrifter gr\u00f8n jf. <a href=\"https:\/\/html.dk\/snippets\/farvekoder-i-html\/\">vores hex-farvekodeskema<\/a>.&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"background-color_og_background-image\"><\/span>background-color og background-image<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Som vi allerede har set p\u00e5, kan man s\u00e6tte en baggrund p\u00e5 hele sin side ved at definere background-color p\u00e5 dit body element.&nbsp;<\/p>\n<p>Men man kan faktisk ogs\u00e5 s\u00e6tte en baggrund p\u00e5 n\u00e6ste alle elementer. Herunder har vi f.eks. sat det p\u00e5 vores overskrift ogs\u00e5:<\/p>\n\n\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">body {\n\tbackground-color: #FFCC66;\n}\nh1 {\n\tcolor:#99FF00;\n\tbackground-color: #FC9804;\n}<\/pre>\n\n\n<p>Du kan selvf\u00f8lgelig ogs\u00e5 tilf\u00f8je et baggrunds billede, du skal blot bruge egenskaben background-image:<\/p>\n\n\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">body {\n\tbackground-color: #FFCC66;\n\tbackground-image: url(&quot;baggrundsbillede.jpeg&quot;);\n}\nh1 {\n\tcolor: #990000;\n\tbackground-color: #FC9804;\n}<\/pre>\n\n\n<p>Hvis billedet ikke er stort nok til at fylde hele det omr\u00e5de du \u00f8nsker det skal fylde, kan du evt. gentage billede. Her har du f\u00f8lgende muligheder:<\/p>\n<p><strong>background-repeat: repeat-x<\/strong> = Billedet gentages horisontalt<br><strong>background-repeat: repeat-y<\/strong> = Billedet gentages vertikalt&nbsp;<br><strong>background-repeat: repeat<\/strong> = Billedet gentages b\u00e5de horisontalt og vertikalt&nbsp;<br><strong>background-repeat: no-repeat<\/strong> = Billedet gentages ikke&nbsp;<\/p>\n<p>I eksemplet herunder har vi f.eks. valgt, at vores baggrundsbillede ikke skal gentages:<\/p>\n\n\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">body {\n\tbackground-color: #FFCC66;\n\tbackground-image: url(&quot;baggrundsbillede.jpeg&quot;);\n\tbackground-repeat: no-repeat;\n}\n<\/pre>\n\n\n<p>Et baggrundsbillede kan ogs\u00e5 placeres forskellige steder med egenskaben &#8220;background-position:&#8221;.<\/p>\n<p>Her kan du f.eks. angive at baggrunden skal placeres i \u00f8verste h\u00f8jre hj\u00f8rne eller 100 pixel (px) til h\u00f8jre.<\/p>\n<p>Her er et par eksempler:<\/p>\n<p><strong>background-position: 2cm 2cm<\/strong> = Billedet positioneres 2 centimeter fra venstre og 2 cm nede p\u00e5 siden.&nbsp;<br><strong>background-position: 25% 50%<\/strong> = Billedet positioneres centreret og en fjerdedel nede p\u00e5 siden.<br><strong>background-position: top right<\/strong> = Billedet positioneres \u00f8verst i h\u00f8jre hj\u00f8rne<\/p>\n<p>Indenfor CSS findes der noget der hedder <a href=\"https:\/\/html.dk\/snippets\/font-med-css-shorthand\/\">shorthand<\/a> , hvilket betyder, at du ikke beh\u00f8ver at skrive alle egenskaberne og deres v\u00e6rdi p\u00e5 hver deres linje som herunder<\/p>\n\n\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">background-color: #FFCC66;\nbackground-image: url(&quot;baggrundsbillede.jpeg&quot;);\nbackground-repeat: no-repeat;\nbackground-position: right bottom;\n<\/pre>\n\n\n<p>Istedet kan du blot skrive dem alle under \u00e9n egenskab, nemlig &#8220;background&#8221;.&nbsp;<\/p>\n<p>Du kan s\u00e5ledes lave \u00e9n deklaration der ser s\u00e5ledes ud:<\/p>\n<p>background: [background-color] [background-image] [background-repeat]&nbsp; [background-position]<\/p>\n<p>Hvilket med ovenst\u00e5ende eksempel giver:<\/p>\n\n\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">background: #FFCC66 url(&quot;baggrundsbillede.jpeg&quot;) fixed right bottom;\n<\/pre>\n\n\n<h2><span class=\"ez-toc-section\" id=\"Fonte\"><\/span>Fonte<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Dine tekster skal selvf\u00f8lgelig ogs\u00e5 have et unikt look, og det kan du selvf\u00f8lgelig ogs\u00e5 g\u00f8re med CSS.<\/p>\n<p>Det giver egentlig meget sig selv, s\u00e5 vi tager dem lige hurtigt.<\/p>\n<p><strong>font-style:&nbsp;<\/strong><\/p>\n<p>Her kan du angive dens til teksten skal have. Skal det v\u00e6re skr\u00e5skrift kan du angive &#8220;itallic&#8221;. Husk at du altid selv kan google &#8220;font-style properties&#8221; for at f\u00e5 en samlede liste med v\u00e6rdier til denne egenskab.<\/p>\n<p><strong>font-weight:&nbsp;<\/strong><\/p>\n<p>Her kan du angive om din tekst f.eks. skal st\u00e5 med fed &#8220;bold&#8221; eller med en v\u00e6rdi p\u00e5 tykkelse for 100-600.<\/p>\n<p><strong>font-size:&nbsp;<\/strong><\/p>\n<p>Denne giver vist lidt sig selv, men her kan du mest hvor stor din font skal v\u00e6re. Du kan enten bruge pixels (px) eller em.<\/p>\n<p><strong>font-family:&nbsp;<\/strong><\/p>\n<p>Her kan du angive den skrifttype du \u00f8nsker at anvende. Du kan f.eks. v\u00e6lge &#8220;arial, sans-serif&#8221; eller v\u00e6lge en Google font, f.eks. Open Sans. Her skal du dog huske at <a href=\"https:\/\/www.cssfontstack.com\/Open-Sans\">inkludere fonten i dit head tag<\/a>.&nbsp;<\/p>\n<p>I eksemplet herunder har vi angivet at vores paragraf elementer, alts\u00e5 vores tekst skal st\u00e5 med kursiv (m\u00e5ske ikke helt s\u00e5 hensigtsm\u00e6ssigt), fed, en st\u00f8rrelse p\u00e5 20px og med skrifttypen &#8220;arial, sans-serif&#8221;.<\/p>\n\n\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">p {\n    font-style: italic;\n\tfont-weight: bold;\n\tfont-size: 20px;\n\tfont-family: arial, sans-serif;\n}\n<\/pre>\n\n\n<p>Pr\u00f8v selv at lege lidt med v\u00e6rdierne p\u00e5 de forskellige egenskaber og se, hvordan du kan \u00e6ndre teksten.<\/p>\n<p>Som med s\u00e5 mange andre ting i CSS, kan du ogs\u00e5 skrive font som shorthand:<\/p>\n\n\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">p {\t\n\tfont: italic bold 30px arial, sans-serif\n}\n<\/pre>\n\n\n<p>Denne guide er stadig under udarbejdelse og vi arbejder pt. p\u00e5 at skrive den f\u00e6rdig.<\/p>\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Tekst_styling\"><\/span>Tekst styling<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Lige som med fonten, s\u00e5 findes der en masser m\u00e5de man kan style hele sin tekst p\u00e5. Den nemmeste m\u00e5de er nok at vide et komplet eksempel, hvor vi bruge alle de egenskaber der er. Lad os pr\u00f8ve at style vores paragraf-element:<\/p>\n\n\n\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">p {\n  color: #4CAF50;\t\n  text-align: center;\n  text-transform: uppercase;\n  text-indent: 50px;\n  letter-spacing: 3px;\n  text-decoration: none;\n}\n<\/pre>\n\n\n\n<p>Den f\u00f8rste egenskab kender vi, og den \u00e6ndrer p\u00e5 <strong>farven<\/strong> p\u00e5 vores tekst. Derefter har vi sagt, at vores tekst skal v\u00e6re <strong>centreret<\/strong>. S\u00e5 hvis vi f.eks. har en meget bred side, s\u00e5 vil teksten blive centreret herp\u00e5. Du kan ogs\u00e5 v\u00e6lge left og right som v\u00e6rdi p\u00e5 text-align.<\/p>\n\n\n\n<p>Herefter har vi brugt text-transform til at sige at alle bogstaver skal <strong>s\u00e5 med stort<\/strong>. Her kan man ogs\u00e5 v\u00e6lge lowercase som alternativ. <\/p>\n\n\n\n<p>text-indent angiver en v\u00e6rdi for hvor langt vi vil <strong>indrykke<\/strong> den f\u00f8rste linje i vores paragraf. <\/p>\n\n\n\n<p>letter-spacing er <strong>mellemrummet mellem vores bogstaver<\/strong>. Her er der enstandardv\u00e6rdig, men den kan overskrives til en pixel-v\u00e6rdi, som vi selv bestemmer.<\/p>\n\n\n\n<p>Med text-decoration kan vi enten <strong>understerge, gennemstrege eller overstrege<\/strong> vores tekst. I vores tilf\u00e6lde har jeg valgt ikke at g\u00f8re noget, men hvis jeg f.eks. ville understrege, ville jeg v\u00e6lge &#8220;underline&#8221;.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Link_styling\"><\/span>Link styling<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>N\u00e5r man arbejder med CSS er links noget af det man f\u00f8rst pr\u00f8ve at \u00e6ndre stylingen p\u00e5. Stylingen af links er lidt forskellige for andre m\u00e5der at style p\u00e5, da man her arbejder med stadier. Et link kan have 4 stadier, ogs\u00e5 kaldet  <br>pseudo-klasser:<\/p>\n\n\n\n<p>For et link som er bes\u00f8gt skriver man s\u00e5ledes <strong>a:visited<\/strong>, mens et link, som ikke er bes\u00f8gt skrives&nbsp;<strong>a:link<\/strong>, et link som er aktivt har pseudo-classen&nbsp;<strong>a:active<\/strong>, mens et link f\u00e5r pseudo-classen&nbsp;<strong>a:hover<\/strong>&nbsp;n\u00e5r musen f\u00f8res over linket, og p\u00e5 tilsvarende m\u00e5de mister denne pseudo-class n\u00e5r musen ikke l\u00e6ngere er over linket. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"link\"><span class=\"ez-toc-section\" id=\"Pseudo-class_link\"><\/span>Pseudo-class :link<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Som n\u00e6vnt ovenfor benyttes&nbsp;<code>:link<\/code>&nbsp;til at angive egenskaber for links, som endnu ikke er bes\u00f8gte (det vil sige at brugeren ikke har bes\u00f8gt den side linket f\u00f8rer til).<\/p>\n\n\n\n<p>Som et eksempel kan vi kigge p\u00e5 det tilf\u00e6lde at vi \u00f8nsker alle ubes\u00f8gte links skal v\u00e6re gr\u00f8nne, syntaksen er da:<\/p>\n\n\n\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">a:link {\n\tcolor: green;\n}\n<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"visited\"><span class=\"ez-toc-section\" id=\"Pseudo-class_visited\"><\/span>Pseudo-class :visited<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>P\u00e5 samme m\u00e5de benyttes&nbsp;<code>:visited<\/code>&nbsp;til at angive egenskaber for links, som er bes\u00f8gte (det vil sige at brugeren har bes\u00f8gt den side linket f\u00f8rer til).<\/p>\n\n\n\n<p>Lad os sige at vi \u00f8nsker at alle bes\u00f8gte links skal v\u00e6re gule, dette kan g\u00f8res s\u00e5dan:<\/p>\n\n\n\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">a:visited {\n\tcolor: yellow;\n}\n<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"active\"><span class=\"ez-toc-section\" id=\"Pseudo-class_active\"><\/span>Pseudo-class :active<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><code>:active<\/code>&nbsp;benyttes til at angive egenskaber for links, som aktiveres af brugeren (f.eks. for tidsrummet mellem en bruger klikker p\u00e5 et link, og indtil brugeren slipper musen igen).<\/p>\n\n\n\n<p>I vores eksempel giver vi aktiverede links en r\u00f8d baggrundsfarve:<\/p>\n\n\n\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">a:active {\n\tbackground-color: red;\n}\n<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"hover\"><span class=\"ez-toc-section\" id=\"Pseudo-class_hover\"><\/span>Pseudo-class :hover<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Pseudo-classen&nbsp;<code>:hover<\/code>&nbsp;benyttes til at angive hvilke egenskaber, der skal g\u00e6lde for links, som brugeren f\u00f8rer musen henover.<\/p>\n\n\n\n<p>Lad os sige at vi \u00f8nsker vores links skal blive orange og st\u00e5 med kursiv n\u00e5r musen f\u00f8res over dem:<\/p>\n\n\n\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">a:hover {\n\tcolor: orange;\n\tfont-style: italic;\n}\n<\/pre>\n\n\n\n<p>Giver det mening? Pr\u00f8v selv at kopiere koderne ovenfor og s\u00e6tte dem ind i dit stylesheet og lav s\u00e5 et link p\u00e5 din html side. Fungerer linket som beskrevet ovenfor?<\/p>\n\n\n\n<p>Pr\u00f8v selv at tilf\u00f8je flere egenskaber til de forskellige stadier, og se hvordan det p\u00e5virker dit link.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Selektion_af_elementer_class_og_id\"><\/span>Selektion af elementer (class og id)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Hvad g\u00f8r man, hvis man har to forskellige paragraffer der skal have forskellige stylinger? Eller m\u00e5ske to andre elementer, som skal se pr\u00e6cis ens ud? Jo s\u00e5 skal man hen og bruge klasser (class) eller id.<\/p>\n\n\n\n<p>Hvis du vil <strong>ramme flere elementer<\/strong> med den samme styling laver du en klasse.<\/p>\n\n\n\n<p>Hvis kun <strong>\u00e9t element<\/strong> skal have en specifik styling laver du et id. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Class\"><\/span>Class<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Lad os set p\u00e5 et eksempel med en klasse:<\/p>\n\n\n\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">&lt;p&gt;Tekst 1&lt;\/p&gt;\n&lt;p&gt;Tekst 2&lt;\/p&gt;\n&lt;p&gt;Tekst 3&lt;\/p&gt;\n<\/pre>\n\n\n\n<p>I ovenst\u00e5ende eksempel har du 3 paragraffer, men du vil gerne have at to af dem har ens styling mens den sidste bare skal have standard stylingen.<\/p>\n\n\n\n<p>Her kan du lave en klasse og s\u00e6tte den p\u00e5 de to paragraffer, der skal have den samme styling:<\/p>\n\n\n\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">&lt;p class=&quot;tekstklasse&quot;&gt;Tekst 1&lt;\/p&gt;\n&lt;p&gt;Tekst 2&lt;\/p&gt;\n&lt;p class=&quot;tekstklasse&quot;&gt;Tekst 3&lt;\/p&gt;\n<\/pre>\n\n\n\n<p>Klasse ville s\u00e5 se s\u00e5dan her ud:<\/p>\n\n\n\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">.tekstklasse {\n\tcolor: orange;\n\tfont-style: italic;\n}\n<\/pre>\n\n\n\n<p>Man angiver et klasse med &#8220;.&#8221; foran.  Hvad der st\u00e5r efter punktum, bestemmer du selv, men v\u00e6lg noget der giver mening og fort\u00e6ller lidt om, hvad klassen skal bruges til. Min klasse ovenfor kan nu s\u00e6tte p\u00e5 alle de elementer, hvor teksten skal v\u00e6re orange og st\u00e5 med kursiv.<\/p>\n\n\n\n<p>S\u00e5 har du flere elementer der skal styles ens, s\u00e5 laver du en klasse og s\u00e6tter den p\u00e5 via class attributten som anvist ovenfor.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Id\"><\/span>Id<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Hvis du derimod vil ramme \u00e9t element og ikke andre, s\u00e5 skal du bruge id.  En id styling kan kun bruges \u00e9n gang. S\u00e5 hvis du bruger den flere steder, vil browseren kun anvende den f\u00f8rste gang den ser den i dit dokument.<\/p>\n\n\n\n<p>Lad os antage, at vi har en r\u00e6kke overskrifter, som skal v\u00e6re de samme p\u00e5 hele vores hjemmeside p\u00e5 n\u00e6r p\u00e5 \u00e9n side, hvor overskriften skal v\u00e6re ekstra stor. <\/p>\n\n\n\n<p>Her kan vi g\u00e5 ind og lave en id selector, som kun kan bruges p\u00e5 den ene overskrift:<\/p>\n\n\n\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">#specieloverskrift {\n\tfont-size: 40px;\n}\n<\/pre>\n\n\n\n<p>Vi angiver et id med &#8220;#&#8221; og derefter et navn p\u00e5 id stylingen.<\/p>\n\n\n\n<p>Vi kan nu bruge den p\u00e5 vores overskrift.<\/p>\n\n\n\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;h1&gt;Alm overskrift&lt;\/h1&gt;\n&lt;h1&gt;Alm overskrift&lt;\/h1&gt;\n&lt;h1 id=&quot;specieloverskrift&quot;&gt;Speciel overskrift&lt;\/h1&gt;\n&lt;h1&gt;Alm overskrift&lt;\/h1&gt;\n<\/pre>\n\n\n\n<p>I eksemplet ovenfor vil alle overskrifter have standard &#8220;looket&#8221;, mens overskrift nr. 3 vil have vores specielle overskrift styling.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Begraensning_af_klasse\"><\/span>Begr\u00e6nsning af klasse<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Hvis vi gerne vil begr\u00e6nse vores klasse til et bestemt element, kan vi g\u00f8re det ved at skrive element-selektoren foran &#8220;.&#8221;. Hvis vi f.eks. tager eksemplet fra f\u00f8r, kan vi begr\u00e6nse vores &#8220;tekstklasse&#8221; til kun at m\u00e5tte g\u00e6lde til p-elementer s\u00e5ledes:<\/p>\n\n\n\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">p.tekstklasse {\n\tcolor: orange;\n\tfont-style: italic;\n}\n<\/pre>\n\n\n\n<p>Dette kan du g\u00f8re med alle klasser og elementer.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Layout_med_div_elementet\"><\/span>Layout med div elementet<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>I de gamle dage, s\u00e5 opbyggede man ens sides layout med tabeller (som vi allerede har gennemg\u00e5et). Dette var dog meget upraktisk, og man er derfor idag g\u00e5et over til at bruge div-tags, alts\u00e5 &#8220;divider&#8221; tags. <\/p>\n\n\n\n<p>Div-tags bruges s\u00e5ledes at at opdele din side i omr\u00e5det, s\u00e5 du kan flytte rundt p\u00e5 disse og organisere din side, som du \u00f8nsker.<\/p>\n\n\n\n<p>Man kan s\u00e6tte h\u00f8je (height), bredde (width) og meget mere p\u00e5 sine div-elementer, og p\u00e5 den m\u00e5de kan man lave omr\u00e5det p\u00e5 siden side, som er reserveret til f.eks. en menu, ens indhold, ens footer eller m\u00e5ske et omr\u00e5de med afstemninger et billedegalleri. Det skal alt sammmen l\u00e6gges ind i div-elementer, som du s\u00e5 kan kontrollere, hvor store skal v\u00e6rem hvor h\u00f8je og hvordan de skal placeres.<\/p>\n\n\n\n<p>Istedet for at vi viser et forkromet eksemplet her, s\u00e5 vil vi faktisk henvise dig til <a href=\"https:\/\/codepen.io\/dvainberg\/pen\/VYvZrN\">denne Codepen<\/a>.<\/p>\n\n\n\n<p>Her finder du nemlig et meget standard layout til en hjemmeside med divs. L\u00e6g m\u00e6rke til at div&#8217;sne omkranser indhold og at de alle har p\u00e5f\u00f8rt en klasse som styrer, hvor store div-omr\u00e5derne skal v\u00e6re og hvordan de skal v\u00e6re placeret.<\/p>\n\n\n\n<p>Det smarte ved denne &#8220;Codepen&#8221; er, at du live kan sidde og rette i tingene, s\u00e5 pr\u00f8v evt. at s\u00e6tte en baggrundfarve p\u00e5 en af div&#8217;sne eller pr\u00f8v at \u00e6ndre p\u00e5 h\u00f8jde og bredde. <\/p>\n\n\n\n<p>P\u00e5 den m\u00e5de vil du f\u00e5r en fornemmelse af, hvordan du kan strukturere din side med div-elementer<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Boksmodellen\"><\/span>Boksmodellen<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>N\u00e5r man arbejder med layout, s\u00e5 vil man helt sikkert p\u00e5 et tidspunkt f\u00e5 brug for at rykke sine elementer l\u00e6ngere til h\u00f8jre eller tilf\u00f8je lidt luft mellem kanten af ens div og indholdet. Det kan man henholdvis g\u00f8re med egenskaberne margin og padding.<\/p>\n\n\n\n<p>Margin skaber luft mellem elementer mens padding skaber luft inde i selve elementet. Der bedst forklare ved hj\u00e6lp af det man kalder for boksmodellen. Her har NemProgrammering.dk lavet en rigtig god guide, som vi ikke kan g\u00f8re bedre, og derfor kan du <a href=\"https:\/\/www.nemprogrammering.dk\/wp\/css-boksmodellen-sadan-fungerer-den\/\">l\u00e6se videre om boksmodellen hos dem<\/a>.<\/p>\n\n\n\n<p>Der findes masser af andre fasetter af CSS og mange flere muligheder end hvad vi har gennemg\u00e5et her, opfordrer dig derfor til selv at arbejde videre og pr\u00f8ve nye ting af.<\/p>\n\n\n\n<p>Vi kan blandt andet anbefale NemProgrammering.dk og W3Schools.com. <\/p>\n\n\n\n<p>Her har vi dog givet dig en solid introdution til CSS, som du selv kan bygge videre p\u00e5 \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"<p>CSS, som st\u00e5r for Cascading Style Sheets, giver dig et hav af sp\u00e6ndende muligheder, og kan potentielt spare dig for en masse arbejde, n\u00e5r det kommer til designet p\u00e5 din hjemmeside. CSS intet mindre end uundv\u00e6rlig for enhver der arbejder med webdesign. Derfor skal du selvf\u00f8lgelig ogs\u00e5 l\u00e6re det, og derfor har vi skrevet denne<\/p>\n<div><a class=\"btn-filled btn\" href=\"https:\/\/html.dk\/tutorials\/css\/\" title=\"Den ultimative guide til CSS\">L\u00e6s mere<\/a><\/div>\n","protected":false},"author":1,"featured_media":69,"comment_status":"closed","ping_status":"open","sticky":false,"template":"page-templates\/full-width.php","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-22","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Den ultimative guide til CSS - HTML.dk<\/title>\n<meta name=\"description\" content=\"Vil du gerne l\u00e6re CSS, s\u00e5 er dette guiden for dig. Vi har skrevet den ultimative CSS guide til dig der gerne vil igang med at l\u00e6re CSS\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/html.dk\/tutorials\/css\/\" \/>\n<meta property=\"og:locale\" content=\"da_DK\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Den ultimative guide til CSS - HTML.dk\" \/>\n<meta property=\"og:description\" content=\"Vil du gerne l\u00e6re CSS, s\u00e5 er dette guiden for dig. Vi har skrevet den ultimative CSS guide til dig der gerne vil igang med at l\u00e6re CSS\" \/>\n<meta property=\"og:url\" content=\"https:\/\/html.dk\/tutorials\/css\/\" \/>\n<meta property=\"og:site_name\" content=\"HTML.dk\" \/>\n<meta property=\"article:published_time\" content=\"2019-03-29T14:05:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-04-10T06:43:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/html.dk\/wp-content\/uploads\/2019\/03\/ai-close-up-code-160107-1024x683.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"683\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"HTML.dk\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Skrevet af\" \/>\n\t<meta name=\"twitter:data1\" content=\"HTML.dk\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimeret l\u00e6setid\" \/>\n\t<meta name=\"twitter:data2\" content=\"17 minutter\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/html.dk\\\/tutorials\\\/css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/html.dk\\\/tutorials\\\/css\\\/\"},\"author\":{\"name\":\"HTML.dk\",\"@id\":\"https:\\\/\\\/html.dk\\\/#\\\/schema\\\/person\\\/52710df39dde32af4a18db55fb57cdb9\"},\"headline\":\"Den ultimative guide til CSS\",\"datePublished\":\"2019-03-29T14:05:42+00:00\",\"dateModified\":\"2019-04-10T06:43:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/html.dk\\\/tutorials\\\/css\\\/\"},\"wordCount\":3432,\"publisher\":{\"@id\":\"https:\\\/\\\/html.dk\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/html.dk\\\/tutorials\\\/css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/html.dk\\\/wp-content\\\/uploads\\\/2019\\\/03\\\/ai-close-up-code-160107.jpg\",\"articleSection\":[\"Tutorials\"],\"inLanguage\":\"da-DK\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/html.dk\\\/tutorials\\\/css\\\/\",\"url\":\"https:\\\/\\\/html.dk\\\/tutorials\\\/css\\\/\",\"name\":\"Den ultimative guide til CSS - HTML.dk\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/html.dk\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/html.dk\\\/tutorials\\\/css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/html.dk\\\/tutorials\\\/css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/html.dk\\\/wp-content\\\/uploads\\\/2019\\\/03\\\/ai-close-up-code-160107.jpg\",\"datePublished\":\"2019-03-29T14:05:42+00:00\",\"dateModified\":\"2019-04-10T06:43:05+00:00\",\"description\":\"Vil du gerne l\u00e6re CSS, s\u00e5 er dette guiden for dig. Vi har skrevet den ultimative CSS guide til dig der gerne vil igang med at l\u00e6re CSS\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/html.dk\\\/tutorials\\\/css\\\/#breadcrumb\"},\"inLanguage\":\"da-DK\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/html.dk\\\/tutorials\\\/css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"da-DK\",\"@id\":\"https:\\\/\\\/html.dk\\\/tutorials\\\/css\\\/#primaryimage\",\"url\":\"https:\\\/\\\/html.dk\\\/wp-content\\\/uploads\\\/2019\\\/03\\\/ai-close-up-code-160107.jpg\",\"contentUrl\":\"https:\\\/\\\/html.dk\\\/wp-content\\\/uploads\\\/2019\\\/03\\\/ai-close-up-code-160107.jpg\",\"width\":5472,\"height\":3648,\"caption\":\"CSS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/html.dk\\\/tutorials\\\/css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Hjem\",\"item\":\"https:\\\/\\\/html.dk\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Den ultimative guide til CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/html.dk\\\/#website\",\"url\":\"https:\\\/\\\/html.dk\\\/\",\"name\":\"HTML.dk\",\"description\":\"Just another WordPress site\",\"publisher\":{\"@id\":\"https:\\\/\\\/html.dk\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/html.dk\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"da-DK\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/html.dk\\\/#organization\",\"name\":\"HTML.dk\",\"url\":\"https:\\\/\\\/html.dk\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"da-DK\",\"@id\":\"https:\\\/\\\/html.dk\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/html.dk\\\/wp-content\\\/uploads\\\/2019\\\/04\\\/HTML_dk_blue_site_logo.png\",\"contentUrl\":\"https:\\\/\\\/html.dk\\\/wp-content\\\/uploads\\\/2019\\\/04\\\/HTML_dk_blue_site_logo.png\",\"width\":135,\"height\":65,\"caption\":\"HTML.dk\"},\"image\":{\"@id\":\"https:\\\/\\\/html.dk\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/html.dk\\\/#\\\/schema\\\/person\\\/52710df39dde32af4a18db55fb57cdb9\",\"name\":\"HTML.dk\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"da-DK\",\"@id\":\"https:\\\/\\\/html.dk\\\/wp-content\\\/uploads\\\/2019\\\/04\\\/HTML_dk_blue_favicon-1-96x96.png\",\"url\":\"https:\\\/\\\/html.dk\\\/wp-content\\\/uploads\\\/2019\\\/04\\\/HTML_dk_blue_favicon-1-96x96.png\",\"contentUrl\":\"https:\\\/\\\/html.dk\\\/wp-content\\\/uploads\\\/2019\\\/04\\\/HTML_dk_blue_favicon-1-96x96.png\",\"caption\":\"HTML.dk\"},\"description\":\"P\u00e5 HTML.dk \u2764 vi kode. Vi skriver kode, l\u00e6ser kode og dr\u00f8mmer kode... Her p\u00e5 sitet deler vi ud af vores viden, og har du brug for vores hj\u00e6lp, skal du v\u00e6re velkommen til at kontakte os!\",\"url\":\"https:\\\/\\\/html.dk\\\/author\\\/t-iversen\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Den ultimative guide til CSS - HTML.dk","description":"Vil du gerne l\u00e6re CSS, s\u00e5 er dette guiden for dig. Vi har skrevet den ultimative CSS guide til dig der gerne vil igang med at l\u00e6re CSS","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/html.dk\/tutorials\/css\/","og_locale":"da_DK","og_type":"article","og_title":"Den ultimative guide til CSS - HTML.dk","og_description":"Vil du gerne l\u00e6re CSS, s\u00e5 er dette guiden for dig. Vi har skrevet den ultimative CSS guide til dig der gerne vil igang med at l\u00e6re CSS","og_url":"https:\/\/html.dk\/tutorials\/css\/","og_site_name":"HTML.dk","article_published_time":"2019-03-29T14:05:42+00:00","article_modified_time":"2019-04-10T06:43:05+00:00","og_image":[{"width":1024,"height":683,"url":"https:\/\/html.dk\/wp-content\/uploads\/2019\/03\/ai-close-up-code-160107-1024x683.jpg","type":"image\/jpeg"}],"author":"HTML.dk","twitter_card":"summary_large_image","twitter_misc":{"Skrevet af":"HTML.dk","Estimeret l\u00e6setid":"17 minutter"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/html.dk\/tutorials\/css\/#article","isPartOf":{"@id":"https:\/\/html.dk\/tutorials\/css\/"},"author":{"name":"HTML.dk","@id":"https:\/\/html.dk\/#\/schema\/person\/52710df39dde32af4a18db55fb57cdb9"},"headline":"Den ultimative guide til CSS","datePublished":"2019-03-29T14:05:42+00:00","dateModified":"2019-04-10T06:43:05+00:00","mainEntityOfPage":{"@id":"https:\/\/html.dk\/tutorials\/css\/"},"wordCount":3432,"publisher":{"@id":"https:\/\/html.dk\/#organization"},"image":{"@id":"https:\/\/html.dk\/tutorials\/css\/#primaryimage"},"thumbnailUrl":"https:\/\/html.dk\/wp-content\/uploads\/2019\/03\/ai-close-up-code-160107.jpg","articleSection":["Tutorials"],"inLanguage":"da-DK"},{"@type":"WebPage","@id":"https:\/\/html.dk\/tutorials\/css\/","url":"https:\/\/html.dk\/tutorials\/css\/","name":"Den ultimative guide til CSS - HTML.dk","isPartOf":{"@id":"https:\/\/html.dk\/#website"},"primaryImageOfPage":{"@id":"https:\/\/html.dk\/tutorials\/css\/#primaryimage"},"image":{"@id":"https:\/\/html.dk\/tutorials\/css\/#primaryimage"},"thumbnailUrl":"https:\/\/html.dk\/wp-content\/uploads\/2019\/03\/ai-close-up-code-160107.jpg","datePublished":"2019-03-29T14:05:42+00:00","dateModified":"2019-04-10T06:43:05+00:00","description":"Vil du gerne l\u00e6re CSS, s\u00e5 er dette guiden for dig. Vi har skrevet den ultimative CSS guide til dig der gerne vil igang med at l\u00e6re CSS","breadcrumb":{"@id":"https:\/\/html.dk\/tutorials\/css\/#breadcrumb"},"inLanguage":"da-DK","potentialAction":[{"@type":"ReadAction","target":["https:\/\/html.dk\/tutorials\/css\/"]}]},{"@type":"ImageObject","inLanguage":"da-DK","@id":"https:\/\/html.dk\/tutorials\/css\/#primaryimage","url":"https:\/\/html.dk\/wp-content\/uploads\/2019\/03\/ai-close-up-code-160107.jpg","contentUrl":"https:\/\/html.dk\/wp-content\/uploads\/2019\/03\/ai-close-up-code-160107.jpg","width":5472,"height":3648,"caption":"CSS"},{"@type":"BreadcrumbList","@id":"https:\/\/html.dk\/tutorials\/css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Hjem","item":"https:\/\/html.dk\/"},{"@type":"ListItem","position":2,"name":"Den ultimative guide til CSS"}]},{"@type":"WebSite","@id":"https:\/\/html.dk\/#website","url":"https:\/\/html.dk\/","name":"HTML.dk","description":"Just another WordPress site","publisher":{"@id":"https:\/\/html.dk\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/html.dk\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"da-DK"},{"@type":"Organization","@id":"https:\/\/html.dk\/#organization","name":"HTML.dk","url":"https:\/\/html.dk\/","logo":{"@type":"ImageObject","inLanguage":"da-DK","@id":"https:\/\/html.dk\/#\/schema\/logo\/image\/","url":"https:\/\/html.dk\/wp-content\/uploads\/2019\/04\/HTML_dk_blue_site_logo.png","contentUrl":"https:\/\/html.dk\/wp-content\/uploads\/2019\/04\/HTML_dk_blue_site_logo.png","width":135,"height":65,"caption":"HTML.dk"},"image":{"@id":"https:\/\/html.dk\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/html.dk\/#\/schema\/person\/52710df39dde32af4a18db55fb57cdb9","name":"HTML.dk","image":{"@type":"ImageObject","inLanguage":"da-DK","@id":"https:\/\/html.dk\/wp-content\/uploads\/2019\/04\/HTML_dk_blue_favicon-1-96x96.png","url":"https:\/\/html.dk\/wp-content\/uploads\/2019\/04\/HTML_dk_blue_favicon-1-96x96.png","contentUrl":"https:\/\/html.dk\/wp-content\/uploads\/2019\/04\/HTML_dk_blue_favicon-1-96x96.png","caption":"HTML.dk"},"description":"P\u00e5 HTML.dk \u2764 vi kode. Vi skriver kode, l\u00e6ser kode og dr\u00f8mmer kode... Her p\u00e5 sitet deler vi ud af vores viden, og har du brug for vores hj\u00e6lp, skal du v\u00e6re velkommen til at kontakte os!","url":"https:\/\/html.dk\/author\/t-iversen\/"}]}},"jetpack_featured_media_url":"https:\/\/html.dk\/wp-content\/uploads\/2019\/03\/ai-close-up-code-160107.jpg","_links":{"self":[{"href":"https:\/\/html.dk\/wp-json\/wp\/v2\/posts\/22","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/html.dk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/html.dk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/html.dk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/html.dk\/wp-json\/wp\/v2\/comments?post=22"}],"version-history":[{"count":93,"href":"https:\/\/html.dk\/wp-json\/wp\/v2\/posts\/22\/revisions"}],"predecessor-version":[{"id":598,"href":"https:\/\/html.dk\/wp-json\/wp\/v2\/posts\/22\/revisions\/598"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/html.dk\/wp-json\/wp\/v2\/media\/69"}],"wp:attachment":[{"href":"https:\/\/html.dk\/wp-json\/wp\/v2\/media?parent=22"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/html.dk\/wp-json\/wp\/v2\/categories?post=22"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/html.dk\/wp-json\/wp\/v2\/tags?post=22"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}