{"id":6862,"date":"2022-05-08T15:20:13","date_gmt":"2022-05-08T15:20:13","guid":{"rendered":"https:\/\/www.terluinwebdesign.nl\/en\/?p=6862"},"modified":"2025-07-18T14:49:09","modified_gmt":"2025-07-18T14:49:09","slug":"frequently-asked-css-questions","status":"publish","type":"post","link":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/frequently-asked-css-questions\/","title":{"rendered":"Frequently asked CSS questions"},"content":{"rendered":"<pre><prevent-autop><div class=\"row all d__content-in-narrow-container t__content-in-container m__content-in-container\" data-cache-vw-d=\"1512\" data-cache-h-d=\"6282.2265625\" data-cache-vw-t=\"617\" data-cache-h-t=\"5421.0390625\" data-cache-vw-m=\"462\" data-cache-h-m=\"12961.125\"><div class=\"col all faq-page\" itemscope=\"\" itemtype=\"https:\/\/schema.org\/FAQPage\"><p>This post covers questions about CSS which do not need a separate post to be answered.<\/p><aside class=\"row all bg-yellow__light v-center h-center c half-row-gap d__pad-top-s t__pad-top-m m__pad-top-m d__pad-bottom-s t__pad-bottom-m m__pad-bottom-m d__in-narrow-container wrap t__vertical m__vertical t__in-container m__in-container\" data-cache-vw-d=\"1512\" data-cache-h-d=\"80.203125\" data-cache-vw-t=\"617\" data-cache-h-t=\"116.9375\" data-cache-vw-m=\"462\" data-cache-h-m=\"247.125\"><div class=\"col all d__mar-right-0 d__mar-bottom-0 t__mar-bottom-s m__mar-bottom-s\"><p class=\"wrap-balance anim-fade-in\"><b class=\"h6-size\">Professional AI-built website, no setup costs, for only \u20ac49\/month<\/b><\/p><\/div><div class=\"col all mar-bottom-0 w-auto\"><a class=\"button anim-fade-in bor-pitch-black__light txt-pitch-black-hover__light bg-transparent-hover__light bor-pitch-black-hover__light bg-pitch-black__light txt-yellow__light bg-pitch-black__dark txt-yellow__dark bor-pitch-black__dark bg-transparent-hover__dark txt-pitch-black-hover__dark bor-pitch-black-hover__dark d__h6-size t__h6-size w-auto pad-left-s pad-right-s pad-bottom-xs pad-top-xs\" href=\"https:\/\/www.terluinwebdesign.nl\/en\/ai-website-builder\/\"><span>AI Site Builder<\/span><\/a><\/div><\/aside><h2>What ...?<\/h2><div class=\"row all vertical\"><div class=\"col all question\" itemscope=\"\" itemprop=\"mainEntity\" itemtype=\"https:\/\/schema.org\/Question\"><details class=\"accordion\" data-open=\"true\" open=\"\" data-open-by-default=\"\"><summary class=\"h3\"><div class=\"question-text\" itemprop=\"name\"><h3>What is CSS?<\/h3><\/div><\/summary><div class=\"answer\" itemscope=\"\" itemprop=\"acceptedAnswer\" itemtype=\"https:\/\/schema.org\/Answer\"><div class=\"answer-text\" itemprop=\"text\"><p><dfn><abbr title=\"Cascading Style Sheets\">CSS<\/abbr><\/dfn> is a style sheet language used to style documents written in markup languages such as <abbr title=\"HyperText Markup Language\">HTML<\/abbr> and <abbr title=\"Extensible Markup Language\">XML<\/abbr>. CSS is developed by <abbr title=\"World Wide Web Consortium\">W3C<\/abbr>, an organization that develops the standards for the web, such as HTML, <abbr title=\"Extensible HyperText Markup Language\">XHTML<\/abbr>, XML, and CSS.<\/p><\/div><\/div><\/details><\/div><div class=\"col all question\" itemscope=\"\" itemprop=\"mainEntity\" itemtype=\"https:\/\/schema.org\/Question\"><details class=\"accordion\" data-open=\"true\" open=\"\" data-open-by-default=\"\"><summary class=\"h3\"><div class=\"question-text\" itemprop=\"name\"><h3>What is em?<\/h3><\/div><\/summary><div class=\"answer\" itemscope=\"\" itemprop=\"acceptedAnswer\" itemtype=\"https:\/\/schema.org\/Answer\"><div class=\"answer-text\" itemprop=\"text\"><p><dfn>em<\/dfn> is a CSS unit relative to an element's current font size.<\/p><\/div><\/div><\/details><\/div><div class=\"col all question\" itemscope=\"\" itemprop=\"mainEntity\" itemtype=\"https:\/\/schema.org\/Question\"><details class=\"accordion\" data-open=\"true\" open=\"\" data-open-by-default=\"\"><summary class=\"h3\"><div class=\"question-text\" itemprop=\"name\"><h3>What is rem?<\/h3><\/div><\/summary><div class=\"answer\" itemscope=\"\" itemprop=\"acceptedAnswer\" itemtype=\"https:\/\/schema.org\/Answer\"><div class=\"answer-text\" itemprop=\"text\"><p><dfn>rem<\/dfn> is a CSS unit relative to the root font size of the document (<code>&lt;html&gt;<\/code>).<\/p><\/div><\/div><\/details><\/div><div class=\"col all question\" itemscope=\"\" itemprop=\"mainEntity\" itemtype=\"https:\/\/schema.org\/Question\"><details class=\"accordion\" data-open=\"false\" data-open-by-default=\"\"><summary class=\"h3\"><div class=\"question-text\" itemprop=\"name\"><h3>What is vh?<\/h3><\/div><\/summary><div class=\"answer\" itemscope=\"\" itemprop=\"acceptedAnswer\" itemtype=\"https:\/\/schema.org\/Answer\"><div class=\"answer-text\" itemprop=\"text\"><p><dfn>vh<\/dfn> is a CSS unit relative to the viewport's height. More information about <a href=\"https:\/\/www.terluinwebdesign.nl\/en\/css\/incoming-20-new-css-viewport-units-svh-lvh-dvh-svw-lvw-dvw\/#dt-vh\" target=\"_blank\" rel=\"noopener\">CSS unit vh<\/a>.<\/p><\/div><\/div><\/details><\/div><div class=\"col all question\" itemscope=\"\" itemprop=\"mainEntity\" itemtype=\"https:\/\/schema.org\/Question\"><details class=\"accordion\" data-open=\"true\" open=\"\" data-open-by-default=\"\"><summary class=\"h3\"><div class=\"question-text\" itemprop=\"name\"><h3>What is fr?<\/h3><\/div><\/summary><div class=\"answer\" itemscope=\"\" itemprop=\"acceptedAnswer\" itemtype=\"https:\/\/schema.org\/Answer\"><div class=\"answer-text\" itemprop=\"text\"><p><dfn>fr<\/dfn> is a CSS unit that represents a fraction. This unit is used in grid layouts exclusively.<\/p><p>The unit's value depends on the total fractions inside property values such as grid-template-columns, which can use CSS functions such as <code class=\"css-code\">repeat()<\/code>. Here is an example:<\/p><tw-pre><code class=\"css-code\">.container {<br>&nbsp; grid-template-columns: 300px 1fr 2fr;<br>}<\/code><\/tw-pre><p>In the example above, <code class=\"css-code\">1fr<\/code> is equal to the container's width minus <code class=\"css-code\">300px<\/code> divided by 3. The first grid item takes up <code class=\"css-code\">300px<\/code>, the second takes up 1 fraction and the third takes up 2.<\/p><p>This means that there are 3 fractions taking up the space thats left for the last two items.<\/p><p>The example above can also be written in the following, less ideal way:<\/p><tw-pre><code class=\"css-code\">.container {\r\n  grid-template-columns: 300px calc((100% - 300px) \/ 3) calc((100% - 300px) \/ 3 * 2);\r\n}<\/code><\/tw-pre><\/div><\/div><\/details><\/div><div class=\"col all question\" itemscope=\"\" itemprop=\"mainEntity\" itemtype=\"https:\/\/schema.org\/Question\"><details class=\"accordion\" data-open=\"true\" open=\"\" data-open-by-default=\"\"><summary class=\"h3\"><div class=\"question-text\" itemprop=\"name\"><h3>What is padding?<\/h3><\/div><\/summary><div class=\"answer\" itemscope=\"\" itemprop=\"acceptedAnswer\" itemtype=\"https:\/\/schema.org\/Answer\"><div class=\"answer-text\" itemprop=\"text\"><p><dfn>Padding<\/dfn> is a CSS property that determines the space between the content of an element and it's border. Padding can be applied using a shorthand, simply called <code class=\"css-code\">padding<\/code>, which consists of the following properties in the following, clockwise order:<\/p><ol><li><code class=\"css-code\">padding-top<\/code><\/li><li><code class=\"css-code\">padding-right<\/code><\/li><li><code class=\"css-code\">padding-bottom<\/code><\/li><li><code class=\"css-code\">padding-left<\/code><\/li><\/ol><p>As you might know, buttons have spacing between it's border and the text: it's padding.<\/p><p>Besides these properties, there are lesser known properties such as padding-block-end. These properties are beyond the scope of this post.<\/p><\/div><\/div><\/details><\/div><div class=\"col all question\" itemscope=\"\" itemprop=\"mainEntity\" itemtype=\"https:\/\/schema.org\/Question\"><details class=\"accordion\" data-open=\"true\" open=\"\" data-open-by-default=\"\"><summary class=\"h3\"><div class=\"question-text\" itemprop=\"name\"><h3>What is WebKit?<\/h3><\/div><\/summary><div class=\"answer\" itemscope=\"\" itemprop=\"acceptedAnswer\" itemtype=\"https:\/\/schema.org\/Answer\"><div class=\"answer-text\" itemprop=\"text\"><p><dfn>WebKit<\/dfn> is a web browser engine used by Safari. You might stumble accross <code class=\"css-code\">-webkit-<\/code> as a prefix for non-standard CSS properties or for the sake of compatibility with older browsers.<\/p><\/div><\/div><\/details><\/div><div class=\"col all question\" itemscope=\"\" itemprop=\"mainEntity\" itemtype=\"https:\/\/schema.org\/Question\"><details class=\"accordion\" data-open=\"true\" open=\"\" data-open-by-default=\"\"><summary class=\"h3\"><div class=\"question-text\" itemprop=\"name\"><h3>What is overflow?<\/h3><\/div><\/summary><div class=\"answer\" itemscope=\"\" itemprop=\"acceptedAnswer\" itemtype=\"https:\/\/schema.org\/Answer\"><div class=\"answer-text\" itemprop=\"text\"><p><em>overflow<\/em> is a CSS property that determines what happens to content that overflows a container. The most common use case for setting this property is to hide the overflowing content, to prevent horizontal scrolling on the entire web page.<\/p><p>An element can overflow it's container either by having either value <code class=\"css-code\">absolute<\/code>, <code class=\"css-code\">relative<\/code>, <code class=\"css-code\">sticky<\/code> or <code class=\"css-code\">fixed<\/code> for property <code class=\"css-code\">position<\/code>, a negative <code class=\"css-code\">margin<\/code> value, or by using CSS property <code class=\"CSS\">transform<\/code>.<\/p><p>CSS property <code class=\"css-code\">overflow<\/code> is a shorthand property for <code class=\"css-code\">overflow-x<\/code> and <code class=\"css-code\">overflow-y<\/code>&nbsp;with values:<\/p><ul><li><dfn class=\"code css-code\">auto<\/dfn> shows a scrollbar only if an element overflows the container.<\/li><li><dfn class=\"code css-code\">clip<\/dfn> clips the content. This value allows property <code class=\"css-code\">overflow-clip-margin<\/code> to determine how much an element can overflow the container before it gets clipped.<\/li><li><dfn class=\"code css-code\">hidden<\/dfn> hides the content, just like <code class=\"css-code\">clip<\/code>, but allows programmatic scrolling (unlike <code class=\"css-code\">clip<\/code>)<\/li><li><dfn class=\"code css-code\">overlay<\/dfn> is a value only supported by WebKit browsers and allows the content to extend beneath the scrollbar (the scrollbar overlays the content). This value is non-standardized.<\/li><li><dfn class=\"code css-code\">scroll<\/dfn> always shows a scrollbar, even if the container does not contain element that overflow it.<\/li><li><dfn class=\"code css-code\">visible<\/dfn> allows elements to overflow it's container without getting clipped or hidden at all.<\/li><\/ul><\/div><\/div><\/details><\/div><div class=\"col all question\" itemscope=\"\" itemprop=\"mainEntity\" itemtype=\"https:\/\/schema.org\/Question\"><details class=\"accordion\" data-open=\"true\" open=\"\" data-open-by-default=\"\"><summary class=\"h3\"><div class=\"question-text\" itemprop=\"name\"><h3>What is box-sizing: border-box?<\/h3><\/div><\/summary><div class=\"answer\" itemscope=\"\" itemprop=\"acceptedAnswer\" itemtype=\"https:\/\/schema.org\/Answer\"><div class=\"answer-text\" itemprop=\"text\"><p><em>box-sizing: border-box<\/em>&nbsp;is a CSS declaration that makes sure that any dimension-related CSS property takes the border, padding and content into account (the border-box).<\/p><p>If a box has a <code class=\"css-code\">border<\/code> of <code class=\"css-code\">1px<\/code> thick, <code class=\"css-code\">30px<\/code> of <code class=\"css-code\">padding<\/code> overal, and a declared <code class=\"css-code\">width<\/code> of <code class=\"css-code\">500px<\/code>, then it's content would have <code class=\"css-code\">438px<\/code> of space horizontally (<code class=\"css-code\">500px - 30px - 30px - 1px - 1px<\/code>) if property <code class=\"css-code\">box-sizing<\/code> is set to value <code class=\"css-code\">border-box<\/code>.<\/p><\/div><\/div><\/details><\/div><div class=\"col all question\" itemscope=\"\" itemprop=\"mainEntity\" itemtype=\"https:\/\/schema.org\/Question\"><details class=\"accordion\" data-open=\"true\" open=\"\" data-open-by-default=\"\"><summary class=\"h3\"><div class=\"question-text\" itemprop=\"name\"><h3>What is ::before and ::after?<\/h3><\/div><\/summary><div class=\"answer\" itemscope=\"\" itemprop=\"acceptedAnswer\" itemtype=\"https:\/\/schema.org\/Answer\"><div class=\"answer-text\" itemprop=\"text\"><p><em>::before<\/em>&nbsp;and&nbsp;<em>::after<\/em>&nbsp;are CSS pseudo-elements, which are basically elements that are inserted by CSS. They rely on the <code class=\"css-code\">content<\/code> property that allows a string value to display text.<\/p><p>More often than not these pseudo-elements are used to show icons by using a Unicode character that shows an icon as defined in a font file (by Font Awesome for instance).<\/p><p>An interesting feature of <code class=\"css-code\">::before<\/code> and <code class=\"css-code\">::after<\/code> is the use of function <code class=\"css-code\">attr()<\/code> which reads the value of an HTML attribute to be used for the content of the pseudo-element, like this:<\/p><tw-pre><code class=\"css-code\">td::before {\r\n  content: attr(data-title);\r\n}<\/code><\/tw-pre><p>Although this example shows a <code class=\"css-code\">data-*<\/code> attribute, regular attributes are also supported.<\/p><\/div><\/div><\/details><\/div><\/div><h2>How ... ?<\/h2><div class=\"row all vertical\"><div class=\"col all question\" itemscope=\"\" itemprop=\"mainEntity\" itemtype=\"https:\/\/schema.org\/Question\"><details class=\"accordion\" data-open=\"true\" open=\"\" data-open-by-default=\"\"><summary class=\"h3\"><div class=\"question-text\" itemprop=\"name\"><h3>How to center an image?<\/h3><\/div><\/summary><div class=\"answer\" itemscope=\"\" itemprop=\"acceptedAnswer\" itemtype=\"https:\/\/schema.org\/Answer\"><div class=\"answer-text\" itemprop=\"text\"><p>Assuming your image's <code class=\"css-code\">display<\/code> value is <code class=\"css-code\">inline-block<\/code>, you can center it by applying <code class=\"css-code\">text-align: center<\/code> to it's parent element. This centers all text and all elements with a value of either <code class=\"css-code\">inline<\/code>, <code class=\"css-code\">inline-block<\/code>, <code class=\"css-code\">inline-flex<\/code>, etc for property <code class=\"css-code\">display<\/code>, inside the image's parent element.<\/p><p>If you only want to center the image, consider wrapping it in a <code>&lt;div&gt;<\/code>-element or applying <code class=\"css-code\">display: block<\/code> and a specified <code class=\"CSS\">width<\/code> (<code class=\"css-code\">50%<\/code>, <code class=\"css-code\">300px<\/code>, etc) if the image's <a href=\"https:\/\/www.terluinwebdesign.nl\/en\/css\/calculating-contain-intrinsic-size-for-content-visibility\/#-rendered-size-vs-intrinsic-size\" target=\"_blank\" rel=\"noopener\">intrinsic<\/a> width is larger or equal to it's parent's rendered width.<\/p><\/div><\/div><\/details><\/div><div class=\"col all question\" itemscope=\"\" itemprop=\"mainEntity\" itemtype=\"https:\/\/schema.org\/Question\"><details class=\"accordion\" data-open=\"true\" open=\"\" data-open-by-default=\"\"><summary class=\"h3\"><div class=\"question-text\" itemprop=\"name\"><h3>How to center a div?<\/h3><\/div><\/summary><div class=\"answer\" itemscope=\"\" itemprop=\"acceptedAnswer\" itemtype=\"https:\/\/schema.org\/Answer\"><div class=\"answer-text\" itemprop=\"text\"><p>There are multiple ways to center a <span class=\"code css-code\">&lt;div&gt;<\/span>-element. Each situation has it's own approach:<\/p><p>If your <code>&lt;div&gt;<\/code>-element has a specified width (<code class=\"css-code\">50%<\/code>, <code class=\"css-code\">500px<\/code>, etc) and is a block-element (<code class=\"css-code\">display: block<\/code>, <code class=\"css-code\">display: table<\/code>, <code class=\"css-code\">display: flex<\/code>, etc), then use <code class=\"css-code\">margin-left: auto<\/code> and <code class=\"css-code\">margin-right: auto<\/code>.<\/p><p>If your <code>&lt;div&gt;<\/code>-element does not have a specified width (<code class=\"css-code\">auto<\/code>) then wrap the&nbsp;<code>&lt;div&gt;<\/code>-element inside of a new&nbsp;<code>&lt;div&gt;<\/code>-element and apply&nbsp;<code>display: flex<\/code>&nbsp;and&nbsp;<code>justify-content: center<\/code>&nbsp;to that new&nbsp;<code>&lt;div&gt;<\/code>-element. If your &lt;div&gt;-element is inside of a flexbox (display: flex), then you can also center it by using <code class=\"css-code\">margin-left: auto<\/code> and <code class=\"css-code\">margin-right: auto<\/code>.<\/p><\/div><\/div><\/details><\/div><div class=\"col all question\" itemscope=\"\" itemprop=\"mainEntity\" itemtype=\"https:\/\/schema.org\/Question\"><details class=\"accordion\" data-open=\"true\" open=\"\" data-open-by-default=\"\"><summary class=\"h3\"><div class=\"question-text\" itemprop=\"name\"><h3>How to center text?<\/h3><\/div><\/summary><div class=\"answer\" itemscope=\"\" itemprop=\"acceptedAnswer\" itemtype=\"https:\/\/schema.org\/Answer\"><div class=\"answer-text\" itemprop=\"text\"><p>Apply <code class=\"css-code\">text-align: center<\/code> to the element containing the text, for instance a <code>&lt;p&gt;<\/code>-element.<\/p><\/div><\/div><\/details><\/div><div class=\"col all question\" itemscope=\"\" itemprop=\"mainEntity\" itemtype=\"https:\/\/schema.org\/Question\"><details class=\"accordion\" data-open=\"true\" open=\"\" data-open-by-default=\"\"><summary class=\"h3\"><div class=\"question-text\" itemprop=\"name\"><h3>How to remove underline from link?<\/h3><\/div><\/summary><div class=\"answer\" itemscope=\"\" itemprop=\"acceptedAnswer\" itemtype=\"https:\/\/schema.org\/Answer\"><div class=\"answer-text\" itemprop=\"text\"><p>Apply <code class=\"css-code\">text-decoration: none<\/code> to the hyperlink (<code>&lt;a&gt;<\/code>-element).<\/p><\/div><\/div><\/details><\/div><div class=\"col all question\" itemscope=\"\" itemprop=\"mainEntity\" itemtype=\"https:\/\/schema.org\/Question\"><details class=\"accordion\" data-open=\"true\" open=\"\" data-open-by-default=\"\"><summary class=\"h3\"><div class=\"question-text\" itemprop=\"name\"><h3>How to change font?<\/h3><\/div><\/summary><div class=\"answer\" itemscope=\"\" itemprop=\"acceptedAnswer\" itemtype=\"https:\/\/schema.org\/Answer\"><div class=\"answer-text\" itemprop=\"text\"><p>Pick a font in <a href=\"https:\/\/fonts.google.com\/\" target=\"_blank\" rel=\"noopener\">Google Fonts<\/a>. Click on <em>Select this style<\/em> for each style of the font you want to use. Copy the HTML-code in the sidebar and paste it in your <code>&lt;head&gt;<\/code>-element. Copy the CSS rules in the sidebar and apply them to the body to set the font for the whole document, or apply it to certain elements such as headings (<code>&lt;h1&gt;<\/code> through <code>&lt;h6&gt;<\/code>).<\/p><\/div><\/div><\/details><\/div><div class=\"col all question\" itemscope=\"\" itemprop=\"mainEntity\" itemtype=\"https:\/\/schema.org\/Question\"><details class=\"accordion\" data-open=\"true\" open=\"\" data-open-by-default=\"\"><summary class=\"h3\"><div class=\"question-text\" itemprop=\"name\"><h3>How to change text color?<\/h3><\/div><\/summary><div class=\"answer\" itemscope=\"\" itemprop=\"acceptedAnswer\" itemtype=\"https:\/\/schema.org\/Answer\"><div class=\"answer-text\" itemprop=\"text\"><p>To set the text color for the whole document, apply <code class=\"css-code\">color<\/code> to the <code>&lt;body&gt;<\/code>-element like this:<\/p><tw-pre><code class=\"css-code\">body {\r\n  color: #333333;\r\n}<\/code><\/tw-pre><p>Elements such as paragraphs and headings inherit this color, so you do not have to apply the text color to them specifically. That's how CSS works: inheriting from parent elements.<\/p><\/div><\/div><\/details><\/div><div class=\"col all question\" itemscope=\"\" itemprop=\"mainEntity\" itemtype=\"https:\/\/schema.org\/Question\"><details class=\"accordion\" data-open=\"true\" open=\"\" data-open-by-default=\"\"><summary class=\"h3\"><div class=\"question-text\" itemprop=\"name\"><h3>How to change background color?<\/h3><\/div><\/summary><div class=\"answer\" itemscope=\"\" itemprop=\"acceptedAnswer\" itemtype=\"https:\/\/schema.org\/Answer\"><div class=\"answer-text\" itemprop=\"text\"><p>To change the background color of the <code>&lt;body&gt;<\/code>-element (as an example), you apply <code class=\"css-code\">background-color<\/code> to the <code>&lt;body&gt;<\/code>-element element like this:<\/p><tw-pre><code class=\"css-code\">body {\r\n  background-color: #f2f2f2;\r\n}<\/code><\/tw-pre><\/div><\/div><\/details><\/div><div class=\"col all question\" itemscope=\"\" itemprop=\"mainEntity\" itemtype=\"https:\/\/schema.org\/Question\"><details class=\"accordion\" data-open=\"true\" open=\"\" data-open-by-default=\"\"><summary class=\"h3\"><div class=\"question-text\" itemprop=\"name\"><h3>How to make text bold?<\/h3><\/div><\/summary><div class=\"answer\" itemscope=\"\" itemprop=\"acceptedAnswer\" itemtype=\"https:\/\/schema.org\/Answer\"><div class=\"answer-text\" itemprop=\"text\"><p>If the text that you want to make bold is considered important text, you should wrap it inside of a <code>&lt;strong&gt;<\/code>-element. If the text is not important, but you want to make it bold anyways, wrap it in a <code>&lt;b&gt;<\/code>-element.<\/p><p>If you want to make certain elements bold using CSS, you can do so by applying&nbsp;<code>font-weight: bold<\/code>&nbsp;on them. Property&nbsp;<code>font-weight<\/code>&nbsp;uses the following values to set the weight:<\/p><ul><li><code class=\"css-code\">100<\/code> (thin)<\/li><li><code class=\"css-code\">200<\/code> (extra light)<\/li><li><code class=\"css-code\">300<\/code> (light)<\/li><li><code class=\"css-code\">400<\/code> (regular)<\/li><li><code class=\"css-code\">500<\/code> (medium)<\/li><li><code class=\"css-code\">600<\/code> (semi bold)<\/li><li><code class=\"css-code\">700<\/code> (bold)<\/li><li><code class=\"css-code\">800<\/code> (extra bold)<\/li><li><code class=\"css-code\">900<\/code> (black)<\/li><\/ul><p>Not all fonts support all weights, so be sure to look into the styles that they support. Popular font Roboto, for instance, does not support weight 600 (semi bold).<\/p><\/div><\/div><\/details><\/div><div class=\"col all question\" itemscope=\"\" itemprop=\"mainEntity\" itemtype=\"https:\/\/schema.org\/Question\"><details class=\"accordion\" data-open=\"true\" open=\"\" data-open-by-default=\"\"><summary class=\"h3\"><div class=\"question-text\" itemprop=\"name\"><h3>How to center a button?<\/h3><\/div><\/summary><div class=\"answer\" itemscope=\"\" itemprop=\"acceptedAnswer\" itemtype=\"https:\/\/schema.org\/Answer\"><div class=\"answer-text\" itemprop=\"text\"><p>Assuming your button's <code class=\"css-code\">display<\/code> value is either <code class=\"css-code\">inline-block<\/code> or <code class=\"css-code\">inline-flex<\/code>, you should apply <code class=\"css-code\">text-align: center<\/code> to the button's parent element. This causes all text and inline elements to be centered within the button's parent element.<\/p><p>If you want to center only the button, you should wrap the button inside a new <code>&lt;div&gt;<\/code>-element and apply <code class=\"css-code\">text-align: center<\/code> to that new <code>&lt;div&gt;<\/code>-element.<\/p><\/div><\/div><\/details><\/div><\/div><h2>Why ... ?<\/h2><div class=\"row all vertical\"><div class=\"col all question\" itemscope=\"\" itemprop=\"mainEntity\" itemtype=\"https:\/\/schema.org\/Question\"><details class=\"accordion\" data-open=\"true\" open=\"\" data-open-by-default=\"\"><summary class=\"h3\"><div class=\"question-text\" itemprop=\"name\"><h3>Why is there a gap between inline blocks?<\/h3><\/div><\/summary><div class=\"answer\" itemscope=\"\" itemprop=\"acceptedAnswer\" itemtype=\"https:\/\/schema.org\/Answer\"><div class=\"answer-text\" itemprop=\"text\"><p>It's because there is probably whitespace between your <code>&lt;div&gt;<\/code>-elements while you were writing the HTML code. This whitespace is placed inline, just like inline blocks.<\/p><p>Just like inline elements such as <code>&lt;strong&gt;<\/code>, <code>&lt;a&gt;<\/code>, and <code>&lt;em&gt;<\/code> are used in paragraphs to style text, inline blocks can also be used inside paragraphs and are also affected by whitespace.<\/p><\/div><\/div><\/details><\/div><div class=\"col all question\" itemscope=\"\" itemprop=\"mainEntity\" itemtype=\"https:\/\/schema.org\/Question\"><details class=\"accordion\" data-open=\"true\" open=\"\" data-open-by-default=\"\"><summary class=\"h3\"><div class=\"question-text\" itemprop=\"name\"><h3>Why is border not showing?<\/h3><\/div><\/summary><div class=\"answer\" itemscope=\"\" itemprop=\"acceptedAnswer\" itemtype=\"https:\/\/schema.org\/Answer\"><div class=\"answer-text\" itemprop=\"text\"><p>In order for a border to be shown, it needs the following properties:<\/p><ol><li><code class=\"css-code\">border-width<\/code> with a value larger than <code class=\"css-code\">0px<\/code><\/li><li><code class=\"css-code\">border-style<\/code> with a value other than <code class=\"css-code\">none<\/code><\/li><li><code class=\"css-code\">border-color<\/code> with a value other than <code class=\"css-code\">transparent<\/code><\/li><\/ol><p>There are also elements that do not support borders, such as <code>&lt;tr&gt;<\/code>-elements (table rows).<\/p><\/div><\/div><\/details><\/div><div class=\"col all question\" itemscope=\"\" itemprop=\"mainEntity\" itemtype=\"https:\/\/schema.org\/Question\"><details class=\"accordion\" data-open=\"true\" open=\"\" data-open-by-default=\"\"><summary class=\"h3\"><div class=\"question-text\" itemprop=\"name\"><h3>Why are my divs overlapping?<\/h3><\/div><\/summary><div class=\"answer\" itemscope=\"\" itemprop=\"acceptedAnswer\" itemtype=\"https:\/\/schema.org\/Answer\"><div class=\"answer-text\" itemprop=\"text\"><p>There are multiple causes for this, the most common cause is because of using <code class=\"css-code\">float: left<\/code> or <code class=\"css-code\">float: right<\/code> on a <code>&lt;div&gt;<\/code>-element without using a clearfix to make the floating <code>&lt;div&gt;<\/code>-element's parent element take the floating <code>&lt;div&gt;<\/code>-element's height into account for it's own height (where <em>it<\/em> refers to the parent element of the floating <code>&lt;div&gt;<\/code>-element).<\/p><p>If an element has <code class=\"css-code\">float: left<\/code> or <code class=\"css-code\">float: right<\/code>, then it's height does not contribute to the height of it's parent element. Fix this by adding a clearfix as an <code class=\"css-code\">::after<\/code> pseudo-element:<\/p><tw-pre><code class=\"css-code\">.parent-of-floating-div::after {\r\n  content: '';\r\n  display: block;\r\n  clear: both;\r\n}\r\n.floating-div {\r\n  float: left;\r\n}<\/code><\/tw-pre><\/div><\/div><\/details><\/div><div class=\"col all question\" itemscope=\"\" itemprop=\"mainEntity\" itemtype=\"https:\/\/schema.org\/Question\"><details class=\"accordion\" data-open=\"true\" open=\"\" data-open-by-default=\"\"><summary class=\"h3\"><div class=\"question-text\" itemprop=\"name\"><h3>Why use id instead of class?<\/h3><\/div><\/summary><div class=\"answer\" itemscope=\"\" itemprop=\"acceptedAnswer\" itemtype=\"https:\/\/schema.org\/Answer\"><div class=\"answer-text\" itemprop=\"text\"><p>Classes are meant to be used on multiple elements. An ID is supposed to be used on a single element, such as the header. Selecting an element using an ID-selector (<code class=\"css-code\">#id<\/code>) carries more specificity and is more likely to overwrite class-selectors (<code class=\"css-code\">.class<\/code>).<\/p><\/div><\/div><\/details><\/div><div class=\"col all question\" itemscope=\"\" itemprop=\"mainEntity\" itemtype=\"https:\/\/schema.org\/Question\"><details class=\"accordion\" data-open=\"true\" open=\"\" data-open-by-default=\"\"><summary class=\"h3\"><div class=\"question-text\" itemprop=\"name\"><h3>Why do margins overlap?<\/h3><\/div><\/summary><div class=\"answer\" itemscope=\"\" itemprop=\"acceptedAnswer\" itemtype=\"https:\/\/schema.org\/Answer\"><div class=\"answer-text\" itemprop=\"text\"><p>Vertical margins overlap because that is what the intended behaviour is for margins between headings and paragraphs. CSS used to be intended to be used for simple documents, not for layouts. CSS can now make layouts; not just from top to bottom.<\/p><p>This is why vertical margins overlap\/collapse, but not horizontal margins.<\/p><\/div><\/div><\/details><\/div><\/div><\/div><\/div><aside class=\"row all t__content-in-container m__content-in-container d__in-container v-center bg-yellow__light m__vertical color-scheme-light__dark bg-yellow__dark t__vertical t__h-center t__c m__c\" data-cache-vw-d=\"1512\" data-cache-h-d=\"318.53125\" data-cache-vw-t=\"617\" data-cache-h-t=\"836.5546875\" data-cache-vw-m=\"462\" data-cache-h-m=\"870.9609375\"><div class=\"col all w-1\/d\/3 w-10\/t\/13\"><h2 class=\"t__h1 wrap-balance anim-fade-in\">Professional AI-built website, no setup costs, for only \u20ac49\/month<\/h2><a class=\"button bor-pitch-black__light txt-pitch-black-hover__light bg-transparent-hover__light bor-pitch-black-hover__light bg-pitch-black__light txt-yellow__light bg-pitch-black__dark txt-yellow__dark bor-pitch-black__dark bg-transparent-hover__dark txt-pitch-black-hover__dark bor-pitch-black-hover__dark d__h6-size t__h6-size\" href=\"https:\/\/www.terluinwebdesign.nl\/en\/ai-website-builder\/\"><span>AI Site Builder<\/span><\/a><\/div><div class=\"col all\"><div class=\"row all m__vertical t__vertical\"><div class=\"col all\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/wp-content\/uploads\/2025\/07\/website-builder-ai-bizbuilder-homepage.png\" class=\"anim-fade-in\" data-src-light=\"\" data-src-dark=\"\" title=\"\" alt=\"\" width=\"3020\" height=\"1645\" srcset=\"https:\/\/www.terluinwebdesign.nl\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2025\/07\/website-builder-ai-bizbuilder-homepage-w512.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"356.2890625\" data-img-h-d=\"193.453125\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"502.421875\" data-img-h-t=\"272.796875\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"404.25\" data-img-h-m=\"219.4921875\" data-img-of-m=\"fill\"><\/div><div class=\"col all\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/wp-content\/uploads\/2025\/07\/bizbuilder-dienst-pagina-desktop.png\" class=\"anim-fade-in\" data-src-light=\"\" data-src-dark=\"\" title=\"\" alt=\"\" width=\"3840\" height=\"2160\" srcset=\"https:\/\/www.terluinwebdesign.nl\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2025\/07\/bizbuilder-dienst-pagina-desktop-w512.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"356.2890625\" data-img-h-d=\"200.40625\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"502.421875\" data-img-h-t=\"282.609375\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"404.25\" data-img-h-m=\"227.390625\" data-img-of-m=\"fill\"><\/div><\/div><\/div><\/aside><\/prevent-autop><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>This post covers questions about CSS which do not need a separate post to be answered.Professional AI-built website, no setup costs, for only \u20ac49\/monthAI Site BuilderWhat &#8230;?What is CSS?CSS is a style sheet language used to style documents written in markup languages such as HTML and XML. CSS is developed by W3C, an organization that <a href=\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/frequently-asked-css-questions\/\" class=\"read-more-link block\">Read more<\/a><\/p>\n","protected":false},"author":2,"featured_media":8542,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,56],"tags":[],"class_list":["post-6862","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-css"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Frequently asked CSS questions<\/title>\n<meta name=\"description\" content=\"This post answers frequently asked CSS questions about CSS ranging from what CSS is to how to center a div, change font, color, and so on.\" \/>\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.terluinwebdesign.nl\/en\/blog\/frequently-asked-css-questions\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Frequently asked CSS questions\" \/>\n<meta property=\"og:description\" content=\"This post answers frequently asked CSS questions about CSS ranging from what CSS is to how to center a div, change font, color, and so on.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/frequently-asked-css-questions\/\" \/>\n<meta property=\"og:site_name\" content=\"Terluin Webdesign\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/TerluinWebdesign\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-05-08T15:20:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-18T14:49:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/05\/frequently-asked-css-questions.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1683\" \/>\n\t<meta property=\"og:image:height\" content=\"948\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Thijs Terluin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@terluinwdesign\" \/>\n<meta name=\"twitter:site\" content=\"@terluinwdesign\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thijs Terluin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/frequently-asked-css-questions\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/frequently-asked-css-questions\/\"},\"author\":{\"name\":\"Thijs Terluin\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/person\/a6f6b03a4d7acb99553ec297f1d6d1dd\"},\"headline\":\"Frequently asked CSS questions\",\"datePublished\":\"2022-05-08T15:20:13+00:00\",\"dateModified\":\"2025-07-18T14:49:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/frequently-asked-css-questions\/\"},\"wordCount\":4,\"publisher\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/frequently-asked-css-questions\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/05\/frequently-asked-css-questions.png\",\"articleSection\":[\"Blog\",\"CSS\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/frequently-asked-css-questions\/\",\"url\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/frequently-asked-css-questions\/\",\"name\":\"Frequently asked CSS questions\",\"isPartOf\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/frequently-asked-css-questions\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/frequently-asked-css-questions\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/05\/frequently-asked-css-questions.png\",\"datePublished\":\"2022-05-08T15:20:13+00:00\",\"dateModified\":\"2025-07-18T14:49:09+00:00\",\"description\":\"This post answers frequently asked CSS questions about CSS ranging from what CSS is to how to center a div, change font, color, and so on.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/frequently-asked-css-questions\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/frequently-asked-css-questions\/#primaryimage\",\"url\":\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/05\/frequently-asked-css-questions.png\",\"contentUrl\":\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/05\/frequently-asked-css-questions.png\",\"width\":1683,\"height\":948,\"caption\":\"Frequently asked CSS questions\"},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#website\",\"url\":\"https:\/\/www.terluinwebdesign.nl\/en\/\",\"name\":\"Terluin Webdesign\",\"description\":\"Let your website work for you\",\"publisher\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.terluinwebdesign.nl\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#organization\",\"name\":\"Terluin Webdesign\",\"url\":\"https:\/\/www.terluinwebdesign.nl\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2019\/05\/terluin.png\",\"contentUrl\":\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2019\/05\/terluin.png\",\"width\":294,\"height\":674,\"caption\":\"Terluin Webdesign\"},\"image\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/TerluinWebdesign\/\",\"https:\/\/x.com\/terluinwdesign\",\"https:\/\/www.instagram.com\/terluinwebdesign\/\",\"https:\/\/www.linkedin.com\/company\/terluin-webdesig\/\",\"https:\/\/www.youtube.com\/channel\/UCqaaHJh0caCmucUaWsewhKQ\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/person\/a6f6b03a4d7acb99553ec297f1d6d1dd\",\"name\":\"Thijs Terluin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/adff8d4881876bce4a26779bbab04daa390a45232b37b4f00a6ad954e4bc705f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/adff8d4881876bce4a26779bbab04daa390a45232b37b4f00a6ad954e4bc705f?s=96&d=mm&r=g\",\"caption\":\"Thijs Terluin\"},\"description\":\"Thijs Terluin is a web designer at Terluin Webdesign. He specializes in providing the structure, functionalities and speed of websites and web shops on devices and web browsers.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/thijs-terluin\/\"],\"url\":\"https:\/\/www.terluinwebdesign.nl\/en\/about-us\/thijs-terluin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Frequently asked CSS questions","description":"This post answers frequently asked CSS questions about CSS ranging from what CSS is to how to center a div, change font, color, and so on.","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.terluinwebdesign.nl\/en\/blog\/frequently-asked-css-questions\/","og_locale":"en_US","og_type":"article","og_title":"Frequently asked CSS questions","og_description":"This post answers frequently asked CSS questions about CSS ranging from what CSS is to how to center a div, change font, color, and so on.","og_url":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/frequently-asked-css-questions\/","og_site_name":"Terluin Webdesign","article_publisher":"https:\/\/www.facebook.com\/TerluinWebdesign\/","article_published_time":"2022-05-08T15:20:13+00:00","article_modified_time":"2025-07-18T14:49:09+00:00","og_image":[{"width":1683,"height":948,"url":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/05\/frequently-asked-css-questions.png","type":"image\/png"}],"author":"Thijs Terluin","twitter_card":"summary_large_image","twitter_creator":"@terluinwdesign","twitter_site":"@terluinwdesign","twitter_misc":{"Written by":"Thijs Terluin","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/frequently-asked-css-questions\/#article","isPartOf":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/frequently-asked-css-questions\/"},"author":{"name":"Thijs Terluin","@id":"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/person\/a6f6b03a4d7acb99553ec297f1d6d1dd"},"headline":"Frequently asked CSS questions","datePublished":"2022-05-08T15:20:13+00:00","dateModified":"2025-07-18T14:49:09+00:00","mainEntityOfPage":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/frequently-asked-css-questions\/"},"wordCount":4,"publisher":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/#organization"},"image":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/frequently-asked-css-questions\/#primaryimage"},"thumbnailUrl":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/05\/frequently-asked-css-questions.png","articleSection":["Blog","CSS"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/frequently-asked-css-questions\/","url":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/frequently-asked-css-questions\/","name":"Frequently asked CSS questions","isPartOf":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/frequently-asked-css-questions\/#primaryimage"},"image":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/frequently-asked-css-questions\/#primaryimage"},"thumbnailUrl":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/05\/frequently-asked-css-questions.png","datePublished":"2022-05-08T15:20:13+00:00","dateModified":"2025-07-18T14:49:09+00:00","description":"This post answers frequently asked CSS questions about CSS ranging from what CSS is to how to center a div, change font, color, and so on.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.terluinwebdesign.nl\/en\/blog\/frequently-asked-css-questions\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/frequently-asked-css-questions\/#primaryimage","url":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/05\/frequently-asked-css-questions.png","contentUrl":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2022\/05\/frequently-asked-css-questions.png","width":1683,"height":948,"caption":"Frequently asked CSS questions"},{"@type":"WebSite","@id":"https:\/\/www.terluinwebdesign.nl\/en\/#website","url":"https:\/\/www.terluinwebdesign.nl\/en\/","name":"Terluin Webdesign","description":"Let your website work for you","publisher":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.terluinwebdesign.nl\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.terluinwebdesign.nl\/en\/#organization","name":"Terluin Webdesign","url":"https:\/\/www.terluinwebdesign.nl\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2019\/05\/terluin.png","contentUrl":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2019\/05\/terluin.png","width":294,"height":674,"caption":"Terluin Webdesign"},"image":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/TerluinWebdesign\/","https:\/\/x.com\/terluinwdesign","https:\/\/www.instagram.com\/terluinwebdesign\/","https:\/\/www.linkedin.com\/company\/terluin-webdesig\/","https:\/\/www.youtube.com\/channel\/UCqaaHJh0caCmucUaWsewhKQ"]},{"@type":"Person","@id":"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/person\/a6f6b03a4d7acb99553ec297f1d6d1dd","name":"Thijs Terluin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/adff8d4881876bce4a26779bbab04daa390a45232b37b4f00a6ad954e4bc705f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/adff8d4881876bce4a26779bbab04daa390a45232b37b4f00a6ad954e4bc705f?s=96&d=mm&r=g","caption":"Thijs Terluin"},"description":"Thijs Terluin is a web designer at Terluin Webdesign. He specializes in providing the structure, functionalities and speed of websites and web shops on devices and web browsers.","sameAs":["https:\/\/www.linkedin.com\/in\/thijs-terluin\/"],"url":"https:\/\/www.terluinwebdesign.nl\/en\/about-us\/thijs-terluin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/posts\/6862","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/comments?post=6862"}],"version-history":[{"count":2,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/posts\/6862\/revisions"}],"predecessor-version":[{"id":9079,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/posts\/6862\/revisions\/9079"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/media\/8542"}],"wp:attachment":[{"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/media?parent=6862"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/categories?post=6862"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/tags?post=6862"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}