[an error occurred while processing this directive]
Go to Bottom Nav - April 21, 2018 - No exercises at this time - ERRORblah Happy Holidays and Semester Break!

Roots

CSS or Cascading Style Sheets introduced the concept of styles to web page construction. Styles are used extensively in the desktop publishing field. If you have used page layout applications like PageMaker, Quark, and InDesign or word processing applications like Word, Word Perfect, or AppleWorks; you have probably used styles. In these applications, you are able to define the parameters of an item on the page such as font, leading, and size, and apply these parameters or style so succeeding elements of the page.

The strength in using styles come in editing; rather than manually editing each element of a document, changing the style will change every element it is applied to automatically. This saves time almost exponentially in relation to the size of the document; it wouldn't take too much time to manually edit a two page document, but consider a 200 page document...

Separating Content and Presentation

Through HTML 3.2, the <font> tag was the main way to change the face, color, and size of text in an HTML document. This had many drawbacks. The primary drawback for web developers was tedious coding and arduous editing. Using the <font> tag properly meant using it often which meant that much more time editing. CSS allows site wide changes instantaneously via editing an external style sheet. This is very similar to changing a style in a page layout or text editing program.

Another drawback has become equally important as technology shapes and moves our lives: separating the content (ideas and/or information) from the presentation ("look" and/or formatting) in documents. Why so important? Increasingly, web pages will be viewed on devices other than computer monitors. Web browsing cell phones, WebTV, and downloadable eBooks already exist. It is a great asset to have your information coded in a way that makes it useful on any device that can reach it.

The other compelling reason for separating content and presentation is to make your information more useful to those with differing abilities. Speaking web browsers can be confused by "old school" coding. Separate content eliminates the clutter of unneeded formatting tags.

Separation Accomplished

Content is separated from presentation by only using HTML tags in your document that impart context and using CSS to control the "look" or presentation of the document. Headings outline the main and secondary ideas of a document. Paragraphs are individual thoughts that "flesh out" these ideas. Lists also add context; horizontal rules separate sections on a page.

Some HTML tags only effect appearance. These include <font>, <b>, and <i> tags as main offenders. Substitute <strong> for bold tags, <em> for italic tags, and use CSS to replace font tags completely.

CSS Caveats

Browsers, browsers, browsers

The CSS 1 specification was completed in 1996; the CSS 2 (positioning) speck in 1998. Internet Explorer 3 had very limited CSS support. Each version has gotten more speck compliant. Netscape 4x has varying and limited CSS support. Supposedly, versions of Netscape and IE six and above are specifications compliant. (Personally, I take such pronouncements with a grain of salt...) Other browsers have various levels of support, check with their authors to find out.

Such uneven support means you need to test your pages in a number of browsers. The positioning aspect of CSS is problematic for the "transitional" browsers; often using a blend of CSS and tables will keep the majority of browsers happy.


Move on to CSS syntax.
Check out related CSS links on the resources page.

Heading One
Ut pharetra, ante eget imperdiet ullamcorper, tortor nunc sollicitudin orci, non cursus neque nisl eget ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum, nibh in suscipit interdum, velit magna volutpat turpis, at ornare sem magna et tellus. Sed pulvinar facilisis ligula, id vehicula eros sollicitudin a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Heading Two
Vivamus vestibulum, augue id iaculis sodales, odio odio feugiat arcu, scelerisque congue nisi ipsum vitae orci. Nunc sed ligula quam. Cras sed iaculis neque. Proin ultricies consectetur tortor, eu pulvinar sapien commodo ac. Cras diam arcu, lacinia id mattis ut, convallis sed massa. Nullam ut arcu lacus. Suspendisse ultricies elementum arcu ut dictum.
Heading Three
Sed aliquet augue ut ligula porta gravida pellentesque sapien semper. Duis mauris massa, semper pulvinar eleifend id, tincidunt fermentum nulla. Proin ipsum neque, imperdiet in vestibulum non, hendrerit ac nisi. Maecenas eleifend libero quis urna lacinia elementum. Etiam mi massa, sollicitudin nec accumsan in, aliquet in dui. Pellentesque consequat diam quis felis luctus a vehicula lectus mollis.
Pull Down Menu Close Menu