CSS - Working with Text

What is the difference between the "pre" and "pre-line" options?

"pre" accepts all line-breaks and whitespace, while "pre-line" ignores the whitespace

Fill in the blanks to make the text underlined:

#mystyle { text-decoration: underline; }

Make the text italic:

#styled {font-style:italic;}

Fill in the blanks to set the vertical alignment of all elements having class="test" to bottom:

.test { vertical-align: bottom; }

Negative values can be used with the vertical-align property.

True

Which measurement units cannot be used with the word-spacing property?

feet, yards

Which CSS property is used for bolding the text?

font-weight

Fill in the blanks to make the text of all h1 elements bold, red and 14px:

h1 { font-size: 14 px; font-weight: bold; color: red; :

What numeric values are used for the font-weight property?

100-900

The text-decoration Property

Another value of text-decoration property is blink which makes the text blink. This value is valid but is deprecated and most browsers ignore it.

The color Property

Another way of defining colors is using hexadecimal values and RGB. Hexadecimal form is a pound sign (#) followed by at most, 6 hex values (0-F). RGB defines the individual values for Red, Green, and Blue.

Using Negative Values

For defining an extra space between characters, negative values are also permitted.

Which of the following options are accepted by the color property?

Hexadecimal Color names

Which of the following indicate the purpose of the "nowrap" option?

It puts the whole text in one line. It collapses all sequences of whitespace into a single whitespace.

Does the vertical-align property act the same way for all elements?

No

The color Property

The CSS color property specifies the color of the text.One method of specifying the color of the text is using a color name: like red, green, blue, etc.

The vertical-align Property

The vertical-align property also takes the following values: baseline, sub, super, % and px (or pt, cm). Instead of px values, you can use pt (points), cm (centimeters) and % (percentage) values.

Drag and drop from the options below to make the font of the paragraph "Arial":

p { font-family: Arial }

Rearrange the code to create a style rule:

p { font-size:large; }

What is the format of the value for the text-shadow property?

horizontal position vertical position blur color

Why is the name of one of the fonts put in quotes?

it consists of two or more words

What value of the text-decoration property substitutes the HTML S tag?

line-through

The font-variant Property

The CSS font-variant property allows you to convert your font to all small caps. The values can be set as normal, small-caps, and inherit. Not every font supports CSS font-variant, so be sure to test before you publish.

The position of which block is specified by the text-indent property?

The first line of the text block

The font-family Property

The font-family Property The font-family property specifies the font for an element.There are two types of font family names:-font family: a specific font family (like Times New Roman or Arial)-generic family: a group of font families with a similar look (like Serif or Monospace) Separate each value with a comma to indicate that they are alternatives.If the name of a font family is more than one word, it must be in quotation marks: "Times New Roman".

The font-family Property

The font-family property should hold several font names as a "fallback" system. When specifying a web font in a CSS style, add more than one font name, in order to avoid unexpected behaviors. If the client computer for some reason doesn't have the one you choose, it will try the next one. It is a good practice to specify a generic font family, to let the browser pick a similar font in the generic family, if no other fonts are available. body {font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;}If the browser does not support the font Arial, it tries the next fonts (Helvetica Neue, then Helvetica). If the browser doesn't have any of them, it will try the generic sans-serif.Remember to use quotation marks if the font name consists of more than one word.

The font-size Property

The font-size property sets the size of a font. One way to set the size of fonts on the web is to use keywords. For example xx-small, small, medium, large, larger, etc. Keywords are useful if you do not want the user to be able to increase the size of the font because it will adversely affect your site's appearance.

The font-style Property

The font-style property has three values: normal, italic, and oblique. Oblique is very similar to italic, but less supported. The HTML <i> tag will produce exactly the same result as the italic font style.

The font-style Property

The font-style property is typically used to specify italic text. p.italic { font-style: italic; }

The font-weight Property

The font-weight controls the boldness or thickness of the text. The values can be set as normal (default size), bold, bolder, and lighter.

The letter-spacing Property

The letter-spacing property specifies the space between characters in a text. The values can be set as:- normal defines the default style with no extra space between characters- length defines an extra space between characters using measurement units like px, pt, cm, mm, etc.;- inherit inherits the property from its parent element;

The text-align Property

The text-align property specifies the horizontal alignment of text in an element. By default, text on your website is aligned to the left. However, at times you may require a different alignment.text-align property values are as follows: left, right, center, and justify. When text-align is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight (as in magazines and newspapers).

The text-decoration Property

The text-decoration property specifies how the text will be decorated.Commonly used values are:none - The default value, this defines a normal text inherit - Inherits this property from its parent element over line - Draws a horizontal line above the text underline - Draws a horizontal line below the text line-through - draws a horizontal line through the text (substitutes the HTML <s> tag) You can combine the underline, overline, or line-through values in a space-separated list to add multiple decoration lines.

The text-indent Property

The text-indent property specifies how much horizontal space should be left before the beginning of the first line of the text. Property values are length (px, pt, cm, em, etc.), %, and inherit. Negative values are allowed. The first line will be indented to the left if the value is negative.

The text-shadow Property

The text-shadow property adds shadow to text.It takes four values: the first value defines the distance of the shadow in the x (horizontal) direction, the second value sets the distance in the y (vertical) direction, the third value defines the blur of the shadow, and the fourth value sets the color. To add more than one shadow to the text, add a comma-separated list of shadows.

The text-transform Property

The text-transform CSS property specifies how to capitalize an element's text. For example, it can be used to make text appear with each word capitalized.

The vertical-align Property

The vertical-align property sets an element's vertical alignment. Commonly used values are top, middle, and bottom.

The white-space Values

The white-space property also supports other values: pre - text will only wrap on line breaks and white space pre-line - text will wrap where there is a break in code, but extra white space is still ignored pre-wrap - text will wrap when necessary, and on line breaks Pre-wrap value behaves as the pre value, except that it adds extra line breaks to prevent the text breaking out of the element's box.

The white-space Property

The white-space property specifies how white-space inside an element is handled. The values can be set as normal, inherit, nowrap, etc. The nowrap value makes the text continue on the same line until a <br> tag is encountered, and also collapses all sequences of whitespace into a single whitespace. The text will continue on the same line until a <br /> tag is encountered.

The word-spacing Property

The word-spacing property specifies the space between words in a text. Just like the letter-spacing property, you can set the word-spacing values as normal, length, and inherit. When a weird spacing is used, and it is necessary to keep the selected paragraph with normal word spacing, the normal option is usually used.

Measurement Units

To define an extra space between words, you can use positive measurement values like px, pt, pc, cm, mm, inches, em, and ex. Negative values are also permitted. Here is an example to show the difference.

text-transform Values

Using text-transform property you can make text appear in all-uppercase or all-lowercase. The value none will produce no capitalization effect at all.

The vertical-align Property

Vertical align property does not act the same way for all elements. display: inline-table; and display: table-cell; styling rules are applied to make the vertical-align property work with divs.

text-shadow with Blur Effect

When working with shadows, you can use any CSS-supported color format. For the x and y offsets, various types of units can be used (like px, cm, mm, in, pc, pt, etc). Negative values are also supported. Internet Explorer 9 and earlier do not support the text-shadow property.

The font-weight Property

You can also define the font weight with a number from 100(thin) to 900(thick), according to how thick you want the text to be.400 is the same as normal, and 700 is the same as bold. The HTML <strong> tag also makes the text bold.

The font-size Property

You can also use numerical values in pixels or ems to manipulate font size.Setting the font size in pixel values (px) is a good choice when you need pixel accuracy, and it gives you full control over the text size. The em size unit is another way to set the font size (em is a relative size unit). It allows all major browsers to resize the text. If you haven't set the font size anywhere on the page, then it is the browser default size, which is 16px. To calculate the em size, just use the following formula: em = pixels / 16

Fill in the blanks to make the paragraph red and bold:

p { color: red' font-weight: bold; text-decoration:none; font-size: 16px; }

Drag and drop from the options below to set the letter spacing of the paragraph:

p { letter-spacing: 4px; }

Fill in the blanks to make the word-spacing 15px:

p { word-spacing: 15px; }

Create a text shadow with horizontal and vertical distance of 5px and blur radius of 2px:

p { text-shadow: 5px 5px 2px; }

Make the text of the paragraph small capitals:

p {font-variant:small-caps;}

What is the correct CSS syntax for making all p elements bold?

p {font-weight:bold;}

Drag and drop from the options below to make each word capitalized in the paragraph:

p.capfirst { text-transform: capitalize; }

Drag and drop from the options below to make the text of the "colored" class green

p.colored { color:green }

What value is NOT used with the font-style property?

slant

Which option is NOT supported by the text-transform property?

small-caps