CSS Background!

Kinda boring but useful information.

Introduction

This section is an introduction to some of the background information that is important in understanding what is happening when we view a web page and why the technology has been arranged the way it has. It's a bit boring but understanding this will help in understanding why CSS was crated the way it was and why it behaves the way it does.

The Browser

When we view a web page, typically it is within a browser (either on a computer, tablet or smart phone). A lot of stuff is happening but it's largely behind the scenes so we don't really see it happening. The main component which turns the HTML (along with CSS and Javascript) into what we see is what is called a rendering engine. Here are some examples:

Firefox Chrome Safari Internet Explorer Opera

In the bad old days of the internet, rendering engines differed wildly in terms of how they interpreted our CSS. Your page could look quite different, even between different versions of a browser. Luckily, nowadays, they are all pretty consistent in how they will display your pages. The old experience of spending 10% of your time creating your pages and 90% testing and tweaking in all the different browsers to try and get consistency is largely a thing of the past.

There is an organisation called The W3C (World Wide Web Consortium) who is responsible for managing the CSS standard (HTML and Javascript also). A spinoff of this is WHATWG (Web Hypertext Application Technology Working Group).

It used to be that the specification was a bit ambiguous in places and also that certain vendors (looking at you Microsoft) differed from the specification to try and force you onto their platform. Thankfully those days are behind us and all the browsers implement the official CSS specification very close to completely. This means that you may write your code and it will look pretty much the same in every browser (though when you start getting into fancy stuff it can still be worth testing across browsers just to be sure).

How to write and view your CSS

CSS may be stored and transmitted in a variety of different ways but the most common (and easiest) is within a plain text file. We give the text file an extension of .css (to replace the standard .txt). You may write this file in any text editor you like. I won't recommend specific text editors but find one that does syntax highlighting, it will make your life much easier. There are many good free text editors out there for every Operating System. A quick Google search and you should have no trouble finding a suitable one.

Viewing your Pages

Once you've written your CSS and HTML you'll naturally want to see the result of your work. There are a few options here. If you have a webserver you may place your files there, then go to the relevant URL in your browser. If you don't have a webserver then you can easily just open your file locally and it will behave exactly the same. Unfortunately, browsers are changing their interfaces regularly nowadays so I can't tell you exactly how to do this but you want to find an option to open a file as opposed to a url. CTRL + o generally works as a keyboard shortcut to access this feature however. Another option is to drag your file onto the browser.

Debugging your CSS

Inevitably you're going to write CSS that doesn't render the way you thought it should. This can be frustrating as you're not going to get error messages or the ability to print things out to see what's going on (as you typically would with a programming language). It used to be the case that when this happened we fell back to trial and error until we figured it out, and this is still a valid and useful approach. Most modern browsers include inspection tools which allow us to get in and see what is happening and better understand it. They are very useful and I encourage you to play with them.

Firebug
  • FireFox - Go to Customise then add the option for Inspect to your toolbar.
  • Chrome - Go to Tools then select Developer Tools.
  • Safari - Keyboard shortcut is option + command + i
  • FireBug - This is an addon which may be added to most current popular browsers and works well for inspecting HTML as well. (FireBug for Firefox, FireBug Lite for all the others.)

I won't go into detail on how to use these tools. I think with a bit of exploring you shoudl be able to figure them out for the most part.

Learning from Others

A good part of learning to craft clean, elegant CSS is learning from others. As the saying goes:

If I have seen far it is from standing on the shoulders of giants.

It turns out that you can very easily view the code that was used to create any other web page you may view on the internet. When you come across websites that you like the look of, or have features which you would like to emulate I encourage you to look at the code and see how it was done.

You may do this in one of two main ways:

  • Right click on the page and select the option View Page Source (Or something to that effect).
  • Use one of the tools mentioned in the previous section.

Try it now with this page.

Now keep in mind that I'm not advocating blatantly copying other peoples code. That's not cool and you should never do it. To observe how they solved a particular problem and then to emulate that approach is ok however.

You will also have to judge for yourself the quality of the code you are looking at. Anyone can create web pages and put them on the internet. There is much that is great for leaning from but there is also much that may look nice in the browser but the underlying code is quite horrible.

Also be wary of computer generated code. Many websites have code that is generated by software rather than crafted from skilled developers. Often this code is rather generic and bloated and not something I would recommend you try and copy in your own work.