18
May
May
This is a quick introduction into the world of CSS (Cascading Style Sheets) and its matrix called box model. This article adresses beginners in the fields of webdesign and CSS-development. In order to work with the following technique, you should be familiar with the basics of HTML-coding.
The methods of developing websites with the use of tables, frames or iframes are obsolete because the sourcecode of those techniques lacks quality (not XHTML conform, unnecessary sourcecode, not suitable for search engines and so on). You could be familiar with the use of tables in order to design your websites so at the beginning it may be a little difficult to switch to CSS. If you need some help to start with CSS, you could search the web for tutorials (there are some beginner tutorials, e.g. on W3C or About.com).
So this article deals with the basics of how the basic CSS-elements are assembled. The “boxes” or “containers” in CSS are called “divisions” which are declared by the DIV-tag. A basic DIV-construction with an included “CSS-style”-tag (“inline-style”) may look like this:
<div style="width:300px; height:200px; padding:10px;">Text</div><html>
<head>
<style type="text/css">
/* <![CDATA[ */
div#examplebox {
width:300px;
height:200px;
padding:10px;
}
/* ]]> */
</style>
</head>
<body>
<div id="examplebox">Text</div>
</body>
</html>
The left figure shows a three-dimensional view of how the CSS-properties are ordered. As you can see you can define many spaces in your DIV-container so there’s a lot of freedom to design your website with CSS.The right figure illustrates the names and positions of the certain properties so every property is self-explaining. The names shown in the figure comply with the names of the CSS-properties, so “border-top” for example is the space between “margin-top” and “padding-top”. The “border-property“ is the only property which can have a color (hexadecimal code) which is declared with the “-color”-definition. A colored bottom-border would be declared like this:
<div style="border-bottom-color:#FF0000; border-bottom-style:solid; border-bottom-width:10px;">Text</div>Now let’s have a look on how the CSS-code has to look like for those DIV-containers with margin, padding, size and position-properties. I’m only showing the “<style>…</style>”-part which has to be placed in the “<head>…</head>-part of your HTML-code (as you can see it in the code above – I’ll skip the "CDATA"-part which should be used together with inline-styles in XHTML-documents).
<style type="text/css">
div#examplebox {
position:relative;
top:120px;
left:20px;
width:300px;
height:200px;
margin-top:8px;
padding-top:10px;
padding-bottom:5px;
border:2px #FF0000 solid;
}
</style>So the CSS-properties margin, padding and bottom can be written as shorthand. The definitions of right, left, top and bottom go clockwise starting from “top”. To understand what I’m meaning, just take a look at the following code:
<style type="text/css">
div#examplebox {
/* One line per property */
margin-top:5px;
margin-right:3px;
margin-bottom:8px;
margin-left:2px;
/* Shorthand - margin: top right bottom left */
margin:5px 3px 8px 2px;
/* Another shorthand - margin: top/bottom left/right */
margin:5px 2px; /* = top/bottom:5px and left/right:2px */
/* And a three-value shorthand - margin: top right/left bottom */
margin:5px 2px 4px; /* = top:5px, left/right:2px, bottom:4px */
}
</style>
The figure demonstrates the difference on the width-property but this difference also refers to the height-property of course. As you can see you have to think of the total width/height of your DIV-boxes in order to retain an accurate design. For example if you set the properties “width:200px;padding:20px;” to a DIV-box, the total width is “240px” in Firefox/Opera/Safari while in Internet Explorer, the total width is only “200px” because Internet Explorer doesn’t add the padding/border to the “width”-property. As mentioned above, this difference only appears when Internet Explorer is in Quirks Mode (which is set if you don’t define a Doctype (DTD) for your HTML-document, so always set a DTD but don’t set “<?xml version=“1.0” encoding=”…” ?>” because this line will cause Quirks Mode in Internet Explorer 6). If you define a doctype (e.g. XHTML 1.0 Transitional), the calculation of the total width/height in Internet Explorer 6/7 will behave like in other browsers. Internet Explorer 5 (on Windows) will always “use” the wrong calculation.Always test your CSS-configuration in as many browsers as possible because there may always be some differences with the interpretation of CSS-code.
Just experiment with the use of CSS because it’s an ease to work with.
