CSS – Building and Updating Sites

Building and updating Sites

Previously web page tables were not intended to be used for layout and formatting, but designers soon caught on to the idea that the position of page elements could be controlled effectively by using tables. With the introduction of XHTML, presentation was separated from the structure allowing changes to be made to both areas without affecting the other. For example a CSS style sheet can be applied site wide, and can be changed at any time without disrupting the layout of the page or content simply because text is text. This made it a lot easier than changing the markup on every page.

Table based layouts are notoriously rigid and become more difficult to maintain consistency as the style, layout and design are independent on each page. This is due to the table layouts mixing visual data and content within the same page. CSS-based layouts separate presentation from the content, making updating information easier allowing you to make considerable appearance changes by simply altering a few values making maintenance cheaper and less labour intensive.  For example, say you want to change the width, height, and background image of the header that is found on every page of your website. Rather than having to edit every single page on your website  all you would need to do is: open up your external CSS style sheet, find the “header” div  change the values for the properties “background-image”, “width”, and “height” upload the style sheet with the new settings. Every page within your website that includes the header div will display the new header background image with its newly assigned width and height attributes. Very simple, very fast, very consistent.

With a CSS-based layout you have the ability to build more complex websites, w using table-based layouts, web designers are stuck with the grid that it forces you to adopt, with CSS-based layouts, by using Positioning of elements paired with the z-index property CSS-based designs can position elements where ever they want, even on top of one another allowing for more unique, creative, and beautiful layouts.

Speed

Website visitors are impatient and hate waiting for pages to load, if they have to wait too long they may decide to leave your website. When compared to the load time of a css based layout, table layouts take much longer to load, and an XHTML layout reduces the files size and reduces the loading speed of your pages. Table layouts are well known for redundant outdated markup, with multiple nestled tables which increases bandwidth resulting in slower load times. As Tables were originally intended to just display tables of data,   browsers are designed to ensure that each table downloads as a single entity. Any content that is contained in a table will not be displayed until all the contents of that table are downloaded to the  browser, Browsers read through tables twice before properly displaying their contents – once to determine the structure, and once to determine the content  and only appear on the screen when the entire table has been downloaded, as you can imagine with complex sites this can affect the load time of pages considerably – in addition to this there is also the issue of increased markup, Because the information on each page is independent from all of the other pages within a website, table-based layouts must be downloaded over, and over, and over again. CSS-based layouts, on the other hand, cache the style sheet information the first time a web page is loaded; therefore, as users no longer need to download presentational data with each page they visit.  it is only the unique content that is loaded on each page With tables when trying to create a visually appealing site design to create room  transparent gif image have often being used  solution in itself can and does cause major problems. Given a table with dozens (or even hundreds) of these transparent type images, the performance impacts of transparent GIFs on a web page can be significant.