Text and Font Styles

Question 1

What will be the output of the following CSS?

p {
    font-weight: bold;
}

<p>Hello World!</p>

Answer 1

The text “Hello World!” will be bold.

Question 2

How do you make the text inside this <h1> element blue?
HTML

<h1>Welcome</h1>

Answer 2

h1 {
    color: blue;
}

Question 3

Write the CSS rule to make all <p> elements italic.

Answer 3

p {
    font-style: italic;
}

Question 4

What CSS property is missing in this code to make the text underlined?

p {
    _ : underline;
}

Answer 4

text-decoration

Question 5

Fix the error in this CSS rule to correctly center-align text inside <div>.

div {
    text-align: middle;
}

Answer 5

div {
    text-align: center;
}

Question 6

What will be the result of this CSS on the <p> element?

p {
    text-transform: uppercase;
}

<p>hello world</p>

Answer 6

The text will be displayed as “HELLO WORLD”

Question 7

How do you apply a text shadow effect to this heading?
HTML

<h1>Shadow Effect</h1>

Answer 7

h1 {
    text-shadow: 2px 2px 4px gray;
}

Question 8

Write the CSS rule to give a paragraph both letter-spacing of 3px and word-spacing of 6px.

Answer 8

p {
    letter-spacing: 3px;
    word-spacing: 6px;
}

Question 9

What does this CSS do?

p {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

Answer 9

It truncates overflowing text and adds an ellipsis (…).

Question 10

What CSS property should be added to break long words inside this div?

div {
    width: 200px;
    border: 1px solid black;
}

Answer 10

word-break: break-word;

Question 11

What will be the result of this CSS rule?

p {
    font-variant: small-caps;
}

<p>Web Development</p>

Answer 11

The text will be displayed as “WEB DEVELOPMENT” but with lowercase letters in small caps.

Question 12

Which CSS rule correctly applies a right-to-left text direction?

<p>مرحبا بالعالم</p>

Answer 12

css

p {
    direction: rtl;
}

Question 13

Write a CSS rule that makes text vertical and aligned from right to left.

Answer 13

p {
    writing-mode: vertical-rl;
}

Question 14

What does this CSS do?

p {
    font-feature-settings: "liga" 1;
}

Answer 14

It enables ligatures in fonts that support them.

Question 15

Fix the mistake in this CSS rule:

h2 {
    font-variant-position: superscript;
}

Answer 15

h2 {
    font-variant-position: super;
}

Question 16

What happens if you apply this CSS?

span {
    font-variant-numeric: oldstyle-nums;
}

<span>12345</span>

Answer 16

The numbers will appear in an old-style numeral format.

Question 17

Write a CSS rule to apply discretionary ligatures to text.

Answer 17

p {
    font-variant-ligatures: discretionary-ligatures;
}

Question 18

How do you ensure text maintains legibility with optimized rendering?

Answer 18

p {
    text-rendering: optimizeLegibility;
}

Question 19

What will happen with this CSS applied?

p {
    overflow-wrap: break-word;
}

<p>Thisisaverylongwordwithoutanyspaces.</p>

Answer 19

The word will break to fit within the container.

Question 20

Which CSS property allows you to control whether hyphens appear automatically?

Answer 20

hyphens: auto;