Thursday 3 Apr 2008

A good start with CSS

CSSWeb developpers are more and more educated directly on CSS instead of the old presentation with a lot of tables. :twisted: However some are still in the transition and find CSS difficult.

Little help on things to think before going in the code.

The fisrt thing to do is to think by "blocks". Read the following carefuly, even if you think you are good in HTML, especialy if your knowledge is from some years ago! ;-)

There are in HTML some block elements (<p>, <table>, <div>...) and others are inline elements (<strong>, <em>, <span>...). They all indicate "something", i.e. a text in a <strong> element is more important. If you only want a bold text for design purpose, you must use a <span> with a bold style.

An inline element must always be in a block element, and a block element can't be in an inline element. This will probably explain to you some errors from W3C validator! <div> and <span> are both elements with no signification, and only be used for visual goals. The first is a block type, for heavy styling. The 2d is inline to emphasize a piece of text.

Take the example of this blog, even if it's not perfect*. There is a block title in the top, 2 columns to place and the main body of the website.
Don't search complication: the body goes in the <body> element where we will assign some margin and padding to keep the room on the top and on the sides.

*Note: This blog is not a good example because the theme author used 3 div elements, not necessary, to contain the text. The 2 elements html and body in the CSS file are enough to obtain exactly the same reseult. I don't have the motivation to rebuild the theme, but it may have a little impact on search-engine results (lighter is better) and makes unnecessarily bigger CSS. Don't forget in XHTML, the html element can also receive a CSS style, and body can have a diffrent background color like here.

The title and the 2 columns go in some <div>, element without "weight" we wille place at the end of our HTML pages. We will move them in the right place with absolute position in CSS. For example:

  position: absolute;
  top: 200px;
  left: 10%;

Why at the end? Because it's only a visual information. The important text is the central text, it must start the page. , search engines read HTML without CSS style. It's better it read the interesting content first, instead of finding a menu and 2 columns which are on all pages! :-)

To check how a website is seen without CSS style, it's easy:

  • with Firefox go in the View menu, Style and select none
  • with Opera click on the glasses icon, then on the Author mode button

café Did this article help you? 
Buy me a coffee!

One answer at “A good start with CSS”

  1. Backlink from Oh a naked site! «CSS naked day 2008» - Azure Dev

Leave a comment (all comments are moderated, don't waste time with spam)

Azure Dev