Basic HTML/CSS Programming Basic HTML/CSS Programming using Adobe Dreamweaverusing Adobe Dreamweaver

Adobe Dreamweaver is a web software application that provides total support for website creation and management. This advanced program meets the needs of many skills levels, from professional web designers to beginners just learning about webpage creation

HTML/CSS Coding with FONT

Learning how to use fonts will make your

work a lot easier once you can determine

what type of font is suitable for your web

page.

There are 5 TYPES OF FONT FAMILIES and

3 of them are commonly used on any

User’s PC and on the Web; The other two

families are used but not so common.

5 CSS Font Families: Generic Names - grouped with similar looks (the 1st 3 are the most commonly used, web-safe fonts)

• Monospace → they all have the same fixed width. E.g

Courier, MS Courier New, Prestige, Everson Mono

• Serifs → they have finishing strokes, flared or tapering ends.E.g

Times New Roman, Bodoni, Garamond, Minion Web, ITC StoneSerif, MS Georgia, Bitstream

Cyberbit

• Sans-serifs → they have stroke endings that are plain.E.g

MS Trebuchet, ITC Avant

Garde

Gothic, MS Arial, MS Verdana,Univers, Futura, ITC Stone Sans, Gill Sans, Akzidenz

Grotesk,Helvetica

• Fantasy → are primarily decorative while still containing representations

ofcharacters. E.g

Alpha Geometrique, Critter, Cottonwood, FB Reactor,Studz

• Cursive → generally have either joining strokes or other cursive characteristicsbeyond those of italic typefaces E.g

Caflisch

Script, Adobe Poetica,Sanvito, Ex Ponto, Snell Roundhand, Zapf-Chancery.

1. font family property

In styling text in your HTML document, one of the properties used is the font family property. It is used in 2 ways:

•

You can either call a particular font to be used on your text.E.g. font-family: arial;

•

Or use a combination of families. (You can specify the font family along with the generic family name so if that particular font doesn’t exist, it can use an alternative font in the list.)

E.g. font-family: arial, verdana, sans-serif;

E.g. font-family: Times New Roman, Georgia, serif;

when doing a combination, the syntax is to name a font followed by a comma then name another font followed by a comma and finally the generic family name of those fonts.

*In using a combination of fonts, they must be in the same generic families.

Note: not all browsers displays the same output as your codes demand, each browser have different standard defaults that is why it is much safer and advisable to use combination of families.

Properties of FONT

Now lets start coding on our stylesheet…

Click HTML from the ‘Create New’

list above.

here, I applied a combination of font family.

After saving and clicking on browse icon, This should be the output that you will see on the browser..

2. Font Style It specifies the font style of the text. There are four values that can be applied to this property, namely: normal, italic, oblique, inherit

E.g.

font-style: italic;

Here’s the output when using italics as font-style property value.. Try encoding the other values to see how the output looks like.

3. Font Variant This is used to specify whether or not a text should be displayed in a small-caps font. The property value for font variant are : normal, small-caps, inherit

E.g.

font-variant: small-caps;

Here’s the output when using small-caps value in font-variant property.. Try encoding the other values to see how the output looks like.

4. Font Weight

This is used to specify the weight of a font, in your HTML document, you can specify how much weight a text can bear using the font weight property. the values are : normal, bold, bolder, lighter, 100, 200, 300, 400,500, 600,700, 800, 900, inherit

E.g.

font-weight: 300;

Here’s the output with 300 as the font-weight value.. Try encoding the other values to see how the output looks like.

5. Font Size This is used to specify the size of text of your font. normally on any browser or on most commonly popular browsers, the text font size default value is set to 16px; that’s if you didn’t specify any font size for your text in your HTML or CSS document. the values for font size are :

xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, length [unit of measurement], %, inherit

E.g.

font-size: medium;

Here’s the output when you use large as the value in font-size property.. Try encoding the other values to see how the output looks like.

6. Font (Shorthand property) There is a shortened way to write out the code for each and every font declaration –

writing it on just 1

line, you can group all the properties for your fonts. It is written in this order (with space in between each declaration).

font: font-style font-variant font-weight font- size/line-height font-family

E.g.

font: italic normal 200 xx-large Arial, Helvetica, sans- serif;

This is the output in using the shorthand method in writing font

properties

From simple Text,

you’re now able to

implement different

styles on your

documents using

Fonts. ;)