Posts tagged with "CSS"

Why Tables Are Bad

Saturday, 8. October 2005, 20:09:54

If you have ever put your nose into web design, you have probably heard that tables are bad for web design. Why is that? Tables are meant to be used for tabular information, not for positioning of layout elements. Not all browsers support tables is the second reason. The source code is also messy and complicated and makes it harder one the web designer himself when trying to modify things in a document with tables. There are also other reasons why tables should not be used to lay out documents.

CSS is the answer to tableless layouts. In actual fact, without CSS, you'd have to use tables to make pages look like those designed by print designers. There is a great article by Maxine Sherring about this which explaines why tables should not be used to lay out pages and how CSS replaces them: The layout is dead, long live the layout.

Maxine says:

There are many good reasons not to use tables to create web page layouts: unnecessarily complication code, they defy the most basic rule of information storage and retrieval by mixing content with appearance, they destroy logical document flow, and most of all, they were not a tool which was created to do this job. Why continue using them when CSS has a whole suite of far superior page layout features, with the added bonus of streamlined code, separation of content appearance and caomplete control over logical document flow?

Do read the rest of the article, as it does have some valuable information which you will need to know to understand the rest of this article.

How to Avoid Tables

Now that we found out the various reasons why tables should not be used for web design, you are probably asking yourself: "But how do you replace them?" The answer is block-level elements (or box elements). These are basically sections of a document. With CSS you can specify exactly where a certain block-level is on the page. You can give a measure in pixels or on percentages. Percentages are useful when you want to create a layout that expands depending on the resolution of the viewer's screen.

You can specfy a position relative to the top of the page, the left, the right or the bottom. For example you could say that a certain section of your page (like a paragraph) is to be 50 pixels away from the top, or 50 pixels from the object above it. Or you can say that it is to be25 pixels away from the left. It is usually better just to specify the distance of an object from either one side and either top and bottom, to avoid strange effects in your page. In the example above it is sufficient to say that an block-level element is 50 pixels away from the top and 25 away from the left, without having to specify the distance from the bottom and from the left. Of course which side you decide to specify will be up to what you are trying to do with your design.

Block-elements are composed of several parts. See the full explanation in here.

Heading, paragraphs, lists are all block-level elements and there are more. You can also create block level elements by surrounding parts of your page with <div> tags. By using <div> </div> tags, you are saying that the content surrounded by those tags are a section of a document and as such you can position it on your page as you would to with heading and paragraphs. You can have paragraphs inside <div> tags but not viceversa. <div> tags inside a paragraph will break it.

Next article: The <span> Tag, <div>'s Brother But Not Really

2 comments

CSS Syntax

Saturday, 8. October 2005, 14:45:08

web design, CSS, design, internet

CSS "commands", style rules is the proper name, are composed of:

selector {property:value}

The selector is the HTML element to be specified, i.e., the element that will be affected by the rule which is expressed in between curly brackets. The rule is composed of a property, which is the "part" of the HTML element that you want to modify, and the value of the property. Property and value compose the declaration.

So if you want a paragraph to be red, you take the paragraph selector (p) and specify that its color property (color) has the red value (red). In CSS it translates:

p {color:red}

This is the result:

This is a red paragraph. It's a short paragraph, but it's stil la paragraph. So stop arguiing about it!

Property and value are separated by a colon. If you are specifing more than one property, they have to be separated by a semi-colon:

p {color:red;align:left}

The example above will result in a left aligned red paragraph.

If the value is composed of more than one word, set the value between quotation marks:

p {font-family: "sans serif"}

This paragraph will use only sans serif fonts. Which font you will see is usually specified in one of the preferences of your browser (or of the browser of the person that will look at the page). If your browser's preference says that you will see Helvetica every time it finds the "sans serif" value you will see Helvetica, but if someone else's preferences are set to Arial, they will see Arial.

You can group selectors so they all have the same properties. If you want all of your headings to have the same colour, whether they are h1, h2 and so on, you can either write it like this:

h1 {color:red} h2 {color:red} h3 {color:red}

Or you can write it like this:

h1, h2, h3 {color:red}

The last method is much faster and more orderly. Each selector is to be separated by a comma.

While it isn't necessary, if you are specifying several rules, you can put them on different lines, so it's easier for you to locate them at a later stage. So the previous example with the red, right aligned paragraph would be written like this:

p { color:red; align:left }

When using inline styles (explained in What is CSS?) the syntax changes slightly. You have to say that you are about to apply a style (using style=). The rule then follows within quotation marks instead of curly brakets. Here is an example:

<h1 style="color:red;font:arial">This is a heading</h1>

The result is this:

This is a heading

No comments

What is CSS?

Wednesday, 5. October 2005, 11:05:18

CSS, web design

CSS stands for Cascading Style Sheet.

It's a method of specyfing how elements in an HTML page will look, i.e., it's a method of specifying the style of elements in a page. While HTML tags say: "This is a paragraph", "This is a headline" and so on, Cascading Style Sheets specify how those paragraphs, headlines and so on actually look.

One can write style sheets in external files, called "external style sheet". One can use one external style sheet for any number of HTML files. Therefore, one can change the appearance of many HTML files just by changing one style sheet. This can save a lot of time.

Why are they called Cascading Style Sheets? Because there is a hierarchy where styles specified in one place take priority over styles specified in another place. It is said that those styles then cascade inside each other.

One can in actual fact define styles from his browser. An example is one of Opera's preferences that allows you to specify which font you will see when looking at web pages where the is not specified.

Then you have the aforementioned external style sheet. That will override the default browser's styles.

Next is the internal style sheet, inside the <head> tag of a page. That overrides both the browser's styles and the external styles.

Last but not least is the inline style. This overrides all of the above and is specified withing a tag. So you could have an external style sheet (or an internal one) stating that all your paragraphs will use Arial. But you can specify with an inline style that one of those paragraphs has to use Verdana.

So you get:
1. Browser styles
2. External style sheet
3. Internal styles
4. Inline styles

The last one has the most priority and will override the previous ones.

No comments