This blog is about Graphic Design, Vector Art, and Cartoon Illustration

CSS tags explained

There is much more flexibility in using CSS to create page layout than just plain HTML in tables. So much, in fact, that it seems overwhelming!

A CSS rule can be based on an HTML tag - that's the easy one - where I started. This just changes the appearance of a common HTML tag, like an H1 or an H2. Like any page layout, all you need is body text (determined in the body tag), headlines (set by using a CSS tag rule) and a caption (which can be set as a class - see below).

A CSS rule can also determine a unique part of a page. That's the ID. Within this space on the page you can determine size, color and specifics of all HTML tags.

A CSS class rule simplifies the modification of HTML elements. For example, you can set a class to make it easy to make text a particular color, font or size. Use a class to create a caption style.

A CSS compound let's you modify an HTML tag such as the a element. It is what you would use to modify elements contained within a specific ID tag, too.

CSS layouts are intended to work on browsers. They are not an adaptation of a print layout mindset. If you're laying out your page like a newspaper, it will be a mess on a browser. It will look terrible and be hard for people to read and navigate. This is what browsers want: a header, a navigation bar, main content, a sidebar (left and right if you must) and a footer. More than that is just a tangle.

The web has come of age. Design for it.