{"id":14705,"date":"2020-01-07T10:55:16","date_gmt":"2020-01-07T09:55:16","guid":{"rendered":"https:\/\/www.strato.nl\/blog\/?p=14705"},"modified":"2023-05-04T14:37:34","modified_gmt":"2023-05-04T12:37:34","slug":"css-voor-beginners-eerste-stappen","status":"publish","type":"post","link":"https:\/\/www.strato.nl\/blog\/css-voor-beginners-eerste-stappen\/","title":{"rendered":"CSS voor beginners &#8211; eerste stappen"},"content":{"rendered":"\n<p class=\"has-normal-font-size\"><strong>Wil je meer invloed hebben op het ontwerp van je website? Of wil je het ontwerp centraal vastleggen met een stylesheet? Dat doe je met CSS. In dit artikel leggen we je uit hoe je eenvoudige wijzigingen in het design van je website aanbrengt. <\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cascading-style-sheets\"><strong>Cascading Style Sheets<\/strong> <\/h2>\n\n\n\n<p>Terwijl HTML een markup-taal is, die de structuur van een website beschrijft, is CSS een stylesheet-taal. Het beschrijft de opmaak, ofwel de lay-out van de website.<\/p>\n\n\n\n<p>CSS is een afkorting die staat voor <strong>Cascading Style Sheets<\/strong>. Met zo\u2019n stylesheet kun je het design veel gedetailleerder instellen dan met pure HTML. Je kunt onder meer regelafstanden, ronde hoeken en slagschaduwen defini\u00ebren, wat in HTML niet kan. De lettergrootte is in HTML bijvoorbeeld beperkt tot 7 niveaus, terwijl er geen beperkingen zijn in CSS.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-je-lay-out-zelf-configureren\"><strong>Je lay-out zelf configureren<\/strong><\/h2>\n\n\n\n<p>Een handige tool om CSS beter onder de knie te krijgen, is deze <a href=\"https:\/\/www.w3schools.com\/css\/default.asp\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">CSS editor<\/a>. Je kunt hier ongestoord experimenteren met CSS zonder het uiterlijk van je website te beschadigen. Je begint met het <a href=\"https:\/\/www.w3schools.com\/css\/tryit.asp?filename=trycss_default\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">ontwerpen van een eenvoudige website<\/a>, zoals we hier gedaan hebben:<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2019\/12\/grafik-4.png\" alt=\"CSS tryit editor: een eerste poging\" class=\"wp-image-14775\" width=\"901\" height=\"493\"\/><figcaption class=\"wp-element-caption\"><em>In de editor kun je onder meer kleur en tekstgrootte aanpassen. Klik op &#8216;run&#8217; om het resultaat te bekijken. Wil je advies van iemand anders inwinnen? Via &#8216;save&#8217; kun je een URL oproepen die je met anderen kunt delen.  <\/em><\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-kleuren-wijzigen\"><strong>Kleuren<\/strong> <strong>wijzigen<\/strong><\/h2>\n\n\n\n<p>De website bevat de zin \u2018Mijn eerste CSS meesterwerk\u2019 in witte lettters op een lichtblauwe achtergrond, in het lettertype \u2018Verdana\u2019. Dit kun je aanpassen zoals jij wilt. In plaats van \u2018lightblue\u2019 kun je andere kleuren nemen zoals: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Red<\/li>\n\n\n\n<li>Yellow<\/li>\n\n\n\n<li>Cyan<\/li>\n\n\n\n<li>Blue<\/li>\n\n\n\n<li>Magenta<\/li>\n<\/ul>\n\n\n\n<p>Wat betreft kleuren zijn je &#8211; afgezien van goede smaak &#8211; vrijwel geen beperkingen opgelegd. Hier vind je een <a href=\"https:\/\/www.w3schools.com\/colors\/colors_names.asp\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">uitgebreide lijst met kleuren<\/a> waarmee je website kunt stylen. Als je nog meer variatie wilt, kun je ook je individuele kleuren kiezen met de <a href=\"https:\/\/www.w3schools.com\/colors\/colors_picker.asp\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">HTML color picker<\/a>. Er zijn verschillende notaties:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>HEX<\/strong><\/td><td><strong>RGB <\/strong><\/td><td><strong>Color<\/strong><\/td><\/tr><tr><td>#FF0000<\/td><td>rgb(255,0,0)<\/td><td>red<\/td><\/tr><tr><td>#00FF00<\/td><td>rgb(0,255,0)<\/td><td>green<\/td><\/tr><tr><td>#0000FF<\/td><td>rgb(0,0,255) <\/td><td>blue<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>De kleurnamen zijn Engels en je kent ze al van HTML. Als alternatief kun je kleuren defini\u00ebren met een<strong> hex-code<\/strong> (blauw = #0000FF) of met <strong>RGBA-waarden<\/strong>: rgba(0, 0, 255, 0.5). <\/p>\n\n\n\n<p><strong>RGBA<\/strong> zijn de 3 primaire kleuren rood, groen en blauw plus een waarde voor transparantie. Rood, groen en blauw worden gedefinieerd met  getallen tussen 0 (= 0% van deze kleur) en 255 (= 100% van deze kleur). <strong> Transparantie<\/strong> wordt uitgedrukt door een waarde tussen 0 en 1, waarbij 0 staat voor volledig transparant en 1 voor volledig ondoorzichtig. Let op: in het Engels wordt de punt gebruikt in plaats van de komma. Dus je moet 0.5 schrijven, niet 0,5. Is transparantie niet nodig? Dan kun je dit weglaten en gewoon rgb(0, 0, 255) schrijven. <\/p>\n\n\n\n<p>In het tweede voorbeeld werken we met een ander kleurschema:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"886\" height=\"611\" src=\"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2019\/12\/grafik-9.png\" alt=\"CSS tryit editor: experimenteren met kleur\" class=\"wp-image-15060\"\/><figcaption class=\"wp-element-caption\"><em>Hier is bijvoorbeeld voor de achtergrondkleur #FF00FF ofwel &#8216;magenta&#8217; gekozen. <\/em> <\/figcaption><\/figure>\n\n\n\n<p>Hiermee kun je naar hartenlust experimenteren. Houd er rekening mee dat niet alle kleurcombinaties even gunstig uitpakken voor je website. De knalpaarse achtergrond hierboven bijvoorbeeld valt op, maar maakt ook een onrustige indruk, wat de bezoekers van je website misschien onnodig afleidt.  <\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-het-lettertype-aanpassen-met-css\"><strong>Het lettertype aanpassen met CSS<\/strong><\/h2>\n\n\n\n<p>Ook het lettertype en de tekstgrootte kun je op deze manier aanpassen. In plaats van \u2018Verdana\u2019 hebben we hier voor de koptekst (h1) \u2018Elephant\u2019 gekozen en de lettergrootte 60px genomen. <\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2019\/12\/grafik-8.png\" alt=\"CSS tryit editor: experimenteren met lettertypes\" class=\"wp-image-15050\" width=\"901\"\/><figcaption class=\"wp-element-caption\">Ontelbare mogelijkheden om je website een unieke uitstraling te geven: onder &#8216;font-style&#8217; kun je &#8216;italic&#8217; aangeven om je tekst cursief maken. Ook schaduweffecten en transparantie zijn mogelijk.<\/figcaption><\/figure>\n\n\n\n<p>Handig om te weten: pixels (px) verhouden zich relatief tot het weergaveapparaat. Dus voor apparaten met een lage dpi is 1 px \u00e9\u00e9n apparaatpixel (dot) van het scherm, maar voor printers en schermen met een hoge resolutie houdt 1px meerdere apparaatpixels in. Andere eenheden zijn bijvoorbeeld \u2018cm\u2019 voor centimeters of \u2018pt\u2019 voor  punten. Die laatste eenheid vind je in programma&#8217;s als Word. <\/p>\n\n\n\n<p>Het is overigens aan te bevelen om alleen lettertypen te gebruiken die wereldwijd op de meeste computers worden gebruikt. Dit zijn bijvoorbeeld Arial, Times en  Courier. Bouw je de website alleen voor jezelf? Dan kun je natuurlijk elk lettertype kiezen dat op je computer is ge\u00efnstalleerd. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-gangbare-css-eigenschappen\"><strong>Gangbare CSS-eigenschappen<\/strong><\/h2>\n\n\n\n<p>Deze drie eigenschappen (properties) &#8211;<strong> kleur<\/strong>, <strong>grootte <\/strong>en <strong>lettertype <\/strong>\u2013 zie je in CSS als <strong>color<\/strong>, <strong>font-size<\/strong> en <strong>font-family<\/strong>. De syntaxis van CSS ziet er altijd zo uit:<\/p>\n\n\n\n<p><strong>Eigenschap<\/strong><strong> : waarde\n;<\/strong><\/p>\n\n\n\n<p>Met font-family kies je het lettertype, dit is in dit geval de <strong>eigenschap<\/strong>. Kies je vervolgens \u2018Arial\u2019 dan vormt dat lettertype de <strong>waarde<\/strong>. Vind je dat nog te weinig? Hier zijn alle <a href=\"https:\/\/www.w3schools.com\/cssref\/default.asp\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">CSS-eigenschappen op een rijtje gezet<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-nuttige-hulpmiddelen-op-het-web\"><strong>Nuttige\nhulpmiddelen op het web<\/strong><\/h2>\n\n\n\n<p>We kunnen in dit blogartikel natuurlijk onmogelijk alle eigenschappen behandelen. Maar online vind je veel nuttige informatie. We kunnen naast de hier gebruikte <a href=\"https:\/\/www.w3schools.com\/css\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">w3schools editor<\/a> nog <strong>3 tools<\/strong> aanraden, waarmee je je CSS-kennis verder kunt verdiepen:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-1-ontwikkelaarsconsole\"><strong>1. Ontwikkelaarsconsole<\/strong><\/h3>\n\n\n\n<p>Elke moderne browser heeft een speciale modus voor ontwikkelaars. In Google Chrome open je die door met de rechtermuisknop te klikken op een afbeelding, tekstpassage of element op de website en in het contextmenu \u2018Inspecteren\u2019 te kiezen. Daar kun je de stijl van elk element bekijken en bij wijze van proef wijzigen. De browser kent alle beschikbare eigenschappen van een element en helpt je met een automatische tekstaanvulling.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"728\" height=\"321\" src=\"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2021\/04\/met-chrome-inspecteren.jpg\" alt=\"Inspecteren-functie in Google Chrome\n\" class=\"wp-image-30224\" srcset=\"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2021\/04\/met-chrome-inspecteren.jpg 728w, https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2021\/04\/met-chrome-inspecteren-300x132.jpg 300w\" sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><figcaption class=\"wp-element-caption\">Met behulp van de functie &#8220;Inspecteren&#8221; kun je in Google Chrome CSS-instellingen bekijken.<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-2-css3-generator\"><strong>2. <a href=\"https:\/\/css3generator.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">CSS3 Generator<\/a><\/strong><\/h3>\n\n\n\n<p>De generator cre\u00ebert eenvoudig de gewenste opmaak. Makkelijk als je bijvoorbeeld &#8216;iets met schaduw&#8217; wilt doen, maar nog niet weet hoe je dit in CSS omzet. Zo is het een kwestie van kopi\u00ebren en plakken.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2019\/12\/grafik-11.png\" alt=\"CSS3 Generator\" class=\"wp-image-15100\" width=\"420\" height=\"327\"\/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-3-html-dog-css-tutorial\"><strong>3. <a href=\"https:\/\/www.htmldog.com\/guides\/css\/beginner\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">HTML Dog CSS Tutorial<\/a><\/strong><\/h3>\n\n\n\n<p>Dit is een goede tutorial voor CSS-beginners die je stap voor stap inwijdt. Ben je al iets meer gevorderd, kun je meteen naar de <a href=\"https:\/\/www.htmldog.com\/guides\/css\/intermediate\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">CSS intermediate tutorial<\/a> doorklikken.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter is-resized\"><a href=\"https:\/\/www.htmldog.com\/guides\/css\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2019\/12\/grafik-12.png\" alt=\"CSS Beginner tutorial\" class=\"wp-image-15105\" width=\"321\" height=\"140\"\/><\/a><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"h-maak-je-eigen-website\"><strong>Maak je eigen website<\/strong><\/h2>\n\n\n\n<p>Wil je een eigen website met HTML en CSS maken? Of wil je CSS gebruiken om van alle ontwerpmogelijkheden van WordPress te profiteren?<\/p>\n\n\n<a href=\"https:\/\/www.strato.nl\/hosting\/?utm_source=Blogartikel&#038;utm_medium=Blogartikel&#038;utm_campaign=CSS-deel-1&#038;campaign=strato.nl\/blog\/Artikel\/CSS-deel-1&#038;swtssa=nedsc0000000000000000tffc\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"btn btn-strato-blue strato-c2a\">Naar de STRATO hostingpakketten<\/a>","protected":false},"excerpt":{"rendered":"<p>Wil je meer invloed hebben op het ontwerp van je website? Of wil je het ontwerp centraal vastleggen met een stylesheet? Dat doe je met CSS. In dit artikel leggen we je uit hoe je eenvoudige wijzigingen in het design van je website aanbrengt. Cascading Style Sheets Terwijl HTML een markup-taal is, die de structuur [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":30325,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[405],"tags":[460,163],"class_list":["post-14705","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-hosting-wordpress","tag-css","tag-website"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>CSS voor beginners - eerste stappen - STRATO blogt<\/title>\n<meta name=\"description\" content=\"Het design van je website aanpassen zoals jij dat wilt? Dat kan met de opmaaktaal CSS. Wij helpen je op weg met de eerste stappen.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.strato.nl\/blog\/css-voor-beginners-eerste-stappen\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS voor beginners - eerste stappen - STRATO blogt\" \/>\n<meta property=\"og:description\" content=\"Het design van je website aanpassen zoals jij dat wilt? Dat kan met de opmaaktaal CSS. Wij helpen je op weg met de eerste stappen.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.strato.nl\/blog\/css-voor-beginners-eerste-stappen\/\" \/>\n<meta property=\"og:site_name\" content=\"STRATO blogt\" \/>\n<meta property=\"article:published_time\" content=\"2020-01-07T09:55:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-05-04T12:37:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2020\/01\/coding-1853305_1280.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"727\" \/>\n\t<meta property=\"og:image:height\" content=\"410\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jorrit van der Heide\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Geschreven door\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jorrit van der Heide\" \/>\n\t<meta name=\"twitter:label2\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.strato.nl\/blog\/css-voor-beginners-eerste-stappen\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.strato.nl\/blog\/css-voor-beginners-eerste-stappen\/\"},\"author\":{\"name\":\"Jorrit van der Heide\",\"@id\":\"https:\/\/www.strato.nl\/blog\/#\/schema\/person\/5a54b8633a953d92c3c86c515653e64c\"},\"headline\":\"CSS voor beginners &#8211; eerste stappen\",\"datePublished\":\"2020-01-07T09:55:16+00:00\",\"dateModified\":\"2023-05-04T12:37:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.strato.nl\/blog\/css-voor-beginners-eerste-stappen\/\"},\"wordCount\":958,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.strato.nl\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.strato.nl\/blog\/css-voor-beginners-eerste-stappen\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2020\/01\/coding-1853305_1280.jpg\",\"keywords\":[\"CSS\",\"Website\"],\"articleSection\":[\"Hosting &amp; WordPress\"],\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.strato.nl\/blog\/css-voor-beginners-eerste-stappen\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.strato.nl\/blog\/css-voor-beginners-eerste-stappen\/\",\"url\":\"https:\/\/www.strato.nl\/blog\/css-voor-beginners-eerste-stappen\/\",\"name\":\"CSS voor beginners - eerste stappen - STRATO blogt\",\"isPartOf\":{\"@id\":\"https:\/\/www.strato.nl\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.strato.nl\/blog\/css-voor-beginners-eerste-stappen\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.strato.nl\/blog\/css-voor-beginners-eerste-stappen\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2020\/01\/coding-1853305_1280.jpg\",\"datePublished\":\"2020-01-07T09:55:16+00:00\",\"dateModified\":\"2023-05-04T12:37:34+00:00\",\"description\":\"Het design van je website aanpassen zoals jij dat wilt? Dat kan met de opmaaktaal CSS. Wij helpen je op weg met de eerste stappen.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.strato.nl\/blog\/css-voor-beginners-eerste-stappen\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.strato.nl\/blog\/css-voor-beginners-eerste-stappen\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/www.strato.nl\/blog\/css-voor-beginners-eerste-stappen\/#primaryimage\",\"url\":\"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2020\/01\/coding-1853305_1280.jpg\",\"contentUrl\":\"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2020\/01\/coding-1853305_1280.jpg\",\"width\":727,\"height\":410,\"caption\":\"CSS voor beginners\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.strato.nl\/blog\/css-voor-beginners-eerste-stappen\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.strato.nl\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS voor beginners &#8211; eerste stappen\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.strato.nl\/blog\/#website\",\"url\":\"https:\/\/www.strato.nl\/blog\/\",\"name\":\"STRATO blogt\",\"description\":\"Nieuws en tips over webhosting!\",\"publisher\":{\"@id\":\"https:\/\/www.strato.nl\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.strato.nl\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.strato.nl\/blog\/#organization\",\"name\":\"STRATO blogt\",\"url\":\"https:\/\/www.strato.nl\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/www.strato.nl\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2019\/11\/strato_signet_blogt_nl_wei\u00df.png\",\"contentUrl\":\"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2019\/11\/strato_signet_blogt_nl_wei\u00df.png\",\"width\":259,\"height\":42,\"caption\":\"STRATO blogt\"},\"image\":{\"@id\":\"https:\/\/www.strato.nl\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.strato.nl\/blog\/#\/schema\/person\/5a54b8633a953d92c3c86c515653e64c\",\"name\":\"Jorrit van der Heide\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/www.strato.nl\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/8bbb822d00245b4e86308c629fa6ecfa418b5d623a33517e972df14d86538175?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/8bbb822d00245b4e86308c629fa6ecfa418b5d623a33517e972df14d86538175?s=96&d=mm&r=g\",\"caption\":\"Jorrit van der Heide\"},\"url\":\"https:\/\/www.strato.nl\/blog\/author\/vanderheide\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS voor beginners - eerste stappen - STRATO blogt","description":"Het design van je website aanpassen zoals jij dat wilt? Dat kan met de opmaaktaal CSS. Wij helpen je op weg met de eerste stappen.","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:\/\/www.strato.nl\/blog\/css-voor-beginners-eerste-stappen\/","og_locale":"nl_NL","og_type":"article","og_title":"CSS voor beginners - eerste stappen - STRATO blogt","og_description":"Het design van je website aanpassen zoals jij dat wilt? Dat kan met de opmaaktaal CSS. Wij helpen je op weg met de eerste stappen.","og_url":"https:\/\/www.strato.nl\/blog\/css-voor-beginners-eerste-stappen\/","og_site_name":"STRATO blogt","article_published_time":"2020-01-07T09:55:16+00:00","article_modified_time":"2023-05-04T12:37:34+00:00","og_image":[{"width":727,"height":410,"url":"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2020\/01\/coding-1853305_1280.jpg","type":"image\/jpeg"}],"author":"Jorrit van der Heide","twitter_card":"summary_large_image","twitter_misc":{"Geschreven door":"Jorrit van der Heide","Geschatte leestijd":"6 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.strato.nl\/blog\/css-voor-beginners-eerste-stappen\/#article","isPartOf":{"@id":"https:\/\/www.strato.nl\/blog\/css-voor-beginners-eerste-stappen\/"},"author":{"name":"Jorrit van der Heide","@id":"https:\/\/www.strato.nl\/blog\/#\/schema\/person\/5a54b8633a953d92c3c86c515653e64c"},"headline":"CSS voor beginners &#8211; eerste stappen","datePublished":"2020-01-07T09:55:16+00:00","dateModified":"2023-05-04T12:37:34+00:00","mainEntityOfPage":{"@id":"https:\/\/www.strato.nl\/blog\/css-voor-beginners-eerste-stappen\/"},"wordCount":958,"commentCount":0,"publisher":{"@id":"https:\/\/www.strato.nl\/blog\/#organization"},"image":{"@id":"https:\/\/www.strato.nl\/blog\/css-voor-beginners-eerste-stappen\/#primaryimage"},"thumbnailUrl":"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2020\/01\/coding-1853305_1280.jpg","keywords":["CSS","Website"],"articleSection":["Hosting &amp; WordPress"],"inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.strato.nl\/blog\/css-voor-beginners-eerste-stappen\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.strato.nl\/blog\/css-voor-beginners-eerste-stappen\/","url":"https:\/\/www.strato.nl\/blog\/css-voor-beginners-eerste-stappen\/","name":"CSS voor beginners - eerste stappen - STRATO blogt","isPartOf":{"@id":"https:\/\/www.strato.nl\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.strato.nl\/blog\/css-voor-beginners-eerste-stappen\/#primaryimage"},"image":{"@id":"https:\/\/www.strato.nl\/blog\/css-voor-beginners-eerste-stappen\/#primaryimage"},"thumbnailUrl":"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2020\/01\/coding-1853305_1280.jpg","datePublished":"2020-01-07T09:55:16+00:00","dateModified":"2023-05-04T12:37:34+00:00","description":"Het design van je website aanpassen zoals jij dat wilt? Dat kan met de opmaaktaal CSS. Wij helpen je op weg met de eerste stappen.","breadcrumb":{"@id":"https:\/\/www.strato.nl\/blog\/css-voor-beginners-eerste-stappen\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.strato.nl\/blog\/css-voor-beginners-eerste-stappen\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/www.strato.nl\/blog\/css-voor-beginners-eerste-stappen\/#primaryimage","url":"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2020\/01\/coding-1853305_1280.jpg","contentUrl":"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2020\/01\/coding-1853305_1280.jpg","width":727,"height":410,"caption":"CSS voor beginners"},{"@type":"BreadcrumbList","@id":"https:\/\/www.strato.nl\/blog\/css-voor-beginners-eerste-stappen\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.strato.nl\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS voor beginners &#8211; eerste stappen"}]},{"@type":"WebSite","@id":"https:\/\/www.strato.nl\/blog\/#website","url":"https:\/\/www.strato.nl\/blog\/","name":"STRATO blogt","description":"Nieuws en tips over webhosting!","publisher":{"@id":"https:\/\/www.strato.nl\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.strato.nl\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/www.strato.nl\/blog\/#organization","name":"STRATO blogt","url":"https:\/\/www.strato.nl\/blog\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/www.strato.nl\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2019\/11\/strato_signet_blogt_nl_wei\u00df.png","contentUrl":"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2019\/11\/strato_signet_blogt_nl_wei\u00df.png","width":259,"height":42,"caption":"STRATO blogt"},"image":{"@id":"https:\/\/www.strato.nl\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.strato.nl\/blog\/#\/schema\/person\/5a54b8633a953d92c3c86c515653e64c","name":"Jorrit van der Heide","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/www.strato.nl\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/8bbb822d00245b4e86308c629fa6ecfa418b5d623a33517e972df14d86538175?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8bbb822d00245b4e86308c629fa6ecfa418b5d623a33517e972df14d86538175?s=96&d=mm&r=g","caption":"Jorrit van der Heide"},"url":"https:\/\/www.strato.nl\/blog\/author\/vanderheide\/"}]}},"_links":{"self":[{"href":"https:\/\/www.strato.nl\/blog\/wp-json\/wp\/v2\/posts\/14705","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.strato.nl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.strato.nl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.strato.nl\/blog\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.strato.nl\/blog\/wp-json\/wp\/v2\/comments?post=14705"}],"version-history":[{"count":43,"href":"https:\/\/www.strato.nl\/blog\/wp-json\/wp\/v2\/posts\/14705\/revisions"}],"predecessor-version":[{"id":35706,"href":"https:\/\/www.strato.nl\/blog\/wp-json\/wp\/v2\/posts\/14705\/revisions\/35706"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.strato.nl\/blog\/wp-json\/wp\/v2\/media\/30325"}],"wp:attachment":[{"href":"https:\/\/www.strato.nl\/blog\/wp-json\/wp\/v2\/media?parent=14705"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.strato.nl\/blog\/wp-json\/wp\/v2\/categories?post=14705"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.strato.nl\/blog\/wp-json\/wp\/v2\/tags?post=14705"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}