Resizable Text And Cascading Style Sheets.


When using cascading style sheets (either internal or external) to design the layout of a web page, text can be resizable or not, depending on how you specify the font size. If you choose an absolute font size, such as "12pt" or "12px", the text will not resize when the user tries to change it. If you use any of the other ways of specifying font-size, such as a percent, or smaller/larger, or x-small/small/medium/large/x-large, etc., then the text will be resizable for the user.


Absolute Font Size

This text will not resize when you use either Ctrl-Scroll (hold down the Ctrl button while moving the mouse wheel up and down) or when you select View, Text Size from the IE browser menu. This is because the specified the font size for this paragraph style is "12pt" in the external style sheet.

p.noresize {margin-left:70; margin-right:70; font-size:12pt; }


Percent Relative Font Size

This text will resize when you use either Ctrl-Scroll or View, Text size in the IE browser window. This is because the specified the font size for this paragraph is "100%" in the external style sheet.

p.percent {margin-left:70; margin-right:70; font-size:100%; }


Size Name Font Size

This text will resize when you use either Ctrl-Scroll or View, Text size in the IE browser window. This is because the specified the font size for this paragraph is "small" in the external style sheet.

p.small {margin-left:70; margin-right:70; font-size: small; }