{"id":15505,"date":"2020-01-21T13:35:50","date_gmt":"2020-01-21T12:35:50","guid":{"rendered":"https:\/\/www.strato.nl\/blog\/?p=15505"},"modified":"2022-12-21T16:38:43","modified_gmt":"2022-12-21T15:38:43","slug":"css-voor-beginners-een-stylesheet-maken","status":"publish","type":"post","link":"https:\/\/www.strato.nl\/blog\/css-voor-beginners-een-stylesheet-maken\/","title":{"rendered":"CSS voor beginners \u2013 een stylesheet maken"},"content":{"rendered":"\n<p class=\"has-normal-font-size\"><strong>Met een stylesheet kun je CSS en HTML van elkaar scheiden zonder de logische verbinding te verliezen. Dit heeft als voordeel dat je minder hoeft te typen. Bovendien is het overzichtelijker en laadt je pagina sneller.<\/strong><\/p>\n\n\n\n<p><strong>Let op:<\/strong> maak eerst een nieuw leeg tekstbestand aan ter voorbereiding. Dit bestand sla je op als \u2018stylesheet.css\u2019 in dezelfde map als je HTML-bestand.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-html-en-css-koppelen\"><strong>HTML en CSS koppelen<\/strong><\/h2>\n\n\n\n<p>In <a aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" href=\"https:\/\/www.strato.nl\/blog\/css-voor-beginners-eerste-stappen\/\" target=\"_blank\">het eerste deel van deze serie<\/a> behandelden we een paar CSS-beginselen om te laten zien hoe je zonder veel programmeerkennis het design van je website kunt aanpassen. Nu gaan we over tot de praktijk. Hoe koppel je een CSS-stylesheet aan jouw website, zodat elke pagina in dezelfde opmaak wordt weergegeven? <\/p>\n\n\n\n<p>Je kunt je CSS-regels uiteraard telkens binnen het stijlattribuut van een HTML-tag inbedden. Dit maakt het verband tussen CSS en HTML duidelijk: \u2018deze CSS-instructie is van toepassing op deze HTML-tag\u2019. Maar deze werkwijze is nogal ineffici\u00ebnt als je meer dan eens dezelfde instructie nodig hebt, zoals in dit voorbeeld:<\/p>\n\n\n<p>&lt;html&gt;<br>&lt;body&gt;<br><span style=\"color: #800000;\">&lt;h1<\/span> style=\u201c<span style=\"color: #ff0000;\">font-family<\/span>: <span style=\"color: #0000ff;\">Arial<\/span>; <span style=\"color: #ff0000;\">font-size<\/span>: <span style=\"color: #0000ff;\">30px<\/span>; <span style=\"color: #ff0000;\">color<\/span>: <span style=\"color: #0000ff;\">red<\/span>;\u201d&gt;Kop<span style=\"color: #800000;\">&lt;\/h1&gt;<\/span><br><span style=\"color: #800000;\">&lt;p <\/span>style=\u201c<span style=\"color: #ff0000;\">font-family<\/span>: <span style=\"color: #0000ff;\">Arial<\/span>; <span style=\"color: #ff0000;\">font-size<\/span>: <span style=\"color: #0000ff;\">16px<\/span>; <span style=\"color: #ff0000;\">color<\/span>: <span style=\"color: #0000ff;\">black<\/span>;\u201d&gt;Eerste alinea.<span style=\"color: #800000;\">&lt;\/p&gt;<\/span><br><span style=\"color: #800000;\">&lt;h2<\/span> style=\u201c<span style=\"color: #ff0000;\">font-family<\/span>: <span style=\"color: #0000ff;\">Arial<\/span>; <span style=\"color: #ff0000;\">font-size<\/span>: <span style=\"color: #0000ff;\">24px<\/span>;<span style=\"color: #ff0000;\"> color<\/span>: <span style=\"color: #0000ff;\">orange<\/span>;\u201d&gt;Tussenkopje<span style=\"color: #800000;\">&lt;\/h2&gt;<\/span><br><span style=\"color: #800000;\">&lt;p<\/span> style=\u201c<span style=\"color: #ff0000;\">font-family<\/span>: <span style=\"color: #0000ff;\">Arial<\/span>; <span style=\"color: #ff0000;\">font-size<\/span>: <span style=\"color: #0000ff;\">16px<\/span>; <span style=\"color: #ff0000;\">color<\/span>: <span style=\"color: #0000ff;\">black<\/span>;\u201d&gt;Tweede alinea.<span style=\"color: #800000;\">&lt;\/p&gt;<\/span><br>&lt;\/body&gt;<br>&lt;\/html&gt;<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"h-html-en-css-van-elkaar-scheiden\"><strong>HTML en CSS van elkaar scheiden  <\/strong><\/h2>\n\n\n<p>Dat kan gelukkig ook korter. Daarvoor moeten we HTML en CSS van elkaar scheiden ofwel in twee aparte bestanden opslaan. Daarbij doe je in eerste instantie niets anders dan wat hierboven in het stijlattribuut staat (\u201c<span style=\"color: #ff0000;\">font-family<\/span>: <span style=\"color: #0000ff;\">Arial<\/span>; <span style=\"color: #ff0000;\">font-size<\/span>: <span style=\"color: #0000ff;\">30px<\/span>; <span style=\"color: #ff0000;\">color<\/span>: <span style=\"color: #0000ff;\">red<\/span>;\u201d etc.) tussen de accolades te plakken.<\/p>\n\n\n<p>We hadden in het eerste deel al gezien hoe een CSS-regel eruitziet, maar waren nog niet op de &#8216;selectoren&#8217; ingegaan:<\/p>\n\n\n<p><span style=\"color: #800000;\">Selector <\/span>{ <span style=\"color: #ff0000;\">Eigenschap<\/span> : <span style=\"color: #0000ff;\">Waarde<\/span> ; }<\/p>\n\n\n<p>Een selector kiest HTML-elementen waarvoor de daarna genoemde eigenschappen moeten gelden. De eenvoudigste variant van een selector is de naam van de HTML-tag, in dit geval bijvoorbeeld \u2018p\u2019, \u2018h1\u2019 en \u2018h2\u2019.<\/p>\n\n\n<p><span style=\"color: #800000;\">p<\/span> {<br><span style=\"color: #ff0000;\">font-family<\/span>: <span style=\"color: #0000ff;\">Arial<\/span>;<br><span style=\"color: #ff0000;\">font-size<\/span>: <span style=\"color: #0000ff;\">16px<\/span>;<br><span style=\"color: #ff0000;\">color<\/span>: <span style=\"color: #0000ff;\">black<\/span>;<br>}<\/p>\n\n\n<p>Deze\nCSS-regel zegt dat voor alle &lt;p&gt;-tags de eigenschappen tussen de haakjes\nvan toepassing zijn.<\/p>\n\n\n\n<p>Vervolgens plaats je deze CSS-regel voor de &lt;p&gt;-tag in het lege \u2018stylesheet.css\u2019-bestand. Voor de browser maakt het niet uit of je CSS voor mensen leesbaar is. Maar als je later iets wilt wijzigen of problemen moet oplossen, is het handig om precies te weten welke functie een CSS-regel heeft. Je kunt dus rustig je eigen notities toevoegen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-html-opruimen\"><strong>HTML opruimen<\/strong><\/h2>\n\n\n\n<p>Zodra je HTML en CSS van elkaar scheidt, heb je de CSS in de stijlattributen voor de &lt;p&gt; tags natuurlijk niet meer nodig. De HTML-code ziet er weer schoon uit:<\/p>\n\n\n<p>&lt;html&gt; <br>&lt;body&gt;<br><span style=\"color: #800000;\">&lt;h1&gt;<\/span>Kop<span style=\"color: #800000;\">&lt;\/h1&gt;<\/span><br><span style=\"color: #800000;\">&lt;p&gt;<\/span>Eerste alinea.<span style=\"color: #800000;\">&lt;\/p&gt;<\/span><br><span style=\"color: #800000;\">&lt;h2&gt;<\/span>Tussenkop<span style=\"color: #800000;\">&lt;\/h2&gt;<\/span><br><span style=\"color: #800000;\">&lt;p&gt;<\/span>Tweede alinea.<span style=\"color: #800000;\">&lt;\/p&gt;<\/span><br>&lt;\/body&gt;<br>&lt;\/html&gt;<\/p>\n\n\n<p>Het bestand \u2018stylesheet.css\u2019 bevat deze code:<\/p>\n\n\n<p><span style=\"color: #800000;\">p<\/span> {<br><span style=\"color: #ff0000;\">font-family<\/span>: <span style=\"color: #0000ff;\">Arial<\/span>;<br><span style=\"color: #ff0000;\">font-size<\/span>: <span style=\"color: #0000ff;\">16px<\/span>;<br><span style=\"color: #ff0000;\">color<\/span>: <span style=\"color: #0000ff;\">black<\/span>;<br>}<\/p>\n<p><span style=\"color: #800000;\">h1<\/span> {<br><span style=\"color: #ff0000;\">font-family<\/span>: <span style=\"color: #0000ff;\">Arial<\/span>;<br><span style=\"color: #ff0000;\">font-size<\/span>: <span style=\"color: #0000ff;\">30px<\/span>;<br><span style=\"color: #ff0000;\">color<\/span>: <span style=\"color: #0000ff;\">red<\/span>;<br>}<\/p>\n<p><span style=\"color: #800000;\">h2<\/span> {<br><span style=\"color: #ff0000;\">font-family<\/span>: <span style=\"color: #0000ff;\">Arial<\/span>;<br><span style=\"color: #ff0000;\">font-size<\/span>: <span style=\"color: #0000ff;\">24px<\/span>;<br><span style=\"color: #ff0000;\">color<\/span>: <span style=\"color: #0000ff;\">orange<\/span>;<br>}<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"h-externe-stylesheet-laden\"><strong>Externe stylesheet laden<\/strong><\/h2>\n\n\n\n<p>Om dit alles goed te laten werken en om ervoor te zorgen dat alles er weer uitziet als voorheen, moet je nog \u00e9\u00e9n cruciale stap volgen: het stylesheet moet worden geladen. Dit doe je met een &lt;link&gt;-tag (niet te verwarren met het anker &lt;a&gt;).<\/p>\n\n\n\n<p> &lt;link&gt; hoort thuis in de kop van het HTML-document, tussen  en &lt;head&gt; en &lt;head&gt; .<\/p>\n\n\n<p>&lt;html&gt;<br>&lt;head&gt;<br>&lt;link rel=\u201c<span style=\"color: #000000;\">stylesheet<\/span>\u201d href=\u201cstylesheet.css\u201d&gt;<br>&lt;\/head&gt;<br>&lt;body&gt;<br><span style=\"color: #800000;\">&lt;h1&gt;<\/span>Kop<span style=\"color: #800000;\">&lt;\/h1&gt;<\/span><br><span style=\"color: #800000;\">&lt;p&gt;<\/span>Eerste alinea.<span style=\"color: #800000;\">&lt;\/p&gt;<\/span><br><span style=\"color: #800000;\">&lt;h2&gt;<\/span>Tussenkopje<span style=\"color: #800000;\">&lt;\/h2&gt;<\/span><br><span style=\"color: #800000;\">&lt;p&gt;<\/span>Tweede alinea.<span style=\"color: #800000;\">&lt;\/p&gt;<\/span><br>&lt;\/body&gt;<br>&lt;\/html&gt;<\/p>\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\/2020\/01\/afbeelding.png\" alt=\"CSS in werking\" class=\"wp-image-15523\" width=\"410\" height=\"191\"\/><\/figure>\n\n\n\n<p>De\nduidelijke opmaak is een groot voordeel van deze scheiding van CSS en HTML.\nBovendien kun je nu meer HTML-pagina&#8217;s bouwen en daar steeds hetzelfde\nstylesheet voor gebruiken. Aangezien de browser het stylesheet na het laden in\nde cache opslaat, laden de pagina\u2019s sneller.<\/p>\n\n\n\n<p>CSS-selectoren zijn het meest complexe onderdeel van CSS en gaan veel verder dan wat je in deze tutorial hebt gelezen. Wil je meer weten? Lees dan de CSS-artikelen op <a href=\"https:\/\/www.w3schools.com\/cssref\/css_selectors.asp\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">W3schools<\/a>. <br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-wil-je-css-voor-je-eigen-website-gebruiken\"><strong>Wil je CSS voor je eigen website gebruiken?<\/strong><\/h2>\n\n\n<a href=\"https:\/\/www.strato.nl\/hosting\/?utm_source=Blogartikel&#038;utm_medium=Blogartikel&#038;utm_campaign=CSS-deel-2&#038;campaign=strato.nl\/blog\/Artikel\/CSS-deel-2&#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>Met een stylesheet kun je CSS en HTML van elkaar scheiden zonder de logische verbinding te verliezen. Dit heeft als voordeel dat je minder hoeft te typen. Bovendien is het overzichtelijker en laadt je pagina sneller. Let op: maak eerst een nieuw leeg tekstbestand aan ter voorbereiding. Dit bestand sla je op als \u2018stylesheet.css\u2019 in [&hellip;]<\/p>\n","protected":false},"author":73,"featured_media":15595,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[390],"tags":[460,54,163],"class_list":["post-15505","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website-shop","tag-css","tag-webshop","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 \u2013 een stylesheet maken - STRATO blogt<\/title>\n<meta name=\"description\" content=\"CSS in de praktijk: Hoe maak je zelf een CSS-stylesheet en hoe koppel je dit externe stylesheet aan jouw website?\" \/>\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-een-stylesheet-maken\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS voor beginners \u2013 een stylesheet maken - STRATO blogt\" \/>\n<meta property=\"og:description\" content=\"CSS in de praktijk: Hoe maak je zelf een CSS-stylesheet en hoe koppel je dit externe stylesheet aan jouw website?\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.strato.nl\/blog\/css-voor-beginners-een-stylesheet-maken\/\" \/>\n<meta property=\"og:site_name\" content=\"STRATO blogt\" \/>\n<meta property=\"article:published_time\" content=\"2020-01-21T12:35:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-12-21T15:38:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2020\/01\/STRATO_Beitragsbild_Stylesheet_728x410.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"728\" \/>\n\t<meta property=\"og:image:height\" content=\"410\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Oliver Meiners\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Geschreven door\" \/>\n\t<meta name=\"twitter:data1\" content=\"Oliver Meiners\" \/>\n\t<meta name=\"twitter:label2\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 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-een-stylesheet-maken\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.strato.nl\/blog\/css-voor-beginners-een-stylesheet-maken\/\"},\"author\":{\"name\":\"Oliver Meiners\",\"@id\":\"https:\/\/www.strato.nl\/blog\/#\/schema\/person\/bccec2bc7698ee5771ec36d92df32eeb\"},\"headline\":\"CSS voor beginners \u2013 een stylesheet maken\",\"datePublished\":\"2020-01-21T12:35:50+00:00\",\"dateModified\":\"2022-12-21T15:38:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.strato.nl\/blog\/css-voor-beginners-een-stylesheet-maken\/\"},\"wordCount\":753,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.strato.nl\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.strato.nl\/blog\/css-voor-beginners-een-stylesheet-maken\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2020\/01\/STRATO_Beitragsbild_Stylesheet_728x410.jpg\",\"keywords\":[\"CSS\",\"Webshop\",\"Website\"],\"articleSection\":[\"Website &amp; Shop\"],\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.strato.nl\/blog\/css-voor-beginners-een-stylesheet-maken\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.strato.nl\/blog\/css-voor-beginners-een-stylesheet-maken\/\",\"url\":\"https:\/\/www.strato.nl\/blog\/css-voor-beginners-een-stylesheet-maken\/\",\"name\":\"CSS voor beginners \u2013 een stylesheet maken - STRATO blogt\",\"isPartOf\":{\"@id\":\"https:\/\/www.strato.nl\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.strato.nl\/blog\/css-voor-beginners-een-stylesheet-maken\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.strato.nl\/blog\/css-voor-beginners-een-stylesheet-maken\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2020\/01\/STRATO_Beitragsbild_Stylesheet_728x410.jpg\",\"datePublished\":\"2020-01-21T12:35:50+00:00\",\"dateModified\":\"2022-12-21T15:38:43+00:00\",\"description\":\"CSS in de praktijk: Hoe maak je zelf een CSS-stylesheet en hoe koppel je dit externe stylesheet aan jouw website?\",\"breadcrumb\":{\"@id\":\"https:\/\/www.strato.nl\/blog\/css-voor-beginners-een-stylesheet-maken\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.strato.nl\/blog\/css-voor-beginners-een-stylesheet-maken\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/www.strato.nl\/blog\/css-voor-beginners-een-stylesheet-maken\/#primaryimage\",\"url\":\"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2020\/01\/STRATO_Beitragsbild_Stylesheet_728x410.jpg\",\"contentUrl\":\"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2020\/01\/STRATO_Beitragsbild_Stylesheet_728x410.jpg\",\"width\":728,\"height\":410},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.strato.nl\/blog\/css-voor-beginners-een-stylesheet-maken\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.strato.nl\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS voor beginners \u2013 een stylesheet maken\"}]},{\"@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\/bccec2bc7698ee5771ec36d92df32eeb\",\"name\":\"Oliver Meiners\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/www.strato.nl\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.strato.de\/blog\/wp-content\/uploads\/2020\/11\/kap-St-26600_square_Original.jpg\",\"contentUrl\":\"https:\/\/www.strato.de\/blog\/wp-content\/uploads\/2020\/11\/kap-St-26600_square_Original.jpg\",\"caption\":\"Oliver Meiners\"},\"url\":\"https:\/\/www.strato.nl\/blog\/author\/oliver-meiners-pr-blog\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS voor beginners \u2013 een stylesheet maken - STRATO blogt","description":"CSS in de praktijk: Hoe maak je zelf een CSS-stylesheet en hoe koppel je dit externe stylesheet aan jouw website?","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-een-stylesheet-maken\/","og_locale":"nl_NL","og_type":"article","og_title":"CSS voor beginners \u2013 een stylesheet maken - STRATO blogt","og_description":"CSS in de praktijk: Hoe maak je zelf een CSS-stylesheet en hoe koppel je dit externe stylesheet aan jouw website?","og_url":"https:\/\/www.strato.nl\/blog\/css-voor-beginners-een-stylesheet-maken\/","og_site_name":"STRATO blogt","article_published_time":"2020-01-21T12:35:50+00:00","article_modified_time":"2022-12-21T15:38:43+00:00","og_image":[{"width":728,"height":410,"url":"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2020\/01\/STRATO_Beitragsbild_Stylesheet_728x410.jpg","type":"image\/jpeg"}],"author":"Oliver Meiners","twitter_card":"summary_large_image","twitter_misc":{"Geschreven door":"Oliver Meiners","Geschatte leestijd":"4 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.strato.nl\/blog\/css-voor-beginners-een-stylesheet-maken\/#article","isPartOf":{"@id":"https:\/\/www.strato.nl\/blog\/css-voor-beginners-een-stylesheet-maken\/"},"author":{"name":"Oliver Meiners","@id":"https:\/\/www.strato.nl\/blog\/#\/schema\/person\/bccec2bc7698ee5771ec36d92df32eeb"},"headline":"CSS voor beginners \u2013 een stylesheet maken","datePublished":"2020-01-21T12:35:50+00:00","dateModified":"2022-12-21T15:38:43+00:00","mainEntityOfPage":{"@id":"https:\/\/www.strato.nl\/blog\/css-voor-beginners-een-stylesheet-maken\/"},"wordCount":753,"commentCount":0,"publisher":{"@id":"https:\/\/www.strato.nl\/blog\/#organization"},"image":{"@id":"https:\/\/www.strato.nl\/blog\/css-voor-beginners-een-stylesheet-maken\/#primaryimage"},"thumbnailUrl":"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2020\/01\/STRATO_Beitragsbild_Stylesheet_728x410.jpg","keywords":["CSS","Webshop","Website"],"articleSection":["Website &amp; Shop"],"inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.strato.nl\/blog\/css-voor-beginners-een-stylesheet-maken\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.strato.nl\/blog\/css-voor-beginners-een-stylesheet-maken\/","url":"https:\/\/www.strato.nl\/blog\/css-voor-beginners-een-stylesheet-maken\/","name":"CSS voor beginners \u2013 een stylesheet maken - STRATO blogt","isPartOf":{"@id":"https:\/\/www.strato.nl\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.strato.nl\/blog\/css-voor-beginners-een-stylesheet-maken\/#primaryimage"},"image":{"@id":"https:\/\/www.strato.nl\/blog\/css-voor-beginners-een-stylesheet-maken\/#primaryimage"},"thumbnailUrl":"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2020\/01\/STRATO_Beitragsbild_Stylesheet_728x410.jpg","datePublished":"2020-01-21T12:35:50+00:00","dateModified":"2022-12-21T15:38:43+00:00","description":"CSS in de praktijk: Hoe maak je zelf een CSS-stylesheet en hoe koppel je dit externe stylesheet aan jouw website?","breadcrumb":{"@id":"https:\/\/www.strato.nl\/blog\/css-voor-beginners-een-stylesheet-maken\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.strato.nl\/blog\/css-voor-beginners-een-stylesheet-maken\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/www.strato.nl\/blog\/css-voor-beginners-een-stylesheet-maken\/#primaryimage","url":"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2020\/01\/STRATO_Beitragsbild_Stylesheet_728x410.jpg","contentUrl":"https:\/\/www.strato.nl\/blog\/wp-content\/uploads\/sites\/2\/2020\/01\/STRATO_Beitragsbild_Stylesheet_728x410.jpg","width":728,"height":410},{"@type":"BreadcrumbList","@id":"https:\/\/www.strato.nl\/blog\/css-voor-beginners-een-stylesheet-maken\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.strato.nl\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS voor beginners \u2013 een stylesheet maken"}]},{"@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\/bccec2bc7698ee5771ec36d92df32eeb","name":"Oliver Meiners","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/www.strato.nl\/blog\/#\/schema\/person\/image\/","url":"https:\/\/www.strato.de\/blog\/wp-content\/uploads\/2020\/11\/kap-St-26600_square_Original.jpg","contentUrl":"https:\/\/www.strato.de\/blog\/wp-content\/uploads\/2020\/11\/kap-St-26600_square_Original.jpg","caption":"Oliver Meiners"},"url":"https:\/\/www.strato.nl\/blog\/author\/oliver-meiners-pr-blog\/"}]}},"_links":{"self":[{"href":"https:\/\/www.strato.nl\/blog\/wp-json\/wp\/v2\/posts\/15505","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\/73"}],"replies":[{"embeddable":true,"href":"https:\/\/www.strato.nl\/blog\/wp-json\/wp\/v2\/comments?post=15505"}],"version-history":[{"count":31,"href":"https:\/\/www.strato.nl\/blog\/wp-json\/wp\/v2\/posts\/15505\/revisions"}],"predecessor-version":[{"id":34717,"href":"https:\/\/www.strato.nl\/blog\/wp-json\/wp\/v2\/posts\/15505\/revisions\/34717"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.strato.nl\/blog\/wp-json\/wp\/v2\/media\/15595"}],"wp:attachment":[{"href":"https:\/\/www.strato.nl\/blog\/wp-json\/wp\/v2\/media?parent=15505"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.strato.nl\/blog\/wp-json\/wp\/v2\/categories?post=15505"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.strato.nl\/blog\/wp-json\/wp\/v2\/tags?post=15505"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}