Are you feeling constrained by templates? Do you simply need more control over the appearance of your site? If you answered, “yes” 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 into their site CSS. However, in case you want more customization or to learn about the technical side of website building, this article will help you understand what’s going on behind the scenes of your website.
If you have a Silver or Gold package, you can edit your site’s CSS and HTML. Go to the “Style” tab under “Style Settings”, click on “Site CSS” to start customizing. But first, here’s an overview of what’s that means and how you can use it to edit your site.
What is CSS?
CSS, 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’re getting ahead of ourselves.
Taking the burden off developers
First, 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.
You should wind up with a before and after that looks like this.
Bridging the Gap Between Design and Development
As 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:
- <h1> This is a heading </h1>
- <p> This is a paragraph </p>
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—even though all the pages have the same general appearance.
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 CSS file rather than editing the markup on every page that contained an H1 heading.
Simple Syntax
A 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’re indicating that each h1 heading in the HTML will be red and size 22 font.
A Few Fundamentals
Now we understand that CSS controls how the HTML appears on a page, it’s time to go over a few core properties and capabilities of CSS.
Backgrounds
CSS can be used to define the background effects of an element.
The 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).
In the example below, the heading, paragraph and div elements all have different background colors:
Learn more about backgrounds and practice here.
Margins and Padding
A 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.
Padding clears an area around the content and is affected by the background color of the content box.
Both padding and margin spacing (in pixels) can be applied to individual sides of the content.
Learn more about backgrounds and practice here.
Floats
Floating 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.
Learn more about backgrounds and practice here.
Tutorials, articles and resources
With those few CSS examples under your belt, you’re 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.
- How to edit your Site CSS: a Yola tutorial
- W3 Schools: More tutorial, examples and helpful references
- CSS Basics: Thorough walk-throughs and explanations
- Get Started Mastering CSS from Smashing Magazine: Specific examples of fundamental tasks within CSS
I am taking Web Design I right now. We learned about all of this stuff! 🙂
Pingback: Debunking Yola Myths - Part 1 | Yola