Our Jibberish blog

Web Design CSS Tutorial

Written by Don on December 2nd, 2009

Cascading Style Sheets (CSS) is a style sheet language which is used to describe the presentation semantics of a document written in a mark-up language. The most common application of CSS is to style web pages written in HTML and XHTML. The language can be applied to any kind of XML document, including SVG and XUL.

Cascading Style Sheets is designed primarily to enable the separation of document content from document presentation, including elements such as the layoutcolors, and fonts. This improves the content accessibility, provide more flexibility and control in the specification of presentation characteristics.

The styles can be decided as per your wish, within the structure of the language. For example, if you want all your H1 size headings to be in red text, and if you want all your paragraphs to have the first line indented by 20 pixels, then you can create the rules that define those styles. After the rules are created, every time you use an H1 heading it will be in red text, and every time you start a new paragraph the first line will be indented by 20 pixels.

Few of CSS techniques are as follows

3 Columns, The Holy Grail of page layouts — The most easy technique and perhaps the most sought after layout. It is easy to understand, easy to implement.

2 Columns, ALA Style —this is an extremely easy layout to implement requiring only a simple float, left declaration.

4 Columns, All Fluid — this technique can actually provide as many columns on a page. However there are a few drawbacks, it gets difficult quickly if you want to make any of the columns a fixed width. It relies heavily on percentages, which the various browsers all calculate differently, placing your columns very precisely. Still this is a very useful technique

3 Columns, All Fluid — A much simpler technique and potentially more useful technique that then 4 column technique. It uses float: left, suffers from needing percentage widths for each column, and from potential column wrapping when the browser window is narrowed.

Static Width and Centred — The 3 columns all with static widths, and contained in a parent DIV which remains cantered in the window. One rather serious limitation of this particular technique is that the layer gets broken if any of the three content DIVs contains an image or a really long word that is longer than the width of the DIV. Each browser breaks it differently.

Nested Float — It is very simple layout and its features a nested, floated menu in the upper right and a variation of this technique is in use on this very page.

There are a lot of advantages using CSS. Cincinnati Web Design would be an ideal option for using CSS software and techniques

  • Easy maintenance
  • A style sheet allows companies to easily adopt a house look and feel, and this will help give readers a sense of where they are and what they are reading. Style sheets can be pointed to from Web documents via hyperlinks. If the company later changes the house style they only need to make changes in one particular place. Set different page margins for all sides of your pages
  • Words can be highlighted, entire paragraphs, headings or even individual LETTERS with different background colors, also you can overlap words and make logo-type headers without making images.
  • Precise positioning of elements could be done
This entry was posted on Wednesday, December 2nd, 2009 at 7:35 pm and is filed under Design, Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply