This is the second of 3 lectures looking at the web and how it fits into our world. Last week we looked at HTML, this week we are looking at Cascading Style Sheets or CSS. CSS is becoming increasingly important in the development of web pages but can be hard to get your head around at first. CSS is a major element in achieving the outcome of separating the content from the displaying of the content.
CSS is all about applying style to the page. When we say style however we are talking about much more than changing the size and color of some text, or making it italic or bold. With a properly organised page you can use CSS to control the entire layout. As I demonstrated in the lecture, with a particular page, set up correctly, I can use minor tweaks in a style sheet to control where a menu is presented on the screen. I can easily place it to the left or right of the content or above or below. All without touching any of the HTML.
This is powerful for us as many HTML documents can import the same CSS file. As a result the look and feel and layout of my entire site can be controlled from one single style sheet. This makes management a lot easier. It also makes achieving consistency a lot easier. I think consistency is important in creating a professional looking site that inspires confidence in it’s users.
The problem with learning effective use of CSS is that it is not always intuitive and that it can be very hard to troubleshoot. In normal programming you can just put in some error checking code (print out some variables) and follow the logic to find the flaw. This is a luxury you don’t have with style sheets. We need some other approaches instead.
Firstly, aim for simplicity. Highly nested elements is asking for trouble. Especially in getting your page to display consistently across browsers. Take a while to think about how you could structure you page in the most elegant manner. An hour or two thinking about your page and it’s layout can save you hours of head banging troubleshooting later on.
Secondly, make use of the border attribute. This can be really good for identifying the true boundary of an element on your page. It’s not quite error checking but it’s about the closest you’ve got. Sometimes you think an element should be only taking up a small part of the page but you find out that in fact it is quite different and you are one step closer to solving your problem.
Thirdly, look at how other people have solved similar problems. You can view the code of any page you can view on the web so take advantage of it.
Fourthly, create a set of dummy pages to test out different ideas.
Finally, keep at it. Don’t give up, you will get there eventually. It’s all experience and you benefit from all of it.