If you have a Silver or Gold package, you can edit your site\u2019s CSS and HTML. Go to the \u201cStyle\u201d tab under \u201cStyle Settings\u201d, click on \u201cSite CSS\u201d to start customizing. But first, here\u2019s an overview of what\u2019s that means and how you can use it to edit your site.<\/p>\n
What is CSS?<\/strong> Taking the burden off developers<\/strong> You can see that creating large sites, in which every page had considerable visual customization, became an arduous, expensive process with this format. Just think of editing how a page looks within every page of your website\u2014even though all the pages have the same general appearance.<\/p>\n The World Wide Web Consortium created CSS, allowing HTML 5 to remove all formatting and store it in a separate CSS file. Now, you can make edits to one page that reflects across the entire website. For example, if you wanted all your H1 headings to be red and bold you only have to change one<\/strong> CSS file rather than editing the markup on every page that contained an H1 heading.<\/p>\n Simple Syntax<\/strong> \nBackgrounds<\/strong> Margins and Padding<\/strong> Floats<\/strong> Tutorials, articles and resources<\/strong> <\/p>\n","protected":false},"excerpt":{"rendered":" Are you feeling constrained by templates? Do you simply need more control over the appearance of your site? If you answered, \u201cyes\u201d to any of those questions, then read on to learn how CSS can help you achieve an even more customized website. Since we released the Style Designer, many users prefer not to go… Read More »Learn the Basics of CSS and Website Customization<\/span><\/a><\/p>\n","protected":false},"author":24,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"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":"","neve_meta_reading_time":"","_themeisle_gutenberg_block_has_review":false},"categories":[130],"tags":[479,480,297,401],"_links":{"self":[{"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/posts\/6304"}],"collection":[{"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/comments?post=6304"}],"version-history":[{"count":3,"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/posts\/6304\/revisions"}],"predecessor-version":[{"id":6314,"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/posts\/6304\/revisions\/6314"}],"wp:attachment":[{"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/media?parent=6304"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/categories?post=6304"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.yola.com\/blog\/wp-json\/wp\/v2\/tags?post=6304"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\nCSS, or Cascading Style Sheets, is a language used for describing visual elements throughout the site. This means that altering the design of your entire website only requires an edit to one external .css file rather than individual HTML markup edits on every page. You can also make edits for designated pages by placing CSS code within the <head><\/head> tags of each (X)HTML file, but we\u2019re getting ahead of ourselves.<\/p>\n
\nFirst, lets take a look at everything CSS is accomplishing within our very own site. You can try it yourself on any website within Firefox by selecting View > Page Style > No Style.<\/p>\n![\"CSS](\"https:\/\/blogcontent.yola.net\/blog\/wp-content\/uploads\/2013\/10\/CSS-Page-Style.png\")
\nYou should wind up with a before and after that looks like this.<\/p>\n![\"CSS](\"https:\/\/www.yola.com\/blog\/wp-content\/uploads\/2013\/10\/CSS-Styles-Removed.png\")
\nBridging the Gap Between Design and Development<\/strong>
\nAs you can see, CSS controls every visual and formatting element within a webpage, and without it, websites turn into long lists. This is because HTML markup was never originally intended to contain tags for formatting a document, only to define the content. For example:<\/p>\n\n
\nA CSS rule has two parts: a selector and one or more declarations. Selectors indicate the HTML element you wish to style, while the declarations consist of a property and value. Each property has only one value and refers to the style attribute you wish to alter. In the example below, we\u2019re indicating that each h1 heading in the HTML will be red and size 22 font.<\/p>\n![\"CSS](\"https:\/\/www.yola.com\/blog\/wp-content\/uploads\/2013\/10\/CSS-h1-heading.png\")
\nA Few Fundamentals<\/strong>
\nNow we understand that CSS controls how the HTML appears on a page, it\u2019s time to go over a few core properties and capabilities of CSS.<\/p>\n
\nCSS can be used to define the background effects of an element.
\nThe background color of a page is defined in the body selector, most often specified by either a HEX value (#634673) or an RGB value (250, 41, 19).
\nIn the example below, the heading, paragraph and div elements all have different background colors:<\/p>\n![\"CSS](\"https:\/\/www.yola.com\/blog\/wp-content\/uploads\/2013\/10\/CSS-Background-Color.png\")
\nLearn more about backgrounds and practice here<\/a>.<\/p>\n
\nA lot of CSS newbies get padding and margins mixed up and use them incorrectly. The margin is transparent and clears an area around the border.
\nPadding clears an area around the content and is affected by the background color of the content box.<\/p>\n![\"CSS](\"https:\/\/www.yola.com\/blog\/wp-content\/uploads\/2013\/10\/CSS-Margin-Spacing.png\")
\nBoth padding and margin spacing (in pixels) can be applied to individual sides of the content.<\/p>\n![\"CSS](\"https:\/\/www.yola.com\/blog\/wp-content\/uploads\/2013\/10\/CSS-Margin-and-Padding.png\")
\nLearn more about backgrounds and practice here<\/a>.<\/p>\n
\nFloating page elements is a great way to align images and build layouts with columns and allow text (or other page elements) to wrap around the floated item. Floats occur horizontally and will move all the way to the edges (left or right) of the containing element.<\/p>\n![\"CSS](\"https:\/\/www.yola.com\/blog\/wp-content\/uploads\/2013\/10\/CSS-Floats.png\")
\nLearn more about backgrounds and practice here<\/a>.<\/p>\n
\nWith those few CSS examples under your belt, you\u2019re ready to start. Again, the world of CSS is extremely vast, and this is only a stepping-stone to some introductory techniques. We suggest consulting our list of CCS tutorials below to develop a strong foundation.<\/p>\n\n