Web Design (14) CSS Formatting Text

Formatting Text In Brackets, go to your ‘externalcss’ website and find the ‘formattingtext’ page. Use the ‘main’ area of your ‘formattingtext’ page to try out the following examples.

Fonts (1) font-family: 3 examples body {font-family: Georgia, serif;} Serif typefaces have decorative appendages h1 {font-family: Verdana, sans-serif;} Sans-serif typefaces have straight letter strokes p {font-family: Courier, monospace;} Monospace typefaces have a constant width Try these out in the ‘myfirst.css’ page and look at the result on the ‘formattingtext.html’ page

Fonts (2) font-sizes (absolute values) There are many ways of setting font-size, but we’ll start by working with pixels. Each of the text tags (p, h1, h2, h6) has a default size. If you wish to change this, simply code: font-size: 24px; This is an ‘absolute’ value. Again try this out in ‘myfirst.css’ and examine the effect.

Fonts (2) font-sizes (relative values) Relative changes to font-size can be achieved with percentages: font-size: 150%; And with ‘em’ (in printing an ‘em’ is based on the width of the capital letter M): font-size: 1.5em; Note: Relative measurements are especially important for creating websites that are to be seen on different screen sizes. Try these out in ‘myfirst.css’ …..

Fonts (3) weight & italics Font-weight choices: bold, bolder, lighter, 100, 200, …. 900 font-weight: bold; Italics: font-style: italic Try these out…………..

Text Color (1) (note US spelling!) With the color property either color names or numerical values can be used. Names include: black, white, purple, lime, navy, aqua, silver, maroon, fuchsia, olive, blue, orange, gray, red, green, yellow, teal So, to make the h1 elements in a document gray: h1 {color: gray;}

Text Color (2) Numerical values : # (black); #FFFFFF (white); # (purple); #00FF00 (lime); # (navy); #0000FF (aqua); #C0C0C0 (silver); # (maroon); #FF00FF (fuchsia); # (olive); #0000FF (blue); #FFA500 (orange); # (gray); #FF0000 (red); # (green); #FFFF00 (yellow); # (teal); So, to make the h1 elements in a document gray: h1 {color: #808080;} Again, see how text changes in your html page, as you introduce some of these colours.

Text Line Adjustments Just to mention ways in which text can be formatted, if you wish to do this: line-height (to give characters more space) text-indent (to set text in from the left) text-align (to align text onto a margin) text-decoration: underline or blink Try some of these ….

Other Text Adjustments Changing Capitalisation text-transform: capitalize or lowercase or uppercase Inserting Spaces letter-spacing and word-spacing p {letter-spacing: 8px;} Again, try these out in your ‘myfirst.css’ page

Text Shadow (1) h1 {color: darkgreen; text-shadow:.2em.2em silver;} The 2 measurements give a horizontal offset and a vertical offset. Here the shadow will appear lower than the text Try it out!

Text Shadow (2) To produce a shadow that is higher than the text, using minus values for the offsets. h1 {color: darkgreen; text-shadow: -.3em -.3em silver;} Try this!

Text Shadow (3) If you wish to achieve a more shadowy effect, add a third value, which gives it a blur: h1 {color: darkgreen; text-shadow:.2em.2em.05em silver;} Try it out!

Text Shadow (4) Note: the higher the blur value, the softer the blur. h1 {color: darkgreen; text-shadow:.2em.2em.3em silver;} Try this out!

Text Shadow (5) You could research other techniques using text-shadow, including: Multiple shadows, An outer glow, A raised look, An embossed look.