About the Internet
About Web Browsers
Why Domain Names
HTML vs XHTML
Making Webpage Files
Naming Webpage Files
About HTML Tags
Basic HTML Page
DTDs and Doctype Tags
Spaces and New Lines
Bold, Italics, More
Comments in HTML
How to Add Images
Sources of Images
Image File Formats
Color in HTML & CSS
"Web-safe" Color Chart
Formatting with Tables
Promoting Your Site
Cascading Style Sheets (CSS) Styles
Styles are written as a list of specifications in the format:
The : between the property and value and the ; at the end are important.
Many properties can be set, including font styles, sizes, colors, background and border colors, margins, indents, and padding.
Webreview.com has charts
listing which browsers let you set which properties and values using CSS.
Some Useful Properties
font-size can be specified several ways.
larger & smaller will make your font larger or smaller than the users default.
px will set the size of a font in pixels. Fonts specified in pixels will look about the same size on PC's and Mac's.
pt is a font measurement from printing. It will look smaller on a Mac than a PC. On a Mac the px and the pt size appear to be the same. On a PC the pt size can be much larger.
(eg: font-size:9pt; )
Percentage sizes can also be used
(eg: font-size:130%; )
I need to write a whole other section explaining serif and sans-serif fonts, and how the picking of fonts from a list goes in order. For now, if you are familiar with the face attribute of the font tag, this is the CSS equivalent. The difference is that in specifying fonts you don't put quotes around the whold thing, but you do put quotes around the names of a ny fonts that have more than one word names.
font-family:"comic sans ms","lucida console",fantasy; )
color on its own like this means the text (font) color. Set it using the RGB hex numbers.
bold or normal are the usual choices. You would use font-weight:normal; to override an otherwise bold style or tag, perhaps for an H1.
underline will underline text. none will keep a link from being underlined.
(eg: Link w/no underline and text-decoration:underline )
text-align behaves like align= in a paragraph tag does. It moves the alignment of the text afected by the style. This style only works on tags like div and p, ones that contain something. It is meaningless in an "inline" tag like span.
text-indent indents the first line of a paragraph the specified number of pixels. (eg: this whole definition has style="text-indent:30;" applied to it.
padding adds the specified number of pixels to each side of the contents of the tag. If you only want padding on a certain side, or if you want different amounts of padding on each side, you can specify different amounts for padding-left, padding-top, padding-right, and padding-bottom.
background-color obviously sets background color! Specify the color in the usual way.
width in pixels (px) or % can only apply to container tags like div, p, table, not to inline tags like span. Note that if there is no blanks for the browser to use to wrap the text, a longer line may force the width to be larger than specified.
<div style="width:30px;"> )