Page styling with CSS


What is CSS?

Cascading style sheets (CSS) are a neat way to create visual appeal to HTML code used in Web pages. In the past, HTML was styled "inline" to change colors, etc. While it is not uncommon to still see HTML elements customized with inline attributes and values, CSS offers a way to style an element once without having to re-write the same attributes and values repetitively.

Even more benefits of CSS

CSS offers one of the best returns for the time involved of nearly anything a designer can do with a page. As we already stated, we can style something, perhaps properties for images, links, or text, one time and not have to repetitiously type the same things. However, CSS lets a designer style elements differently depending on where they are on a page by creating CSS classes or ID's. These styles are then applied to the entire page without adding in lots of additional, messy code all over the place. Even better, if uniformity from page to page is desired, one CSS style sheet can be used to create visual effects and appearance throughout an entire site. If a section of the site requires some minor background and text color changes to differentiate it from the other pages, these pages can reference a different CSS stylesheet.

Internal and External CSS

As we alluded to, a page can access CSS styles in different ways. One way to utilize CSS is simply to insert it into the header section of a Web page. However, we can further reduce a page's clutter by using an external style sheet that the HTML page links to. This also lets the designer make sitewide changes through edits in just one place, one separate CSS style sheet. The alternative is to make changes to each page throughout the site. If a site is just a few pages, this is probably not a big deal. If the site has tens or hundreds of pages, the work to edit each page individually could be a significant inconvenience for the designer and expense for the client.