An Introduction to CSS

CSS is a type of code that is used on a large portion, if not majority of websites on the web. Essentially, it is broken out to mean “Cascading Style Sheet,” referring to a type of stylesheet language used in the presentation of a document.

Many people do not have a full understanding of how they work, although they are crucial in the development of modern websites, even if you planning to base your site on another language, such as Flash, as CSS will still define some of the areas of the site and how the site appears. Getting a better understanding of how it works will allow you to customize your blog without having to reference guides or hire someone else to customize or code your next project.

How CSS is Used

Before CSS was created and widely used, most sites either used a repeating image or large-scale image as the background, along with images placed “manually” through use of HTML at various places throughout the website. What did this cause? Primarily, it added time to the loading speed of the website, and if you think back to websites built in the pre-2000 period, a large portion weren’t styled nearly as well as those of today’s standards.

Let’s say you wanted to add a header element to your blog post. There would be no way to do this other than increasing the size of the text, which generally added time to the process. Everything pre-CSS was controlled by HTML elements and that added a lot of time for coders and bloggers.

The following elements of a website are controlled through CSS (at least for most sites):

• Page Design
• Text
• Body Tags
• Paragraph Tags
• Links
• Printable Page Attributes

Furthermore, there are areas of your site that normally wouldn’t be able to be controlled using just HTML. Prior to the introduction of CSS, many sites were consistent in their format, with a basic, left-aligned, “table”-based format. This was a pain to maintain, and the switch to CSS quickly transformed the way we began designing websites.

Benefits of CSS

Assuming that you already have a basic blog setup, look at your source code, available through many browsers through the View > Source menu. Within the window that pops up, near the top, you will likely see a “link” to the style.css file, which is where the design and formatting takes place. Sometimes, there will be multiple stylehseets, especially if you look at more advanced themes or websites. Separate stylesheets are useful if you plan on creating separate areas or styles to your site, or would like to separate the different styles using different files.

Remember that CSS is sometime a difficult type of code to learn, as there are more code definitions that you have to learn initially. However, once you accomplish learning the basics, it should become easier to determine which code defines what area and how to customize your template.

But first, we’ll return to some more benefits of CSS:

For Readers and Visitors

1. A more consistent page layout and design across all pages. For the user, it will be easier for more browsers to “read” the page and not display information incorrectly.
2. CSS is able to be cached and rendered more quickly. HTML was rendered one definition at a time, leading to a slower-loading page.
3. More adaptability when you look at the wider range of people your site will display for properly. CSS is able to provide flexible width for monitor resolutions and elsewhere – including in phones, large/small displays, print (through a print stylesheet), etc.

For Your Site

1. Less coding is required to accomplish the same, repetitive task that HTML used to take ten times more coding to do.
2. Fixes, changes, and further updates can be accomplished in just a few seconds using the CSS file. If you have an article that you want to format differently, such as adding a border around all images, it would have taken hours to manually add HTMl around the image files. With CSS, it takes a fraction of the time.
3. Your site will load faster, leading to better search engine and load times (better for you in terms of cost, too). Code is separated from content.

Often, there will be references to the different specifications, or levels of CSS, which each include different capabilities, including:

– CSS 1: Originally published in December 1996

- Font properties such as typeface and emphasis.

- Color of text, backgrounds, and other elements.

- Text attributes such as spacing between words, letters, and lines of text.

- Alignment of text, images, tables, and other elements.

- Margin, border, padding, and positioning for most elements.

- Unique identification and generic classification of groups and attributes.

– CSS 2: Published in May 1998, reverted to working draft in June 2005, returned to Candidate Recommendation in July 2007.

- Absolute, relative, and fixed positioning of elements.

- The concept of media types.

- Support for aural style sheets and bidirectional text.

- Font properties and shadows added.

– CSS 3: Under Development.

- Numerous new features and support (none specified yet).

A Few Basics

Don’t learn CSS by starting form scratch. Being slowly, looking at source code for elements that you might want to adapt into your site. It takes some time to learn how to implement them into your own site properly, but with CSS and other, more advanced forms of code, you will be able to gain full control of how your website appears.

In Blogger, a lot of the CSS is found within the “Edit HTML” area, included within the traditional coding (HTML) and set apart using regular CSS definitions. This is what largely makes it more difficult to edit Blogger templates, as it is more difficult, at least initially, to determine which is CSS and which is HTML.

A tutorial has been provided within the Blogger Help area to get started.

In WordPress, provided you host your site on your own server, you pretty much have full control over the backend of your site, through use of the Theme Customization panel. Plus, the better the original designer (that could be you) coded the theme, the easier the process will be when you update or revise your site.

If you need more help in working with CSS in WordPress, a dedicated Codex page has been set up.

To start, it will be more time consuming to learn all the fundamentals of CSS. However, as you become better at leaning what determines what on the website, such as colors, fonts, etc., it will become easier to make use of the shorthand format, in which you condense multiple lines into “shorter” definitions, as follows (for the background property):

Before:

element {
  background-color: color || #hex || (rgb / % || 0-255);
  background-image:url(URI);
  background-repeat: repeat || repeat-x || repeat-y || no-repeat;
  background-position: X Y || (top||bottom||center) (left||right||center);
  background-attachment: scroll || fixed;
}

 After:

element {
  background:
    #fff
    url(image.png)
    no-repeat
    20px 100px
    fixed;
}

Again, compression is key. Unless you are able to make use of shorter, easier-to-read formats, you won’t be able to speed up your site, no matter how many HTML attributes you convert to CSS.

While the idea behind CSS isn’t to replace HTML, it should be used in a way that reduces the amount of time that you have to spend formatting your posts, as in how your site is displayed relative to the HTML tag you are using.

More on this and other design topics will be included in the future.

Resources

• CSS Help Sheet (Direct Download, PDF)
• CSS Basics – A simple, but straight-forward site that provides basics on a variety of the main definitions.
• CSS from the Ground Up – An old, but good article that guides you though using CSS for the first time.
• 50+ Creative Examples and Tutorials Using CSS (Noupe) + 30 More at Six Revisions