• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 3. Creating a Web Page Layout wi... > Understanding why CSS can help your ...

Understanding why CSS can help your site — and you

We include many code examples in this chapter and the preceding one that show the old‐fashioned HTML way of doing things — as compared to the new‐fashioned CSS way. In some cases, such as with the borders and padding, the benefits of CSS are very clear. For example, you can apply borders to many different types of elements, such as paragraphs and bullets. You can also control the color, width, and style of borders with CSS. You can even specify that the borders appear only on some sides, such as the bottom and left, but not on others. HTML only allows for borders on tables, and those borders are either all the way around or none at all. In other cases, it might not be as clear to you until after you start to work with your site. But know that when you design your site with CSS, you're making things much easier for yourself. When using CSS, you can

  • Easily make changes to the presentation of your content. Imagine having to find all the font tags and change them all in an extensive Web site. Simple Find and Replace often doesn't work because of the inconsistent way the tags are coded. It's possible to have hundreds of variations of the font tags that all look the same on the Web page but are coded differently, which makes Find and Replace utilities useless.

  • Easily discern the original meaning of your content. When working with older, “anything that makes it look good” type techniques, you often cannot tell what the different parts of the page content are visually looking at it. Old‐style HTML allows for using tags improperly, like applying properties to a font tag that makes a paragraph tag display as though it is a heading. Not easy to fix. If you manage to strip out the old font tags, you also strip out the visual cues that can help you to recode the page properly.

    For example, if you set up your page as a block of content with <br> tags to separate it visually into paragraphs and <font> tags to make headings look different, it would be difficult to figure out what was what if the tags were disrupted or deleted. Also, users can create their own style sheets. The ability to create these style sheets is particularly important for people who are visually impaired, who develop their custom style sheets with the assumption that your paragraphs will be marked up as paragraphs and headings will be headings. If your site is not coded properly, it can make your site much more difficult for these individuals to use because their style sheets won't work as they expect them to.

  • Make your site friendly to all who visit — no matter where they are or what their situation. Another reason to use CSS and HTML properly is that an increasing number of people are using the Web, and many of those people aren't using a computer to do it — they're using handhelds, phones, and other devices. In addition, some of your visitors don't have perfect vision and hearing, and many don't have a fancy computer with great speakers. The point is that the Web is more accessible than ever, and you have to be mindful of the wide variety of situations and visitors — and code your pages so that your visitors can easily use your site.

    Again, some users will have customized style sheets so they can use the Internet. One reason a person would have a customized style sheet is to make font sizes larger or to specify how a screen reader will aurally signal different parts of a document to compensate for visual impairments. Information about aural style sheets can be found on the World Wide Web Consortium site at www.w3.org/TR/REC-CSS2/aural.html.

We spend time in this chapter showing how true the preceding bullets are, but first, we want to give you some quick notes about the View Source technique and integrating CSS with other tools.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint