OK – I’m a beginner. I have done a few bits and pieces, and even made a couple of web sites (some still exist) but I am not ready to become a full-time webmaster just yet.
The thing is that I don’t do web work regularly enough to make it worth my while to learn about it all in depth, but just lately I saw a good article about using cascading stylesheets, and wanted to share it.
CSS is pretty useful – if I want to change the entire look and feel of a site by editing just one file, then I can – as long as that file has all of the bits and pieces in it that are necessary. So I did a bit of reading about what bits and pieces are necessary, and ended up here. Wow.
And which bit was the interesting bit?
I’ll tell you – I was looking at how to cut down the ‘weight’ of code used to make a page, and part of that meant cutting down on the number of images. Problem is, we like images, and they can be used to great effect in many ways. I then stumbled across how to make fairly complex shapes out of blocks (or ‘divs’ as we ‘pseudo professional webmasters’ tend to call them). You can colour your divs – you can make them into different rectangular shapes, and you can ‘float’ them left and right, etc. But the really, really cool thing is that each div can have a border, and each border (top, right, bottom, left) can have a different colour… and width. The borders have a nice ‘mitre’ to them so that they join together and it is this one single fact that allows you to create shapes from just the borders.
What you do is define a box that has really fat borders, and NO space inside it for text. If you colour two borders the same (typically right and bottom, and top and left) then they form a pair of triangles. You can set different border widths on different sides of the box as well, so you can get all kinds of different triangles to form. You can even place boxes next to each other and use the borders that are adjacent to make diamonds, or pyramids, etc.
There are some limitations, of course. Not every type of triangle can be created (mostly variations on right-angled ones) and a triangle has to have one of it’s edges vertical or horizontal (since it is an edge to a rectangular box), but nevertheless it’s a pretty cool way to define blocks of colour to use instead of gifs for backgrounds, etc. Other restrictions are apparent when you look at how IE uses this ‘box model’ compared to how other browsers do it, and there are some workarounds to making it look the same (ish).
The incutio.com site has a wealth of great info and links to other CSS sites and discussions about CSS – I’m beginning to wonder how I ever survived without CSS, and why on earth I ever used tables for page layout at all!