[an error occurred while processing this directive]
Go to Bottom Nav - October 19, 2018 - No exercises at this time - ERRORblah Happy Holidays and Semester Break!

Text formatting with CSS offers many more options than the oft used <font> tag, which limits your choices to face, size and color. This page will go through a few properties that you may apply.

The <span> tag is used to illustrate these properties. Wrap the span tags around small amounts of text. To apply styles to multiple elements, use the <div> tag. It is designed to surround multiple elements. The <span> tag is an inline element; the <div> tag is a block level element.

font-family
PropertyValueExample
font-family family name The quick brown fox jumped over the lazy turquoise dog.
Choose the font with this property If a font family name has spaces in the title, such as "Comic Sans MS", use quotes to enclose it. Code for this example:
<span style="font-family: Trebuchet, Arial, Verdana, sans-serif;">
font-style
PropertyValueExample
font-style oblique or italic The quick brown fox jumped over the lazy turquoise dog.
  The browser should substitute oblique for italic if italic is not available. Your mileage may vary. Use normal as the value to remove italic or oblique styling. Code for this example:
<span style="font-style: italic;">
font-weight
PropertyValueExample
font-weight bold

bolder or lighter

100 to 900 in multiples of 100, 400=book weight and 700=bold
The quick brown fox jumped over the lazy turquoise dog.
Values may be absolute or variable Not all fonts will have nine sizes and they do not have uniformity in the way they scale from font family to font family. Use normal as the value to remove bolding. Code for this example:
<span style="font-weight: 900">
font-size
PropertyValueExample
font-size Absolute sizes: xx-small, x-small, small, medium, large, x-large, xx-large

Relative sizes: smaller or larger

Exact sizes: pt (points) or px (pixels)

Percentage: Specify a percent the current font size, whether default or specified. (i.e. 200% of 12pt is 24pt).
The quick brown fox jumped over the lazy turquoise dog.
Values may be absolute or variable Deciding to use absolute or variable values is a matter for debate. Code for this example:
<span style="font-size: 200%">
line-height
PropertyValueExample
line-height Exact sizes: pt, px, em...

Relative sizes: A number that is a multiplier of the font size

Percentage: A percent the current font size, whether default or specified. (120% is often used in the print world).
The quick brown fox jumped over the lazy turquoise dog.
Values may be absolute or variable Deciding to use absolute or variable values is another matter for debate. Code for this example:
<span style="line-height: 1.85">
color
PropertyValueExample
color color name: one of the 16 predefined names such as blue, gray, green, red, etc.

hex color: #rrggbb - hexadecimal color number that you are used to using on the web.

rgb: Specify in 0-255 or % in rgb(r, g, b) or rgb(r%, g%, b%) formats respectively
The quick brown fox jumped over the lazy turquoise dog.
  Using the web safe palette for your text colors may save you from some platform related surprizes Code for this example:
<span style="color: red">
margin
PropertyValueExample
margin

Margins may be specified for all sides: left, right, top, bottom.

As with font-size, use pixels, points, percent, em... Mix the values if needed.

Use a string of four numbers separated by a space to specify the margins in order: top right bottom left.

Use margin-top:, margin-right:, margin-bottom: or margin-left: to specify individual margins.

The quick brown fox jumped over the lazy turquoise dog.
Values may be absolute or variable Deciding to use absolute or variable values is another matter for debate. Code for this example:
<div style=" margin: 0px 20px 0px 20px;">

These are enough of the properties available to you to give you a good start. Look for more in your textbook or in the online resources.

Heading One
Ut pharetra, ante eget imperdiet ullamcorper, tortor nunc sollicitudin orci, non cursus neque nisl eget ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum, nibh in suscipit interdum, velit magna volutpat turpis, at ornare sem magna et tellus. Sed pulvinar facilisis ligula, id vehicula eros sollicitudin a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Heading Two
Vivamus vestibulum, augue id iaculis sodales, odio odio feugiat arcu, scelerisque congue nisi ipsum vitae orci. Nunc sed ligula quam. Cras sed iaculis neque. Proin ultricies consectetur tortor, eu pulvinar sapien commodo ac. Cras diam arcu, lacinia id mattis ut, convallis sed massa. Nullam ut arcu lacus. Suspendisse ultricies elementum arcu ut dictum.
Heading Three
Sed aliquet augue ut ligula porta gravida pellentesque sapien semper. Duis mauris massa, semper pulvinar eleifend id, tincidunt fermentum nulla. Proin ipsum neque, imperdiet in vestibulum non, hendrerit ac nisi. Maecenas eleifend libero quis urna lacinia elementum. Etiam mi massa, sollicitudin nec accumsan in, aliquet in dui. Pellentesque consequat diam quis felis luctus a vehicula lectus mollis.
Pull Down Menu Close Menu