Tuesday, February 5, 2008

CSS vs. CSS-P: What's the Difference?

Cascading Style Sheets (CSS) are sets of instructions given to a web browser in order to describe the presentation of a web page (HTML/XHTML). CSS is used to set styles for font families, font sizes, border thickness and color, and similar information about how a web page (or site) should look. CSS-P (CSS-Positioning) is a subset of the CSS language that is used to describe the position of these HTML or XHTML elements.

Content vs. Presentation
In using CSS, one of the key concepts to understand early is the separation of the content layer from the presentation layer. (For the rest of this article I will refer to a web page and its content as XHTML instead of HTML, as we are moving away from HTML to the use of XHTML).In following the generally accepted standards of modern web design, an XHTML page should provide content only. There should be no presentational information in your XHTML markup. Accordingly, tags and "bgfont-weight: bold;">CSS-P
CSS-P is simply the term used to describe the group of CSS properties used to position and layout web pages. These properties include float, clear, absolute and relative. The disadvantage of using CSS-P is that not all older browsers support CSS-P properties and certain browsers interpret CSS-P elements differently.

Summary
Using stylesheets for your basic elements such as fonts and colors is a great way to get started using CSS. You will find your site is much easier to maintain using CSS for these presentational elements compared to similar updating using a strictly table-based layout with your presentational information built into your XHTML (note that your stylesheets won't validate properly with tags such as present). If you want to move to a purely CSS-based layout (which is a great thing to do), understand that there are limitations of using the CSS-P subset of properties: many older browsers don't fully support or only partially support CSS-P properties, and even many modern browsers still differ slightly in their interpretation of CSS-P properties so some tweaking of your CSS will likely be necessary to get your page to view successfully on multiple browsers.





Copyright © 2008 David A. Wank.
I encourage you to send any questions to davidwATshorthillsdesign.com. (replace "AT" with "@")
For website development and personal computer instruction, please visit my website: Short Hills Design.

No comments: