Before getting started with a CSS-based design, however, it's important to understand how it functions and why it's an important part of today's best web designs. Furthermore, aspiring website designers should learn a few tips and tricks before getting started that will help them create robust websites without errors or other development headaches in the process.
CSS: One of Two Key Components in Modern Design
Most people who are just getting started with design are not sure exactly why CSS is the key way to design modern websites. That's because there are actually a number of ways to style a website, including a method that actually places styling information directly into the HTML tags. To understand why CSS is actually more beneficial, it's worth considering web design in a new way: content versus presentation.
In today's designs, XHTML or HTML5 documents are created to hold content. Their job is merely to show things like blog posts and sidebar content, surrounded by useful tags that can be styled using a separate CSS document. This allows for the website to be lightweight, with less code stuffed into the HTML document that might slow down the page's loading times and contribute to diminishing search engine performance.
Stylesheets feature none of the page's content, but feature every aspect of its presentation. They work only in tandem with XHTML or HTML5 documents and, because they load separately, they are not responsible for slowing down the page's performance or SEO rankings. Furthermore, stylesheets are read universally by browsers on desktops, tablets, and mobile phones, contributing to a page's universal appearance across devices, mediums, and operating systems.
With an understanding of how CSS works and why it's important, those new to the medium will need to learn a few basic tips before they get started with a new XHTML-and-CSS website design.
1. Learn the Difference Between IDs and Classes
A CSS document can apply its styles in a few different ways, primarily by identifying an element's ID or class indicator. These two descriptors are a key way to style things like < DIV > tags, heading tags, fonts, and more, but there is a key difference that separates IDs from classes.
In terms of HTML and CSS, a "class" element is added to those tags that will repeat. For example, the typical blog will display at least five entries on the homepage. Those entries will all need to be styled the same way. In order to save space, designers can identify the < DIV > elements surrounding each of their posts with a class:
<div class="blog-post">
This signals that the element will repeat multiple times on the page, and it's generally used only with those elements that will be found multiple times on the same page. For something that appears only once, such as a header or a navigational element, an ID tag is used instead:
<div id="navigation" >
In a stylesheet, the difference between classes and IDs is indicated by punctuation. To style the "blog-post" class above, the corresponding CSS element would look something like this:
.blog-post { color: #000; line-height: 150%; }
To style an ID instead of a class, a simple change is made to the CSS element. An ID is indicated as such, in the case of the "navigation" example above:
#navigation { text-align: center; }
Without the proper punctuation in the stylesheet, the indicated styling will not appear when the HTML document is loaded in a browser window. Instead, it will appear completely unstyled until the discrepancy is fixed.
2. Indicate a Style's Importance
Sometimes, the styling in one element will override the styling in another. This is most often seen when the "page" or "html" element is used to create default fonts and colors for the whole page. Those things are often meant to be good default options, but they can mess up other areas of the page. To prevent those "defaults" from overriding the styling of another element, perhaps in the sidebar or within blog posts, designers can simply use the "!important" indicator immediately after the overriding style. It looks like this in typical usage:
.sidebar-box { background-color: #fff !important; font-family: Arial, Helvetica, sans-serif; color: #e3e3e3 !important; }
If any other aspect of the stylesheet is seeking to override the "sidebar-box" class's background color or font color, those instructions will be ignored due to the presence of the "!important" indicator before the line-ending semicolon. This indicator can be used virtually anywhere within a standard stylesheet to produce the same result.
3. Understand the Difference Between Stylesheet Linking and Importing
The most important thing to do when creating a new stylesheet is to ensure that it's being linked or imported into an HTML document so that all changes are immediately reflected on the test site. Typically, this is done in one of two ways: A linked stylesheet document or a simple command that imports the stylesheet into the HTML document and places it directly into the code at the top of the page.
Generally, the "link" method is the preferred way to link an HTML document to a stylesheet because it does not involve enlarging the file size of the document itself. As discussed earlier, the goal of stylesheets is to style a website in a robust way while allowing its file size to remain rather lightweight. This alone is reason enough not to use the import function.
While the import function is supported in most browsers to style a website, it's more generally used to link two stylesheets together. Some developers prefer to use one stylesheet for "native" elements produced by the likes of WordPress, while using the @import function to bring in code from plugin stylesheets or third-party elements. This further enhances page efficiency, as the stylesheets are bound together behind the scenes while the HTML code remains lightweight and efficient.
4. Always Validate XHTML and CSS Code Throughout the Design Process
It's easy to get lost in the middle of a great design, largely forgetting about the differences between classes and IDs, or between stylesheet linking and importing. After a while, in fact, everything simply begins to look the same. This can lead to coding errors and inefficiencies that might not appear to the naked eye, and might not necessarily impact the website's design. even so, they'll be considered "invalid" by the W3C and therefore force browsers into what is known as "quirks mode."
This "quirks mode" slows down the browser, and the website, contributing to a less usable experience overall for end users. Quirks mode is especially painful on slower and older computer systems. The W3C validator is a great way to counter this, as it's made by the very same people who actually define and determine web standards that should be implemented across all design types.
The W3C maintains two separate validator services, with one targeting XHTML and HTML5 while the other works exclusively with stylesheets. The first validator can point out when an ID should be a class, or vice versa, while the second can show basic errors in stylesheet syntax and semantics. By employing both, designers can easily spot basic flaws in their code that, while not fatal, would certainly be inefficient for daily use by end users.
5. Work with a CSS Editor When Starting Out
It's hard to be an expert when CSS is an entirely new concept, so those new to stylesheets should feel free to code like beginners. That means leaving things like Notepad or TextEdit behind and instead employing a basic CSS editor that will help with the development of semantically sound stylesheet code.
These CSS editor applications work by actually color-coding each element, showing the difference between classes and IDs, highlighting "open" elements that are missing brackets or semicolons, and calling attention to many other common pitfalls associated with stylesheet creation and design. Often, they allow for concurrent design of HTML documents so that both the stylesheet and the actual HTML page can be perfectly designed and validated alongside each other as they progress.
Get Started with CSS as Soon as Possible
Without a doubt, CSS is the prevailing way to create robust website designs that work across a large number of browsers, devices, and operating systems. Because of its universal nature and the ease with which it can style a website, it's unlikely that CSS will be going away anytime soon. Beginner web designers should take the above tips to heart, find a CSS development application, and start learning the basics of stylesheet design. The process will quickly become easier, more straightforward, and even enjoyable, with practice and a little bit of time.
David, 7 March, 2013
Hi Markus - thanks for your comment. The article has now been updated!
Markus, 7 March, 2013
Thanks for a good post David. The blog-post class seems to be missing on the first div in the example though.