Overview: Styling with Cascading Style Sheets

Alternative and creative. Site must be viewed at 1024 X 1168 resolution.

Using Style        Sheets

For Text Placement 

...and Web Links 

Please examine the title just above this paragraph. You will notice that it has three different text styles in three different colours and that they overlap. This title plate is not a picture. It is done with Cascading Style Sheets, otherwise known as CSS. See  Font Styles  for more information on font types and  3D Text  for more information on images versus CSS. To the left of this paragraph is a working menu, completely created with CSS. This menu keeps you informed of which page you are currently viewing and the whole look is very stylish (no pun intended.) Please see our  Menu  section for more information on menus and navigation systems.

Please also note that the paragraphs above and below this one, each have completely different indentations and margins than this one, also done with CSS. Within these three paragraphs we have also included differently styled mouse over links, again achieved through CSS. The links use different fonts, colours and hover styles, to give an idea of the power and possibilities that CSS gives the designer. Run your mouse over them and check them out.

The beauty of Cascading Style Sheets is that ALL the style for a website can be set on a separate page which is referenced within the HTML source. Placement of images and text can be  absolutely positioned  giving complete control to the designer; as opposed to working with HTML alone, where the use of tables with rows and columns allows very little control. And, when the client wants to change the look of the site, the designer only has to change one page, the Style Sheet and the changes will cascade throughout the entire website. The links at left will take you to further pages designed to educate and demonstrate the power of CSS.

The last, but not least, very important property of CSS is that it makes DHTML or  Dynamic HTML  possible, when combined with JavaScript. Dynamicism is seen throughout our elle A Designs site and is the property that allows image objects and text to be expanded, contracted, moved, and animated.