Andrea's Blogger Templates

You can add styles directly to the head  of a document by placing them between  style tags; however, this is not a very sensible way to apply styles to a document. If you want to create another page using the same styles, you would have to duplicate the CSS on the new page. If you then wanted to change a style, you would have to do it in two places rather than one. Luckily, CSS allows us to keep all our styles in one or more external style sheets. There are two ways to attach external style sheets to a web page. You can link to them or you can import them:

You do not have to confine importing to an HTML document. You can also import one style sheet from another style sheet. This allows you to link to your basic style sheet from the HTML page and then import your more complicated styles into that style sheet:

Breaking your CSS into multiple style sheets used to be a common approach and was the method I recommended in the first edition of this book. However, recent browser benchmarking has shown that importing style sheets can be slower than linking to them.

There are two other speed related problems when using multiple CSS files. First off, multiple files will result in more packets being sent from the server, and it’s the number, rather than the contents, of these packets that affects download time. Furthermore, browsers are only able to download a limited number of concurrent files from the same domain at any one time. For older browsers, this limit used to be a paltry two files, although modern browsers have upped this to eight. So in an older browser, if you have three style sheets, you would have to wait for the first two files to download before it starts downloading  the third. Because of these reasons, a single, well-structured CSS file can help improve download speeds considerably.

A single CSS file also allows you to keep all your code in one place. I used to recommend splitting up your code for easy maintenance. However, it was always difficult to decide if a specific declaration related to the layout or the typography of the site. Often, it could relate to both, and you’d end up making arbitrary decisions where to put them. This approach also meant having to keep multiple style sheets open and continually swapping between files. With features like code folding being built into most modern CSS editors, it’s now much easier to edit a single page than it used to be. So for these reasons, I tend to prefer a single CSS file over several smaller ones. That being said, it really does depend on the site in question, so there are no hard and fast rules here.

When writing your own style sheets, you will have a good idea how they are structured, what problems you have encountered, and why things have been done a certain way. But if you come back to that style sheet in six months, there is a good chance you will have forgotten much of this. Additionally, you may need to hand your CSS to somebody else for implementation, or another developer may have to edit your code in the future. It is therefore a good idea to comment your code.

Adding comments in CSS is very simple. A CSS comment starts with /* and ends with */. This type of commenting is known as C-style commenting, as it is the type of comment used in the C programming language. Comments can be single or multiline and can appear anywhere within the code.

If your CSS files become very long, finding the style you want can be difficult. One way to speed things up is to add a flag to each of your comment headers. A  flag is simply an extra word preceding your header text that does not naturally appear in your CSS files. A search for your flag followed by the first couple of letters in your comment header will take you right to the part of the file you’re looking for. So in this example, a search for “@group typ” will take you straight to the typography section of your style sheet:

If you happen to use the OS X editor, CSS Edit, this format is used to create a simple yet effective means of navigating your style sheet.