1 Using HTML and CSS
1.1 Styling
Formatting and semantic markup
Font size
Example:
Result:
Font typeface
You can set the font to whatever typeface you wish, but be aware that obscure fonts are unlikely to exist on most people's computers. Also note that fonts whose names have spaces in them must be surrounded by single quotes.
Example:
Result: Times New Roman
You can (and usually should) specify a list of fonts, separated by commas. Subsequent entries in the list are used if the first font is unavailable on a user's
system. Preferably, the list should end with what is known as a generic family name. The generic family names are serif, sans-serif, cursive, fantasy and monospace. These indicate what type of font should be substituted if the user has none of the specified fonts on their machine.
Example:
Result:
Example:
Result: Lucida or any cursive
Font color
There are two ways to specify font colours - by name or by value. Names are things like "Blue", "DarkOrchid", or "LightGoldenRodYellow" and a list
of the valid colour names can be found here. Values are specified with 8-bit hexadecimal values for each of the red, green and blue (RGB) channels.
They are preceded with a hash (#) sign.
Example:
Result:
Combining font settings
You can combine as many CSS properties into one style="" attribute as you like - each property : value pair should be separated by a semicolon
(which should also appear at the end of every style attribute).
Example:
Result:
Example:
Result:
Shorthand notation for font settings
Instead of setting the size, style and typeface individually, you can take advantage of the CSS font: shorthand notation. Basically, you simply put whatever
font settings you want, separated by spaces, in the font: property. You can put any valid value for font-style, font-variant, font-weight, font-size,
and font-family. For this shorthand notation to be recognized, you must include both a font-family setting, and a font-size setting.
Example:
Result:
Example:
Result: Italic, small caps, 14pt Arial
Interestingly, this is the only way we can access the line-height: property. Setting the line-height on its own won't work because it gets removed.
But the font: shorthand will accept a value for font-size that includes a line-height parameter (placed immediately after the font-size setting and
separated by a forward slash).
Example:
Result:
Headings
There are six different headers in HTML, with one being the most prominent.
Example:
Result:
Heading size five
HTML character entities
Character entities are used to insert special characters, including the < and > brackets that normally denote an HTML tag. You can find one list of character
entities here but there are many lists on the net.
Example:
Result: &< > " ¢ £ ¥© ® ™ °
