Krista's Coding Corner


CSS, the art instructor

To continue the series of posts about webpages, let’s talk about the .css-files.

Like it is written in the post 36 CSS is all about the looks: how the structure and content is supposed to be drawn on the screen (okay, it can be used also for sound). CSS is like a summary of all different styles and fonts you use on your page.

CSS doesn’t force the browser to do anything: it merely gives it good suggestions. That’s why you can change in your browser settings many things about visualization: font size, color, appearance of links... And the browser prefers to follow those settings.

Anyone can look at my source code (most likely you can right-click my page and select “source code” from the menu, depending on your browser). Here is a screenshot about it:

From the link to my .css-file you’ll find this: (naturally without my doodles :P)

Bit messy? Yes, very, but everything needed is there. You can surf the Internet and find thousands and thousands of pages telling how to do these. Creating good looking CSS is quite close to a magic as CSS is still today quite a clumsy way to create visualization. Most of the cool effects you might see are actually some sort of eye tricks because the language is not capable to do really complicated things. Hmm… like it was a difficult thing to get the menu bar where is “About” and “Archive” to stay in place.

One important thing to remember is that people do have very different sized screens. Even if your page looks nice with your full screen, it doesn’t mean that it works with other widths. Here is an example what can happen:

Just open this link and resize your browser window. The page fragments.

PS. If something bugs me, it is the pages that are made for super large and good quality screens only. They just don’t work or look good with lesser equipment. Especially small fonts are irritating as they probably were made by some (professional) designers who have huge and really accurate screens where the font was still nicely visible… but most of us don’t have those screens. So, please: always check how things look with other computers and also with phones! (is the page otherwise pretty, I hardly have anything to say to that, but at least make it functional).

blog comments powered by Disqus