Cascading Style Sheet – What is CSS?

CSS stands for “cascading style sheet” and is one of the handiest and most convenient “inventions” to use when building web pages. Just one sheet entitled “style.css” can dictate the structure, presentation and style of the page. When using html alone, the pages tend to get long and messy. It is sometimes difficult to differentiate the content from the form of the page. Early php was particularly cumbersome, as everything was mashed together, and although in principle, it was easy to modify, it became a tangled web especially when trying to find a missing bracket or an extra character.

CSS changed all that and made nice, neat compartments so that revising a page or changing the layout became a breeze. The presentation or design of the site is controlled by the style sheet, while the content is managed by some other form such as php. The other problem with html styling was the need for tables. When you see columns on the internet, they are made by way of “tables”. To complicate the issue, “nested tables”, those within a larger table became a nightmare to manage. CSS made it infinitely easier to manage these tasks.

The last issue which posed a nuisance in the earlier days of website development was the repetition. Each html page required the same information for the design and layout. Thus, if the design changed or something needed tweaking, every page within the site required modification. Hours were wasted mindlessly changing small snippets of code on possibly hundreds or thousands of pages. Now, in order to give a website a new appearance, only one sheet needs rewriting. Then all pages within the website follow the commands of that sheet.

CSS is particularly useful when more than one design is required in the same website. Very large websites have many reasons for certain sections to look different than others and css suits this purpose very well. Basically, the style sheet controls font size and color, link types whether underlined for example, color of links, text, background, and columns, size of columns, logos, and graphics, and spacing or padding between columns.

Each section or “div” is given a name and that name is used accordingly on the appropriate page to correspond with the style sheet. Style sheets are quite effective as everything is written in blocks. Thus, changing a color or border width for instance would be a minor task. Additionally css tells the webpage where to load pictures (left, right or center), how far away from the text the picture should be placed, how wide and tall the picture should be, and whether it should be surrounded by a border or not. Generally, the sheet follows the intuitive layout of a page. The sheet begins with the page width and colors, then moves down to the logo or header, and then down all the way to the footer (the bottom of the page).

Finally, although it is more common and probably prudent to keep an external style sheet, there are a few scenarios where one would place the css at the top of a page keeping it directly with the other code. In conclusion, css provides greater flexibility, reduces bandwidth costs, increases productivity of both the site load time and webmaster time, and allows for easy maintenance.