{"id":1687,"date":"2022-07-22T20:30:57","date_gmt":"2022-07-22T20:30:57","guid":{"rendered":"https:\/\/knight.domains\/support\/?p=1687"},"modified":"2022-07-22T20:31:49","modified_gmt":"2022-07-22T20:31:49","slug":"css-basics","status":"publish","type":"post","link":"https:\/\/knight.domains\/support\/css-basics\/","title":{"rendered":"CSS Basics"},"content":{"rendered":"\n

Have you ever fallen in love with a theme but wished you could change just one aspect of it? Some themes do offer the ability to change fonts or colors, but what if they don\u2019t? The answer lies within the theme customizer. Options within the theme customizer can vary depending on what theme you have active, but you will always have the \u201cAdditional CSS\u201d option pictured below.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

What is CSS?<\/h3>\n\n\n\n

CSS stands for Cascading Style Sheet, and it sounds way more complicated than it is. A CSS file controls the styling behind the HTML or content of your site. With the \u201cAdditional CSS\u201d tab in the WordPress theme customizer, you can override select aspects of the CSS file behind your website.<\/p>\n\n\n\n

CSS Syntax<\/h3>\n\n\n\n

Defining a custom rule comprised of the following parts: a selector with declarations. It looks like the following:<\/p>\n\n\n\n

selector {
      declaration;
      declaration;
}<\/pre>\n\n\n\n
Now what are selectors and declarations? A selector is the element of your website that you want to change. To find you desired one, refer to this blog post. A declaration is a way in which you want to change the selector. It is comprised of a property and value. The basic look of a declaration is as follows:<\/p>\n\n\n\n
property: value;<\/pre>\n\n\n\n
A property might comprise of \u201ccolor\u201d and the value would be a given color.<\/p>\n\n\n\n
Frequently Used Declarations<\/h3>\n\n\n\n
There are way many different properties you can specify in the declaration, but since this is just an introduction, I\u2019m just going to show the ones I find I use the most.<\/p>\n\n\n\n
display<\/h4>\n\n\n\n
This is a very powerful declaration that can be used to make an element disappear. In the value section, simply put \u201cnone\u201d. I find this most helpful when I need to manually hide something such as a sidebar.<\/p>\n\n\n\n
display: none;<\/pre>\n\n\n\n
color<\/h4>\n\n\n\n
Using the property \u201ccolor\u201d will change the text color of the given selector. Modifying \u201ccolor\u201d to \u201cbackground-color\u201d will target the background color.<\/p>\n\n\n\n
The value will specify the color you want. CSS has 140 colors that are associated with a given name such as \u201cblue\u201d. You can view the full list here<\/a>.<\/p>\n\n\n\n
If you want a different color, you can specify this as RGB values, HEX values, HSL values, RGBA values, or HSLA values. Any color you can think of will have an associated RGB, HEX, and HSL value. If you\u2019re unsure what these values are, you can use this link<\/a> to locate a color and see the associated values with it.<\/p>\n\n\n\n
If you want the color to have an opacity less than 1, it will have an associated RGBA and HSLA value. The opacity level would be specified as a fourth parameter. Indicating a 0 would be completely transparent and a 1 would be completely opaque.<\/p>\n\n\n\n
The following is an example of using an RGB value for text color and a HEX value for the background:<\/p>\n\n\n\n
color: RGB((55, 195, 181);
background-color: #7837c3;<\/pre>\n\n\n\n
font-size<\/h4>\n\n\n\n
Another frequent change I like to make on a website is the font size. This is done with the property \u201cfont-size\u201d. The value is the size of a letter in pixels. The proper syntax is as follows:<\/p>\n\n\n\n
font-size: 12;<\/pre>\n\n\n\n
font-family<\/h4>\n\n\n\n
Some themes have a built-in typography tab on the theme customizer, but others do not. If your theme does not have this feature, you can you the property \u201cfont-family\u201d. For the value, you can specific the font you\u2019d like in quotes, and then add the backup font family and generic font behind it separated by commas. (Note: the font family or generic font do not need to be in quotes.) This is just in case a given browser doesn\u2019t have your first specified font, it has something to fall back on. For example:<\/p>\n\n\n\n
font-family: \"Roboto\", Arial, sans-serif;<\/pre>\n\n\n\n
text-transform<\/h4>\n\n\n\n
Have you ever wanted to all your headings uppercase? Or maybe all lowercase? The property behind this is \u201ctext-transform\u201d. It recognizes the following values:<\/p>\n\n\n\n
none<\/td>include no text transformation<\/td><\/tr>
capitalize<\/td>capitalize the first character of every word<\/td><\/tr>
uppercase<\/td>capitalize every character<\/td><\/tr>
lowercase<\/td>make every character lowercase<\/td><\/tr>
initial<\/td>transforms characters to default value<\/td><\/tr>
inherit<\/td>transformation is inherited from parent element<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
An example of the proper syntax is as follows:<\/p>\n\n\n\n
text-transform: uppercase;<\/pre>\n\n\n\n
text-decoration, font-weight, font-style<\/h4>\n\n\n\n
What about making text italic or bold? What about underline? The following properties can do this with the corresponding values.<\/p>\n\n\n\n
text-decoration: underline;
font-weight: bold;
font-style: italic;<\/pre>\n\n\n\n
If you wish to take off any of these elements, use the following:<\/p>\n\n\n\n
text-decoration: none;
font-weight: normal;
font-style: normal; <\/pre>\n\n\n\n
Now we have just scratched the surface with what is possible with CSS, but I hope that gives you a good start! Remember this blog post only shows you different declarations. Refer to this blog post to find the correct selector that you want to change. You\u2019ll need both to properly create a custom style rule.<\/p>\n\n\n\n
Happy Web Designing!<\/p>\n","protected":false},"excerpt":{"rendered":"
Have you ever fallen in love with a theme but wished you could change just one aspect of it? Some themes do offer the ability to change fonts or colors, but what if they don\u2019t? The answer lies within the theme customizer. Options within the theme customizer can vary depending on what theme you have… Read More »CSS Basics<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"categories":[7,22,21,15],"tags":[],"class_list":["post-1687","post","type-post","status-publish","format-standard","hentry","category-applications","category-custom-code","category-learn","category-wordpress"],"yoast_head":"\nCSS Basics - Knight Domains Support<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/knight.domains\/support\/css-basics\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Basics - Knight Domains Support\" \/>\n<meta property=\"og:description\" content=\"Have you ever fallen in love with a theme but wished you could change just one aspect of it? Some themes do offer the ability to change fonts or colors, but what if they don\u2019t? The answer lies within the theme customizer. Options within the theme customizer can vary depending on what theme you have… Read More »CSS Basics\" \/>\n<meta property=\"og:url\" content=\"https:\/\/knight.domains\/support\/css-basics\/\" \/>\n<meta property=\"og:site_name\" content=\"Knight Domains Support\" \/>\n<meta property=\"article:published_time\" content=\"2022-07-22T20:30:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-07-22T20:31:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/techbar.knight.domains\/wp-content\/uploads\/2020\/06\/Screen-Shot-2020-06-12-at-11.08.31-AM-1024x685.png\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/knight.domains\/support\/css-basics\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/knight.domains\/support\/css-basics\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\/\/knight.domains\/support\/#\/schema\/person\/97fce710c22c2ab77084638feca7a7b3\"},\"headline\":\"CSS Basics\",\"datePublished\":\"2022-07-22T20:30:57+00:00\",\"dateModified\":\"2022-07-22T20:31:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/knight.domains\/support\/css-basics\/\"},\"wordCount\":768,\"publisher\":{\"@id\":\"https:\/\/knight.domains\/support\/#organization\"},\"articleSection\":[\"Applications\",\"Custom Code\",\"Learn\",\"Wordpress\"],\"inLanguage\":\"en\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/knight.domains\/support\/css-basics\/\",\"url\":\"https:\/\/knight.domains\/support\/css-basics\/\",\"name\":\"CSS Basics - Knight Domains Support\",\"isPartOf\":{\"@id\":\"https:\/\/knight.domains\/support\/#website\"},\"datePublished\":\"2022-07-22T20:30:57+00:00\",\"dateModified\":\"2022-07-22T20:31:49+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/knight.domains\/support\/css-basics\/#breadcrumb\"},\"inLanguage\":\"en\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/knight.domains\/support\/css-basics\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/knight.domains\/support\/css-basics\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/knight.domains\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Basics\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/knight.domains\/support\/#website\",\"url\":\"https:\/\/knight.domains\/support\/\",\"name\":\"Knight Domains Support\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/knight.domains\/support\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/knight.domains\/support\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/knight.domains\/support\/#organization\",\"name\":\"Knight Domains Support\",\"url\":\"https:\/\/knight.domains\/support\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en\",\"@id\":\"https:\/\/knight.domains\/support\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/knight.domains\/support\/wp-content\/uploads\/2020\/08\/cropped-norbyKDC_noText.png\",\"contentUrl\":\"https:\/\/knight.domains\/support\/wp-content\/uploads\/2020\/08\/cropped-norbyKDC_noText.png\",\"width\":1200,\"height\":950,\"caption\":\"Knight Domains Support\"},\"image\":{\"@id\":\"https:\/\/knight.domains\/support\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/knight.domains\/support\/#\/schema\/person\/97fce710c22c2ab77084638feca7a7b3\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en\",\"@id\":\"https:\/\/knight.domains\/support\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/14485561fe5f6aa0e0fa6f4fec288e998230a44741f270a510ea9621f2d9cfb6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/14485561fe5f6aa0e0fa6f4fec288e998230a44741f270a510ea9621f2d9cfb6?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"url\":\"https:\/\/knight.domains\/support\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Basics - Knight Domains Support","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:\/\/knight.domains\/support\/css-basics\/","og_locale":"en_US","og_type":"article","og_title":"CSS Basics - Knight Domains Support","og_description":"Have you ever fallen in love with a theme but wished you could change just one aspect of it? Some themes do offer the ability to change fonts or colors, but what if they don\u2019t? The answer lies within the theme customizer. Options within the theme customizer can vary depending on what theme you have… Read More »CSS Basics","og_url":"https:\/\/knight.domains\/support\/css-basics\/","og_site_name":"Knight Domains Support","article_published_time":"2022-07-22T20:30:57+00:00","article_modified_time":"2022-07-22T20:31:49+00:00","og_image":[{"url":"https:\/\/techbar.knight.domains\/wp-content\/uploads\/2020\/06\/Screen-Shot-2020-06-12-at-11.08.31-AM-1024x685.png"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/knight.domains\/support\/css-basics\/#article","isPartOf":{"@id":"https:\/\/knight.domains\/support\/css-basics\/"},"author":{"name":"admin","@id":"https:\/\/knight.domains\/support\/#\/schema\/person\/97fce710c22c2ab77084638feca7a7b3"},"headline":"CSS Basics","datePublished":"2022-07-22T20:30:57+00:00","dateModified":"2022-07-22T20:31:49+00:00","mainEntityOfPage":{"@id":"https:\/\/knight.domains\/support\/css-basics\/"},"wordCount":768,"publisher":{"@id":"https:\/\/knight.domains\/support\/#organization"},"articleSection":["Applications","Custom Code","Learn","Wordpress"],"inLanguage":"en"},{"@type":"WebPage","@id":"https:\/\/knight.domains\/support\/css-basics\/","url":"https:\/\/knight.domains\/support\/css-basics\/","name":"CSS Basics - Knight Domains Support","isPartOf":{"@id":"https:\/\/knight.domains\/support\/#website"},"datePublished":"2022-07-22T20:30:57+00:00","dateModified":"2022-07-22T20:31:49+00:00","breadcrumb":{"@id":"https:\/\/knight.domains\/support\/css-basics\/#breadcrumb"},"inLanguage":"en","potentialAction":[{"@type":"ReadAction","target":["https:\/\/knight.domains\/support\/css-basics\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/knight.domains\/support\/css-basics\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/knight.domains\/support\/"},{"@type":"ListItem","position":2,"name":"CSS Basics"}]},{"@type":"WebSite","@id":"https:\/\/knight.domains\/support\/#website","url":"https:\/\/knight.domains\/support\/","name":"Knight Domains Support","description":"","publisher":{"@id":"https:\/\/knight.domains\/support\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/knight.domains\/support\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en"},{"@type":"Organization","@id":"https:\/\/knight.domains\/support\/#organization","name":"Knight Domains Support","url":"https:\/\/knight.domains\/support\/","logo":{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/knight.domains\/support\/#\/schema\/logo\/image\/","url":"https:\/\/knight.domains\/support\/wp-content\/uploads\/2020\/08\/cropped-norbyKDC_noText.png","contentUrl":"https:\/\/knight.domains\/support\/wp-content\/uploads\/2020\/08\/cropped-norbyKDC_noText.png","width":1200,"height":950,"caption":"Knight Domains Support"},"image":{"@id":"https:\/\/knight.domains\/support\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/knight.domains\/support\/#\/schema\/person\/97fce710c22c2ab77084638feca7a7b3","name":"admin","image":{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/knight.domains\/support\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/14485561fe5f6aa0e0fa6f4fec288e998230a44741f270a510ea9621f2d9cfb6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/14485561fe5f6aa0e0fa6f4fec288e998230a44741f270a510ea9621f2d9cfb6?s=96&d=mm&r=g","caption":"admin"},"url":"https:\/\/knight.domains\/support\/author\/admin\/"}]}},"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"admin","author_link":"https:\/\/knight.domains\/support\/author\/admin\/"},"rttpg_comment":0,"rttpg_category":"<a href=\"https:\/\/knight.domains\/support\/category\/applications\/\" rel=\"category tag\">Applications<\/a> <a href=\"https:\/\/knight.domains\/support\/category\/learn\/custom-code\/\" rel=\"category tag\">Custom Code<\/a> <a href=\"https:\/\/knight.domains\/support\/category\/learn\/\" rel=\"category tag\">Learn<\/a> <a href=\"https:\/\/knight.domains\/support\/category\/applications\/wordpress\/\" rel=\"category tag\">Wordpress<\/a>","rttpg_excerpt":"Have you ever fallen in love with a theme but wished you could change just one aspect of it? Some themes do offer the ability to change fonts or colors, but what if they don\u2019t? The answer lies within the theme customizer. Options within the theme customizer can vary depending on what theme you have… Read…","_links":{"self":[{"href":"https:\/\/knight.domains\/support\/wp-json\/wp\/v2\/posts\/1687","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/knight.domains\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/knight.domains\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/knight.domains\/support\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/knight.domains\/support\/wp-json\/wp\/v2\/comments?post=1687"}],"version-history":[{"count":1,"href":"https:\/\/knight.domains\/support\/wp-json\/wp\/v2\/posts\/1687\/revisions"}],"predecessor-version":[{"id":1688,"href":"https:\/\/knight.domains\/support\/wp-json\/wp\/v2\/posts\/1687\/revisions\/1688"}],"wp:attachment":[{"href":"https:\/\/knight.domains\/support\/wp-json\/wp\/v2\/media?parent=1687"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/knight.domains\/support\/wp-json\/wp\/v2\/categories?post=1687"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/knight.domains\/support\/wp-json\/wp\/v2\/tags?post=1687"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}