  This is a new monthly column. It's for you if you know a little bit of HTML. You'd like to jazz up your Web site a little, or maybe you've seen some nifty Web tricks and wondered how the heck they did that. But you're not about to learn a programming language or study a 900 page manual. Neither am I. And I'm going to share my lazy tricks with you.
Cascading Style SheetsCascading Style Sheets, or CSS, are an HTML coding option that allows webmasters to apply display styles to each page of a web site by setting up templates. HTML was invented to structure information, not to make it pretty. The tag <H1>, for example, means the most important headline. It also creates the biggest text. If you use <H1> to make a trivial thing big, you have committed a terrible HTML faux pas. I do it all the time. CSS separates style from structure - its purpose in life to make things pretty.If you've ever created a Web page using Microsoft Word and then looked at the resulting HTML code, you've seen CSS is all of its complicated glory. I have a book on CSS - indeed I do. It's sitting there on the bookshelf just waiting until I have a free week to memorize it. But the true beauty of CSS is that it's not an all-or-nothing proposition. You can use the bits of it you want without having to learn the entire package. And that's exactly what I do.
CSS TricksHighlighted textCollege students use yellow highlighter pens to mark important information in their textbooks. You can do the same thing in HTML using CSS - make text look like it's been run over by a highlighter. This is a two-part process. First, nested in the <HEAD> tag somewhere (I shove all of this stuff in below the <TITLE> tag) enter this code: <style type="text/css"><!--.HL {background: yellow;color: black;} --></style>You can substitute the hex codes for the colors: #ffff00 for the yellow highlight and #000000 for the black text. You can also change these colors to whatever ones you prefer. When you want to highlight a string of text, you use a modified <FONT> tag: <font class="HL">type text here</font> To see this in action — and to learn some variations on the code — open this popup window. No underline on links Here's another trick: get rid of the underlines under your hyperlinks. This is a dangerous move - people expect links to be underlined and may become confused if they are not. However, this might fit your design and is easy to change if it befuddles visitors. Just add this line nested somewhere within the <HEAD></HEAD>tags: <style>a{text-decoration:none}</style>Change Scrollbar Colors This trick has no redeeming value except to astound people. The normal scrollbar is in shades of gray, unless the visitor to your Web page has installed a Windows theme that overrides this default. You can make the scrollbar any color you want. Nest this code within the <HEAD> tag: <STYLE type="text/css">You can use either hex codes or color names. The parts of the scrollbar are obscure: the most important are the face color (the rectangle that moves up and down) and the base color (the background track.) Arrow is the little up and down arrows; dark shadow is the far right edge and shadow is the next color in from that. Highlight color is a sliver along the left edge of the scrollbar face. To see this in action — and view a labeled chart of the parts of the scrollbar — open this popup window. Format Text in a Table I use tables a lot and in a radical departure from my usual lazy ways, I hand code them. A nasty feature of tables is that each element - each <TD> tag - has to be formatted separately. You haven't truly suffered until you've typed <FONT FACE="Verdana, Arial, Helvetica, sans-serif COLOR="black" SIZE="-1"></FONT> 100 times. Well, never again. CSS has a shortcut - the <TBODY> tag: <tbody align="center" style="font-family:verdana,arial,Helvetica,sans-serif; color:black; background-color:yellow; size:-1"> If you want the entire table to be formatted this way, insert the <tbody> tag right after the <table>tag and insert </tbody> at the end just before the </table> tag. You can also use <tbody> for a row <TR> or even a cell<TD>. Just include the attributes that you want changed: if you don't want to change the background color, leave off that bit. Is This Too Easy?Yes, this does seem too easy and in one way it is. CSS doesn't work with older browsers - it was fully implemented in ver. 4 of Netscape Navigator and Internet Explorer. Things may display oddly in Netscape - always check your coding in that browser. For most of the tricks I've described here, it won't matter. If the scroll bar doesn't change color your whole site won't collapse. Older browsers will just ignore what they don't understand.CSS is, I suspect, worth learning. With it you can create one style sheet and have your entire Web site feed off of it. It makes your pages load faster and saves your time, especially when you want to revamp the look of your site. One of my goals is to master CSS, but in the meantime, I'll borrow what I need and ignore the rest. Susan Ives is a former president of Alamo PC. She archives these columns on her Web site, www.susanives.com/lazy. If you visit, you can cut-and-paste the code instead of retyping it from the magazine - the ultimate in lazy Webmastering!  |