{"id":3331,"date":"2025-03-04T06:53:05","date_gmt":"2025-03-04T12:53:05","guid":{"rendered":"https:\/\/www.teamdesk.net\/blog\/?p=3331"},"modified":"2025-03-04T06:53:07","modified_gmt":"2025-03-04T12:53:07","slug":"styling-new-teamdesk-ui-part-1-css-basics","status":"publish","type":"post","link":"https:\/\/www.teamdesk.net\/blog\/tips-tricks\/styling-new-teamdesk-ui-part-1-css-basics\/","title":{"rendered":"Styling new TeamDesk UI, part 1: CSS Basics"},"content":{"rendered":"\n<p>To define how HTML element is rendered on screen or other media, there is a cascading style sheet language, or CSS for short. With CSS you can change the UI look (and feel, to the certain extent). Let&#8217;s start from CSS Basics.<\/p>\n\n\n\n<p>This guide does not pretend to be an ultimate reference documentation for CSS. Full specification would deserve a <a href=\"https:\/\/www.oreilly.com\/library\/view\/css-the-definitive\/9781098117603\/\">book<\/a>. For a quick reference, <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\">MDN Web Docs<\/a> is a good start (including HTML and JavaScript documentation).<\/p>\n\n\n\n<style>\ncode { background-color: #EEE; }\n.hljs-selector-class, .hljs-selector-id, .hljs-selector-tag { color: #800; }\n<\/style>\n\n\n\n<h2 class=\"wp-block-heading\">Styling HTML Elements<\/h2>\n\n\n\n<p>Stylesheet is a text containing <em>rules<\/em>. Each rule consists of the element <em>selector<\/em> that defines the elements to style and a set of <em>declarations<\/em>, each one is <em>property name <\/em>and its value. For example:<\/p>\n\n\n\n<pre class=\"wp-block-code language-css\"><code>p {\n    color: red;\n}<\/code><\/pre>\n\n\n\n<p>With this rule, we apply value &#8220;red&#8221; to property &#8220;color&#8221; for each &lt;p&gt; tag.<\/p>\n\n\n\n<p>Stylesheets are written either inside of <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/style\">&lt;style><\/a> tag of HTML file or loaded from external text file with .css extension via HTML&#8217;s <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/link\">&lt;link><\/a> tag. Whether inline or external, multiple stylesheets processed in the order they appear in HTML file. That is <em>cascading<\/em> in CSS abbreviation.<\/p>\n\n\n\n<p>You can also apply styles to particular HTML element via its <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Global_attributes\/style\">style<\/a> attribute.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Document Tree<\/h2>\n\n\n\n<p>Consider the following HTML:<\/p>\n\n\n\n<pre class=\"wp-block-code language-html\"><code>&lt;html&gt;\n  &lt;head&gt;\n    &lt;title&gt;Lorem ipsum&lt;\/title&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;section&gt;\n      &lt;h1&gt;Section 1&lt;\/h1&gt;\n      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit&lt;\/p&gt;\n      &lt;p&gt;sed do eiusmod tempor incididunt ut labore et dolore magna aliqua&lt;\/p&gt;\n    &lt;\/section&gt;\n    &lt;section&gt;\n      &lt;h1&gt;Section 2&lt;\/h1&gt;\n      &lt;p&gt;Ut enim ad minim veniam, quis nostrud exercitation&lt;\/p&gt;\n      &lt;p&gt;ullamco laboris nisi ut aliquip ex ea commodo consequat&lt;\/p&gt;\n    &lt;\/section&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>While loading the browser transforms it into the tree-like structure with the root on top, growing down:<\/p>\n\n\n\n<pre class=\"wp-block-code language-dom\"><code>html\n\u251c head\n\u2502 \u2514 title\n\u2514 body\n  \u251c section\n  \u2502 \u251c p\n  \u2502 \u2514 p\n  \u2514 section\n    \u251c p\n    \u2514 p<\/code><\/pre>\n\n\n\n<p>P tags are <em>children<\/em> (placed one level down) of the section tag and <em>descendants<\/em> (placed anywhere down) of the body and section. Section is the <em>parent<\/em> for p tags. Section and Body are <em>ancestor<\/em>s of p. HTML tag is a <em>root<\/em> of the tree.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Selectors<\/h2>\n\n\n\n<p>Selectors identify HTML elements to apply the rules to.<\/p>\n\n\n\n<p>How CSS identifies HTML elements? Either via tag name, or by presence of by its class, or by its id, or by any combination of these three. Consider:<\/p>\n\n\n\n<pre class=\"wp-block-code language-html\"><code>&lt;p id=\"myid\" class=\"myclass1 myclass2\" myattribute=\"value\"&gt;Some text&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>p<\/code> &#8212; <em>type selector<\/em>, selects any element with tag name <em>p<\/em><\/li>\n\n\n\n<li><code>.myclass1<\/code> &#8212; <em>class selector<\/em>, selects any element containing word <em>myclass1<\/em> in their class attribute.<\/li>\n\n\n\n<li><code>#myid<\/code> &#8212; <em>id selector<\/em>, selects an element having id attribute&#8217;s value <em>myid<\/em>.<\/li>\n\n\n\n<li><code>[myattribute=\"value\"]<\/code> &#8212; <em>attribute selector<\/em>, selects elements having attribute <em>myattribute <\/em>equal to <em>value<\/em><\/li>\n\n\n\n<li><code>[myattribute]<\/code> &#8212; another form of <em>attribute selector<\/em>, selects elements having an attribute named <em>myattribute<\/em>, regardless of value.<\/li>\n<\/ul>\n\n\n\n<p>Writing multiple id\/tag\/class\/attribute selectors with no space between them means the element should match ALL the conditions.<\/p>\n\n\n\n<p><code>p.myclass1#myid[myattribute=\"value\"]<\/code> denotes the element with tag name <em>p<\/em> AND class <em>myclass1<\/em> AND id <em>myid1 <\/em>AND <em>myattribute<\/em> equals to <em>value<\/em>. The order of selectors does not matter, <code>p<code>#myid<\/code>[myattribute=\"value\"<\/code>]<code>.myclass1<\/code> is identical selector.<\/p>\n\n\n\n<p>If you need to apply the same set of properties to multiple elements that can not be covered with single selector, list individual selectors separating them by comma. This is called <em>list combinator<\/em>. And remember, you are free to specify multiple declarations per rule:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.alert, .error {\n    color: white;    \n    background-color: red;\n    border: solid 1px black;\n}<\/code><\/pre>\n\n\n\n<p>There are more combinators, if you need to address an element related to another element.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&#8221; &#8221; (space) &#8211; the <em>descendant combinator<\/em>. <code>div p { ... }<\/code> applies to a p tag that resides anywhere inside div tag.<\/li>\n\n\n\n<li>> (right angle bracket): the <em>child combinator<\/em>. <code>div > p { ... }<\/code> applies to a p tag that is immediate child of div<\/li>\n\n\n\n<li>+ (plus sign):  the <em>next-sibling combinator<\/em>. <code>h1 + p { ... }<\/code> applies to p tag standing next to h1 tag.<\/li>\n\n\n\n<li>~ (tilde):  &#8211; <em>subsequent-sibling combinator<\/em>. <code>h1 ~ p { ... }<\/code> applies to p tag that follow (but not necessary stands next) to h1 tag.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Rule priority<\/h2>\n\n\n\n<p>When it comes to rendering HTML element, the browser scans all the loaded stylesheets, finds all the rules with selectors matching the element, combines all their declarations and applies styling to the element. But what if there are multiple declarations of the same property? Consider:<\/p>\n\n\n\n<pre class=\"wp-block-code language-html\"><code>&lt;style&gt;\n.alert { color: red; }\ndiv { color: black; background-color: white; }\n&lt;\/style&gt;\n\n&lt;div class=\"alert\"&gt;Alert!&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>What would be the color of the text, red or black?<\/p>\n\n\n\n<p>Here comes <em>selector specificity<\/em>.  You can think of it as a three-digit number. Count IDs, classes and tag names in your selector. Each ID adds 100, each class\/attribute adds 10 and each tag name adds 1 to the result. The bigger the resulting number, the more priority the rule has.<\/p>\n\n\n\n<p>In the example above, <code>.alert { ... }<\/code> has a specificity of 010 and <code>div { ... }<\/code> has a specificity of 001, thus<code> .alert {}<\/code> rule wins and the color of the text will be red. Between the rules of the same specificity latest one wins:<\/p>\n\n\n\n<pre class=\"wp-block-code language-html\"><code>&lt;style&gt;\n\/* specificity: 010 *\/\n.red { color: red; }\n\/* specificity: 010 *\/\n.alert { color: yellow; }\n&lt;\/style&gt;\n\n&lt;div class=\"alert red\"&gt;Yellow&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>Styles applied directly to the element have even more priority than any style defined in the stylesheet<\/p>\n\n\n\n<pre class=\"wp-block-code language-html\"><code>&lt;div class=\"red\" style=\"color:yellow\"&gt;Yellow&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>You can raise the priority of stylesheet declaration with <code>!important<\/code> keyword added to the end of the value:<\/p>\n\n\n\n<pre class=\"wp-block-code language-html\"><code>&lt;style&gt;\n#green {\n    \/* selector specificity: 100 *\/ \n    color: green;\n}\n\n.yellow {\n    \/* selector standard specificity: 010 *\/\n    \/* but due to <em>!important<\/em>, color declaration wins *\/\n    color: yellow !important;\n}\n&lt;\/style&gt;\n\n&lt;div id=\"green\" class=\"yellow\"&gt;Yellow&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Inherited Properties<\/h2>\n\n\n\n<p><em>Inheritance<\/em> means the property set on the <em>ancestor<\/em> element is used by all of its <em>descendants<\/em> unless overridden. Text color and font properties are inheritable. You do not need to specify it for every element, just set it on top-level html or body level.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Dimensions<\/h2>\n\n\n\n<p>Each HTML element on the page is represented as a rectangular box, consisting of several layers: content, padding, border, and margin.<\/p>\n\n\n\n<div style=\"border: 1px dashed black; background-color: #B08354; margin: 1em auto; max-width: 400px; font-size: 0.6em; padding: 0 2em 2em\">\n<span style=\"line-height: 2em;\">margin<\/span>\n<div style=\"border: 1px solid black; background-color: #E4C482; padding: 0 2em 2em\">\n<span style=\"line-height: 2em;\">border<\/span>\n<div style=\"border: 1px dashed black; background-color: #B8C480; padding: 0 2em 2em\">\n<span style=\"line-height: 2em;\">padding<\/span>\n<div style=\"border: 1px solid black; background-color: #88B2BD; text-align: center; padding: 1em 2em\">\n<span style=\"line-height: 2em;\">content<\/span>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Content<\/strong>: This is where the content of the element (text, images, etc.) is displayed.<\/li>\n\n\n\n<li><strong>Padding<\/strong>: Padding is the space between the content and the border. It can be set using the&nbsp;<em>padding<\/em>&nbsp;property, which can control all sides at once or individually using&nbsp;<em>padding-top<\/em>,&nbsp;<em>padding-right<\/em>,&nbsp;<em>padding-bottom<\/em>, and&nbsp;<em>padding-left<\/em>.<\/li>\n\n\n\n<li><strong>Border<\/strong>: The border surrounds the padding and content. The border&#8217;s thickness, style, and color can be set using the&nbsp;<em>border<\/em>&nbsp;property or individually using&nbsp;<em>border-width<\/em>,&nbsp;<em>border-style<\/em>, and&nbsp;<em>border-color<\/em>.<\/li>\n\n\n\n<li><strong>Margin<\/strong>: The margin is the outermost layer, creating space between the element and other elements. It can be set using the&nbsp;<em>margin<\/em>&nbsp;property or individually using&nbsp;<em>margin-top<\/em>,&nbsp;<em>margin-right<\/em>,&nbsp;<em>margin-bottom<\/em>, and&nbsp;<em>margin-left<\/em>.<\/li>\n<\/ul>\n\n\n\n<p>To change the size of the box you can use <em>width<\/em> and <em>height<\/em> properties. There are two sizing models you can switch using <em>box-sizing<\/em> property. <\/p>\n\n\n\n<p><strong>Standard model<\/strong> or <em>content-box<\/em> sizing assumes width and height properties apply to content box. To calculate effective element&#8217;s size, you should add paddings and border&#8217;s size to the dimensions you&#8217;ve specified.<\/p>\n\n\n\n<p><strong>Alternative model<\/strong>, or <em>border-box<\/em> sizing assumes width and height applied to border box. To calculate the width of the content box you should <em>subtract <\/em>paddings and border size from the dimensions you&#8217;ve specified.<\/p>\n\n\n\n<p>Dimension values are specified together with unit of measurement. Most commonly used:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>px &#8211; virtual pixel, 1\/96 of inch.<\/li>\n\n\n\n<li>em &#8211; font size of the element. 2em means two times the size of the current font.<\/li>\n\n\n\n<li>% &#8211; size of the parent element.<\/li>\n\n\n\n<li>rem &#8211; font size of the root element (HTML tag).<\/li>\n\n\n\n<li>vw &#8211; 1% of the width of the browser window (viewport&#8217;s width). 100vw means full width;<\/li>\n\n\n\n<li>vh &#8211; 1% of the height of the browser window (viewport&#8217;s height). 100vh means full height;<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Shorthand properties<\/h2>\n\n\n\n<p>As some properties often set together, they have shorthand variants allowing to set multiple properties at once.<\/p>\n\n\n\n<pre class=\"wp-block-code language-css\"><code>.bordered {\n   border-style: solid;\n   border-width: 1px;\n   border-color: black;\n}\n\n\/* or using shorthand *\/\n.bordered {\n   border: solid 1px black;\n}\n\n\/* Another example *\/\n.m1234 {\n   margin-top: 1px;\n   margin-right: 2px;\n   margin-bottom: 3px;\n   margin-left: 4px;\n}\n\n\/* or using shorthand *\/\n.m1234 {\n    \/* order matters: top right bottom left *\/\n    margin: 1px 2px 3px 4px;\n}\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Colors<\/h2>\n\n\n\n<p>In CSS you can specify the color either by name, using the palette of 256 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/named-color\">standard named colors<\/a>, or by specifying numerical values in range between 0 and 255 for color&#8217;s red, green and blue component.<\/p>\n\n\n\n<p>Historically, they are written as sharp sign followed by hexadecimal form of red, green and blue components. With growing support for colors, support for semi-transparent colors in particular, browsers added new notations to accommodate new features. <\/p>\n\n\n\n<p>One that is easy to remember is rgb() function with space separated decimal numbers for red, green and blue components. To specify transparency, add a slash and a floating-point number between 0 (fully transparent) and 1 (fully opaque).<\/p>\n\n\n\n<p>You can play with the color pickers to check the notations for various color values. Squares on the right render selected color. Top square paints semi-transparent colors on white background, while bottom square paints on black background.<\/p>\n\n\n\n<table id=\"rgbpicker\" width=\"100%\">\n<tr>\n<td width=\"1\" align=\"right\">Red:<\/td>\n<td>\n<input id=\"rgbpicker-r\" type=\"range\" min=0 max=255 value=0 style=\"width:100%\">\n<div style=\"background-image:linear-gradient(90deg, #000000, #FF0000);height:5px\"><\/div>\n<\/td>\n<td id=\"rgbpicker-output-white\" style=\"background-color:white;width:50px\" rowspan=\"2\">\n<\/td>\n<\/tr>\n<tr>\n<td align=right>Green:<\/td>\n<td>\n<input id=\"rgbpicker-g\" type=\"range\" min=0 max=255 value=97 style=\"width:100%\">\n<div style=\"background-image:linear-gradient(90deg, #000000, #00FF00);height:5px\"><\/div>\n<\/td>\n<\/tr>\n<tr>\n<td align=right>Blue:<\/td>\n<td>\n<input id=\"rgbpicker-b\" type=\"range\" min=0 max=255 value=176 style=\"width:100%\">\n<div style=\"background-image:linear-gradient(90deg, #000000, #0000FF);height:5px\"><\/div>\n<\/td>\n<td id=\"rgbpicker-output-black\" style=\"background-color:black\" rowspan=\"2\">\n<\/tr>\n<tr><td align=right>Opacity:<\/td>\n<td>\n<input id=\"rgbpicker-a\" type=\"range\" min=0 max=1 step=\"0.01\" style=\"width:100%\" value=1>\n<div style=\"height:5px\"><\/div>\n<\/td>\n<\/tr>\n<tr>\n<td colspan=3 align=center><input id=\"rgbpicker-output-hex\" readonly><input id=\"rgbpicker-output-text\" readonly><\/td>\n<\/table>\n\n<script>\nfunction setColor() {\n   var r = document.getElementById(\"rgbpicker-r\").value;\n   var g = document.getElementById(\"rgbpicker-g\").value;\n   var b = document.getElementById(\"rgbpicker-b\").value;\n   var a = document.getElementById(\"rgbpicker-a\").value;\n   var color = \"rgb(\" + r + \" \" + g + \" \" + b;\n   var colorHex = \"\";\n   if(a != 1) color += \" \/ \" + a; else colorHex = \"#\" + (+r).toString(16).padStart(2, \"0\") + (+g).toString(16).padStart(2, \"0\") + (+b).toString(16).padStart(2, \"0\");\n   color += \")\";\n   document.getElementById(\"rgbpicker-output-white\").style.backgroundImage=(\"linear-gradient(90deg,\"+color+\",\"+color+\")\");\n   document.getElementById(\"rgbpicker-output-black\").style.backgroundImage=(\"linear-gradient(90deg,\"+color+\",\"+color+\")\");\n   document.getElementById(\"rgbpicker-output-text\").value = color;\n   document.getElementById(\"rgbpicker-output-hex\").value = colorHex;\n}\ndocument.getElementById(\"rgbpicker\").addEventListener(\"input\", setColor);\nsetColor();\n<\/script>\n\n\n\n<p>Another interesting color model is HSL, that stands for Hue, Saturation, Lightness. Hue is a degree on the color wheel, Saturation is a percentage value from 0% (completely gray) to 100% (full color) and Lightness is another percentage value varying from 0% (no light, black) to 100% (full light, white)<\/p>\n\n\n\n<table id=\"hslpicker\" width=\"100%\">\n<tr>\n<td width=\"1\" rowspan=\"4\" align=center valign=middle><div id=\"hslpicker-wheel\" style=\"position:relative;min-width:100px;height:100%;aspect-ratio:1;border-radius:1000px;background:conic-gradient(hsl(0deg 100% 50%), hsl(10deg 100% 50%), hsl(20deg 100% 50%), hsl(30deg 100% 50%), hsl(40deg 100% 50%), hsl(50deg 100% 50%), hsl(60deg 100% 50%), hsl(70deg 100% 50%), hsl(80deg 100% 50%), hsl(90deg 100% 50%), hsl(100deg 100% 50%), hsl(110deg 100% 50%), hsl(120deg 100% 50%), hsl(130deg 100% 50%), hsl(140deg 100% 50%), hsl(150deg 100% 50%), hsl(160deg 100% 50%), hsl(170deg 100% 50%), hsl(180deg 100% 50%), hsl(190deg 100% 50%), hsl(200deg 100% 50%), hsl(210deg 100% 50%), hsl(220deg 100% 50%), hsl(230deg 100% 50%), hsl(240deg 100% 50%), hsl(250deg 100% 50%), hsl(260deg 100% 50%), hsl(270deg 100% 50%), hsl(280deg 100% 50%), hsl(290deg 100% 50%), hsl(300deg 100% 50%), hsl(310deg 100% 50%), hsl(320deg 100% 50%), hsl(330deg 100% 50%), hsl(340deg 100% 50%), hsl(350deg 100% 50%));\"><div id=\"hslpicker-hdot\" style=\"width:4px;height:4px;background:black;position:absolute\"><\/div><\/td>\n<td width=\"1\"align=right>Hue:<\/td>\n<td><input id=\"hslpicker-h\" type=\"range\" min=0 max=360 value=0 style=\"width:100%\">\n<div style=\"height:5px;background:linear-gradient(90deg, hsl(0deg 100% 50%), hsl(10deg 100% 50%), hsl(20deg 100% 50%), hsl(30deg 100% 50%), hsl(40deg 100% 50%), hsl(50deg 100% 50%), hsl(60deg 100% 50%), hsl(70deg 100% 50%), hsl(80deg 100% 50%), hsl(90deg 100% 50%), hsl(100deg 100% 50%), hsl(110deg 100% 50%), hsl(120deg 100% 50%), hsl(130deg 100% 50%), hsl(140deg 100% 50%), hsl(150deg 100% 50%), hsl(160deg 100% 50%), hsl(170deg 100% 50%), hsl(180deg 100% 50%), hsl(190deg 100% 50%), hsl(200deg 100% 50%), hsl(210deg 100% 50%), hsl(220deg 100% 50%), hsl(230deg 100% 50%), hsl(240deg 100% 50%), hsl(250deg 100% 50%), hsl(260deg 100% 50%), hsl(270deg 100% 50%), hsl(280deg 100% 50%), hsl(290deg 100% 50%), hsl(300deg 100% 50%), hsl(310deg 100% 50%), hsl(320deg 100% 50%), hsl(330deg 100% 50%), hsl(340deg 100% 50%), hsl(350deg 100% 50%))\"><\/div>\n<\/td>\n<td id=\"hslpicker-output-white\" style=\"background-color:white;width:50px\" rowspan=\"2\">\n<\/tr>\n<tr>\n<td align=right>Saturation:<\/td>\n<td>\n<input id=\"hslpicker-s\" type=\"range\" min=0 max=100 value=100 style=\"width:100%\">\n<div id=\"hslpicker-output-s\" style=\"height:5px;\"><\/div>\n<\/td>\n<\/tr>\n<tr>\n<td align=right>Lightness:<\/td>\n<td>\n<input id=\"hslpicker-l\" type=\"range\" min=0 max=100 value=50 style=\"width:100%\">\n<div id=\"hslpicker-output-l\" style=\"height:5px;\"><\/div>\n<\/td>\n<td id=\"hslpicker-output-black\" style=\"background-color:black;width:50px\" rowspan=\"2\">\n<\/tr>\n<tr>\n<td align=right>Opacity:<\/td>\n<td>\n<input id=\"hslpicker-a\" type=\"range\" min=0 max=1 step=\"0.01\" value=1 style=\"width:100%\">\n<div style=\"height:5px\"><\/div>\n<\/td>\n<\/tr>\n<td colspan=4 align=center><input id=\"hslpicker-output-text\" readonly><\/td>\n<\/table>\n<script>\nfunction setColor() {\n   var h = document.getElementById(\"hslpicker-h\").value;\n   var s = document.getElementById(\"hslpicker-s\").value;\n   var l = document.getElementById(\"hslpicker-l\").value;\n   var a = document.getElementById(\"hslpicker-a\").value;\n   var color = \"hsl(\" + h + \" \" + s + \" \" + l;\n   if(a != 1) color += \" \/ \" + a;\n   color += \")\";\n\n   document.getElementById(\"hslpicker-output-s\").style.backgroundImage=`linear-gradient(90deg,hsl(${h} 0 ${l}),hsl(${h} 100 ${l}))`;\n   document.getElementById(\"hslpicker-output-l\").style.backgroundImage=`linear-gradient(90deg,hsl(${h} ${s} 0),hsl(${h} ${s} 50),hsl(${h} ${s} 100))`;\n   document.getElementById(\"hslpicker-output-white\").style.backgroundImage=(\"linear-gradient(90deg,\"+color+\",\"+color+\")\");\n   document.getElementById(\"hslpicker-output-black\").style.backgroundImage=(\"linear-gradient(90deg,\"+color+\",\"+color+\")\");\n   document.getElementById(\"hslpicker-output-text\").value = color;\n\n   var r = document.getElementById(\"hslpicker-wheel\").offsetWidth \/ 2;\n   var px = r + r * Math.cos((h - 90) \/ 180 * Math.PI) - 2;\n   var py = r + r * Math.sin((h - 90) \/ 180 * Math.PI) - 2;\n   var dot = document.getElementById(\"hslpicker-hdot\");\n   dot.style.left = px + \"px\";\n   dot.style.top = py + \"px\";\n}\ndocument.getElementById(\"hslpicker\").addEventListener(\"input\", setColor);\nsetColor();\n<\/script>\n\n\n\n<p>You can play with the color pickers above to check the notations for various color values. Squares on the right render selected color. Top square paints semi-transparent colors on white background, while bottom square paints on black background.<\/p>\n\n\n\n<p>Producing lighter or darker shade of the color in RGB model require playing with semi-transparency over black or white overlay. In contrast, in HSL model making the color lighter or darker is simply an adjustment of Lightness component of the color.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Custom Properties (variables)<\/h2>\n\n\n\n<p>Custom property names start with double dash and inherit their value from ancestor element. To access the value of custom property, use <code>var()<\/code> function. Custom properties are particularly useful with various customization techniques.<\/p>\n\n\n\n<p>Let&#8217;s see it in action. Suppose you have page layout where header and footer and some other elements are colored with alternate color, say, gray, styled with:<\/p>\n\n\n\n<pre class=\"wp-block-code language-css\"><code>\n.header, .footer \/*, more selectors *\/ {\n    color: gray;\n}<\/code><\/pre>\n\n\n\n<p>Now, if you want to change the alternate color from gray to light gray in every element you have to replicate original selector.<\/p>\n\n\n\n<pre class=\"wp-block-code language-css\"><code>.header, .footer \/*, more selectors *\/ {\n    color: lightgray;\n}<\/code><\/pre>\n\n\n\n<p>With custom properties you can define the color once on the top level, typically on HTML element and use it anywhere down the element tree:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>html {\n    --alternate-color: gray\n}\n\n.header, .footer \/*, more selectors *\/ {\n    color: var(--alternate-color);\n}<\/code><\/pre>\n\n\n\n<p>and to change the color, simply redefine the custom property value in your CSS:<\/p>\n\n\n\n<pre class=\"wp-block-code language-css\"><code>html {\n   --alternate-color: lightgray;\n}<\/code><\/pre>\n\n\n\n<p>Using second argument to var() function you can provide default value for the case custom property is not set.<\/p>\n\n\n\n<pre class=\"wp-block-code language-css\"><code>.header, .footer \/*, more selectors *\/ {\n    color: var(--alternate-color, gray);\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Functions<\/h2>\n\n\n\n<p>Functions allow you to perform some arithmetic calculations within the stylesheet.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>calc(expression)<\/code> calculates arithmetic expression<\/li>\n\n\n\n<li><code>min(value1, value2, ...valueN)<\/code> selects smallest from supplied values<\/li>\n\n\n\n<li><code>max(value1, value2, ...valueN)<\/code> selects greatest from supplied values<\/li>\n\n\n\n<li><code>clamp(min, middle, max)<\/code> puts adjust the middle value to fit into min..max range<\/li>\n<\/ul>\n\n\n\n<p>Combined with custom properties functions you can create powerful tools:<\/p>\n\n\n\n<pre class=\"wp-block-code language-css\"><code>.form {\n   \/* lay out forms in 4 columns *\/\n   --form-columns: 4;\n}\n\n.form-cell {\n   \/* the cell takes 1\/Nth of form's width but can not shrink less than 250px *\/ \n   width: max(250px, calc(100% \/ var(--form-columns, 1)));\n}\n\n#myform.form {\n   \/* lay out #myform in 2 columns *\/\n   --form-columns: 2;\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Browser Development Tools<\/h2>\n\n\n\n<p>Each desktop browser is packed with a set of development tools (devtools for short). Here we&#8217;ll refer to those from Chrome browser, yet their functionality and layout is more or less the same in all browsers.<\/p>\n\n\n\n<p>How to pull it up? You have multiple ways:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Keyboard\n<ul class=\"wp-block-list\">\n<li>Windows: Ctrl+Shift+I or F12 <\/li>\n\n\n\n<li>Mac: Cmd+Option+I<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Menu bar\n<ul class=\"wp-block-list\">\n<li>Firefox: More tools | Web Developer Tools<\/li>\n\n\n\n<li>Chrome: More tools | Developer tools<\/li>\n\n\n\n<li>Safari: Develop (this menu item should be first enabled in Safari Settings) | Show Web Inspector.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Context menu\n<ul class=\"wp-block-list\">\n<li>Press-and-hold\/right-click an item on a webpage (Ctrl-click on the Mac), and choose Inspect Element from the context menu that appears. (An added bonus: this method straight-away highlights the code of the element you right-clicked.)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p>Development Tools window will appear. From there you can debug JavaScript code, check network traffic and what not, but we&#8217;ll concentrate on HTML Elements and stylesheets.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.teamdesk.net\/blog\/wp-content\/uploads\/2025\/02\/image-6.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"557\" src=\"https:\/\/www.teamdesk.net\/blog\/wp-content\/uploads\/2025\/02\/image-6-1024x557.png\" alt=\"CSS basics, development tools\" class=\"wp-image-3374\" srcset=\"https:\/\/www.teamdesk.net\/blog\/wp-content\/uploads\/2025\/02\/image-6-1024x557.png 1024w, https:\/\/www.teamdesk.net\/blog\/wp-content\/uploads\/2025\/02\/image-6-300x163.png 300w, https:\/\/www.teamdesk.net\/blog\/wp-content\/uploads\/2025\/02\/image-6-768x418.png 768w, https:\/\/www.teamdesk.net\/blog\/wp-content\/uploads\/2025\/02\/image-6-1536x835.png 1536w, https:\/\/www.teamdesk.net\/blog\/wp-content\/uploads\/2025\/02\/image-6-2048x1114.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Elements tab of the Development Tools window displays an HTML element tree on the left pane. You can select the element from the tree or use point-and-click tool to select the element on the page. Right pane of the Elements tab is an element inspector, and here we&#8217;ll be interested in first two tabs: Styles and Computed.<\/p>\n\n\n\n<p>Styles tab lists rules to apply to the selected element, listed in the order of selector specificity. Moreover, it allows dynamic style modifications. You can turn individual declarations on and off, write your own styles and rules. Changes you make on the Styles tab immediately reflected on the page but obviously won&#8217;t be saved back to the source.<\/p>\n\n\n\n<p>While Styles tab displays the information from rule perspective, Computed tab does it from property perspective. It displays element&#8217;s box model values as well as lists the properties affected by current styles on various levels. Expanding the property would provide you the list of rules setting this property value.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.teamdesk.net\/blog\/wp-content\/uploads\/2025\/02\/image-7.png\"><img loading=\"lazy\" decoding=\"async\" width=\"567\" height=\"668\" src=\"https:\/\/www.teamdesk.net\/blog\/wp-content\/uploads\/2025\/02\/image-7.png\" alt=\"\" class=\"wp-image-3377\" srcset=\"https:\/\/www.teamdesk.net\/blog\/wp-content\/uploads\/2025\/02\/image-7.png 567w, https:\/\/www.teamdesk.net\/blog\/wp-content\/uploads\/2025\/02\/image-7-255x300.png 255w\" sizes=\"auto, (max-width: 567px) 100vw, 567px\" \/><\/a><\/figure>\n\n\n\n<p>That&#8217;s all for today. Coming up next practical styling for new TeamDesk UI.<\/p>\n\n\n\n<p>Stay tuned!<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this article we&#8217;ll cover CSS Basics: selectors, combinators, inheritance, and browser development tools.<\/p>\n","protected":false},"author":4,"featured_media":3381,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-3331","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tips-tricks"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Styling new TeamDesk UI, part 1: CSS Basics - TeamDesk Blog<\/title>\n<meta name=\"description\" content=\"In this article we&#039;ll cover CSS Basics: selectors, combinators, inheritance, and browser development tools.\" \/>\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.teamdesk.net\/blog\/tips-tricks\/styling-new-teamdesk-ui-part-1-css-basics\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Styling new TeamDesk UI, part 1: CSS Basics - TeamDesk Blog\" \/>\n<meta property=\"og:description\" content=\"In this article we&#039;ll cover CSS Basics: selectors, combinators, inheritance, and browser development tools.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.teamdesk.net\/blog\/tips-tricks\/styling-new-teamdesk-ui-part-1-css-basics\/\" \/>\n<meta property=\"og:site_name\" content=\"TeamDesk Blog\" \/>\n<meta property=\"article:published_time\" content=\"2025-03-04T12:53:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-04T12:53:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.teamdesk.net\/blog\/wp-content\/uploads\/2025\/02\/cssbasics.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Kirill Bondar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirill Bondar\" \/>\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.teamdesk.net\\\/blog\\\/tips-tricks\\\/styling-new-teamdesk-ui-part-1-css-basics\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/tips-tricks\\\/styling-new-teamdesk-ui-part-1-css-basics\\\/\"},\"author\":{\"name\":\"Kirill Bondar\",\"@id\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/#\\\/schema\\\/person\\\/22c4c05bd657513c8b00122fa364c8d2\"},\"headline\":\"Styling new TeamDesk UI, part 1: CSS Basics\",\"datePublished\":\"2025-03-04T12:53:05+00:00\",\"dateModified\":\"2025-03-04T12:53:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/tips-tricks\\\/styling-new-teamdesk-ui-part-1-css-basics\\\/\"},\"wordCount\":1891,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/tips-tricks\\\/styling-new-teamdesk-ui-part-1-css-basics\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/02\\\/cssbasics.jpg\",\"articleSection\":[\"Tips &amp; Tricks\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/tips-tricks\\\/styling-new-teamdesk-ui-part-1-css-basics\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/tips-tricks\\\/styling-new-teamdesk-ui-part-1-css-basics\\\/\",\"url\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/tips-tricks\\\/styling-new-teamdesk-ui-part-1-css-basics\\\/\",\"name\":\"Styling new TeamDesk UI, part 1: CSS Basics - TeamDesk Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/tips-tricks\\\/styling-new-teamdesk-ui-part-1-css-basics\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/tips-tricks\\\/styling-new-teamdesk-ui-part-1-css-basics\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/02\\\/cssbasics.jpg\",\"datePublished\":\"2025-03-04T12:53:05+00:00\",\"dateModified\":\"2025-03-04T12:53:07+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/#\\\/schema\\\/person\\\/22c4c05bd657513c8b00122fa364c8d2\"},\"description\":\"In this article we'll cover CSS Basics: selectors, combinators, inheritance, and browser development tools.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/tips-tricks\\\/styling-new-teamdesk-ui-part-1-css-basics\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/tips-tricks\\\/styling-new-teamdesk-ui-part-1-css-basics\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/tips-tricks\\\/styling-new-teamdesk-ui-part-1-css-basics\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/02\\\/cssbasics.jpg\",\"contentUrl\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/02\\\/cssbasics.jpg\",\"width\":1024,\"height\":1024},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/tips-tricks\\\/styling-new-teamdesk-ui-part-1-css-basics\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Styling new TeamDesk UI, part 1: CSS Basics\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/\",\"name\":\"TeamDesk Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/#\\\/schema\\\/person\\\/22c4c05bd657513c8b00122fa364c8d2\",\"name\":\"Kirill Bondar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/dc5bc844095b5753ccc73c589c028bf16615674f289668146bbd59205a08a52d?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/dc5bc844095b5753ccc73c589c028bf16615674f289668146bbd59205a08a52d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/dc5bc844095b5753ccc73c589c028bf16615674f289668146bbd59205a08a52d?s=96&d=mm&r=g\",\"caption\":\"Kirill Bondar\"},\"url\":\"https:\\\/\\\/www.teamdesk.net\\\/blog\\\/author\\\/kirill-bondar\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Styling new TeamDesk UI, part 1: CSS Basics - TeamDesk Blog","description":"In this article we'll cover CSS Basics: selectors, combinators, inheritance, and browser development tools.","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.teamdesk.net\/blog\/tips-tricks\/styling-new-teamdesk-ui-part-1-css-basics\/","og_locale":"en_US","og_type":"article","og_title":"Styling new TeamDesk UI, part 1: CSS Basics - TeamDesk Blog","og_description":"In this article we'll cover CSS Basics: selectors, combinators, inheritance, and browser development tools.","og_url":"https:\/\/www.teamdesk.net\/blog\/tips-tricks\/styling-new-teamdesk-ui-part-1-css-basics\/","og_site_name":"TeamDesk Blog","article_published_time":"2025-03-04T12:53:05+00:00","article_modified_time":"2025-03-04T12:53:07+00:00","og_image":[{"width":1024,"height":1024,"url":"https:\/\/www.teamdesk.net\/blog\/wp-content\/uploads\/2025\/02\/cssbasics.jpg","type":"image\/jpeg"}],"author":"Kirill Bondar","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirill Bondar","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.teamdesk.net\/blog\/tips-tricks\/styling-new-teamdesk-ui-part-1-css-basics\/#article","isPartOf":{"@id":"https:\/\/www.teamdesk.net\/blog\/tips-tricks\/styling-new-teamdesk-ui-part-1-css-basics\/"},"author":{"name":"Kirill Bondar","@id":"https:\/\/www.teamdesk.net\/blog\/#\/schema\/person\/22c4c05bd657513c8b00122fa364c8d2"},"headline":"Styling new TeamDesk UI, part 1: CSS Basics","datePublished":"2025-03-04T12:53:05+00:00","dateModified":"2025-03-04T12:53:07+00:00","mainEntityOfPage":{"@id":"https:\/\/www.teamdesk.net\/blog\/tips-tricks\/styling-new-teamdesk-ui-part-1-css-basics\/"},"wordCount":1891,"commentCount":0,"image":{"@id":"https:\/\/www.teamdesk.net\/blog\/tips-tricks\/styling-new-teamdesk-ui-part-1-css-basics\/#primaryimage"},"thumbnailUrl":"https:\/\/www.teamdesk.net\/blog\/wp-content\/uploads\/2025\/02\/cssbasics.jpg","articleSection":["Tips &amp; Tricks"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.teamdesk.net\/blog\/tips-tricks\/styling-new-teamdesk-ui-part-1-css-basics\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.teamdesk.net\/blog\/tips-tricks\/styling-new-teamdesk-ui-part-1-css-basics\/","url":"https:\/\/www.teamdesk.net\/blog\/tips-tricks\/styling-new-teamdesk-ui-part-1-css-basics\/","name":"Styling new TeamDesk UI, part 1: CSS Basics - TeamDesk Blog","isPartOf":{"@id":"https:\/\/www.teamdesk.net\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.teamdesk.net\/blog\/tips-tricks\/styling-new-teamdesk-ui-part-1-css-basics\/#primaryimage"},"image":{"@id":"https:\/\/www.teamdesk.net\/blog\/tips-tricks\/styling-new-teamdesk-ui-part-1-css-basics\/#primaryimage"},"thumbnailUrl":"https:\/\/www.teamdesk.net\/blog\/wp-content\/uploads\/2025\/02\/cssbasics.jpg","datePublished":"2025-03-04T12:53:05+00:00","dateModified":"2025-03-04T12:53:07+00:00","author":{"@id":"https:\/\/www.teamdesk.net\/blog\/#\/schema\/person\/22c4c05bd657513c8b00122fa364c8d2"},"description":"In this article we'll cover CSS Basics: selectors, combinators, inheritance, and browser development tools.","breadcrumb":{"@id":"https:\/\/www.teamdesk.net\/blog\/tips-tricks\/styling-new-teamdesk-ui-part-1-css-basics\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.teamdesk.net\/blog\/tips-tricks\/styling-new-teamdesk-ui-part-1-css-basics\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.teamdesk.net\/blog\/tips-tricks\/styling-new-teamdesk-ui-part-1-css-basics\/#primaryimage","url":"https:\/\/www.teamdesk.net\/blog\/wp-content\/uploads\/2025\/02\/cssbasics.jpg","contentUrl":"https:\/\/www.teamdesk.net\/blog\/wp-content\/uploads\/2025\/02\/cssbasics.jpg","width":1024,"height":1024},{"@type":"BreadcrumbList","@id":"https:\/\/www.teamdesk.net\/blog\/tips-tricks\/styling-new-teamdesk-ui-part-1-css-basics\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.teamdesk.net\/blog\/"},{"@type":"ListItem","position":2,"name":"Styling new TeamDesk UI, part 1: CSS Basics"}]},{"@type":"WebSite","@id":"https:\/\/www.teamdesk.net\/blog\/#website","url":"https:\/\/www.teamdesk.net\/blog\/","name":"TeamDesk Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.teamdesk.net\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.teamdesk.net\/blog\/#\/schema\/person\/22c4c05bd657513c8b00122fa364c8d2","name":"Kirill Bondar","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/dc5bc844095b5753ccc73c589c028bf16615674f289668146bbd59205a08a52d?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/dc5bc844095b5753ccc73c589c028bf16615674f289668146bbd59205a08a52d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/dc5bc844095b5753ccc73c589c028bf16615674f289668146bbd59205a08a52d?s=96&d=mm&r=g","caption":"Kirill Bondar"},"url":"https:\/\/www.teamdesk.net\/blog\/author\/kirill-bondar\/"}]}},"_links":{"self":[{"href":"https:\/\/www.teamdesk.net\/blog\/wp-json\/wp\/v2\/posts\/3331","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.teamdesk.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.teamdesk.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.teamdesk.net\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.teamdesk.net\/blog\/wp-json\/wp\/v2\/comments?post=3331"}],"version-history":[{"count":42,"href":"https:\/\/www.teamdesk.net\/blog\/wp-json\/wp\/v2\/posts\/3331\/revisions"}],"predecessor-version":[{"id":3386,"href":"https:\/\/www.teamdesk.net\/blog\/wp-json\/wp\/v2\/posts\/3331\/revisions\/3386"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.teamdesk.net\/blog\/wp-json\/wp\/v2\/media\/3381"}],"wp:attachment":[{"href":"https:\/\/www.teamdesk.net\/blog\/wp-json\/wp\/v2\/media?parent=3331"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.teamdesk.net\/blog\/wp-json\/wp\/v2\/categories?post=3331"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.teamdesk.net\/blog\/wp-json\/wp\/v2\/tags?post=3331"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}