Text and Image Formatting: CSS Class Notes

Updated: Aug 18

Mobiprep has created last-minute notes for all topics of Text and Image Formatting to help you with the revision of concepts for your university examinations. So let’s get started with the lecture notes on Text and Image Formatting.

  1. Table and Lists

  2. CSS Layout

  3. Pseudo - class

  4. CSS

  5. Selectors and Declarations

  6. Box Model

  7. Text and Image Formatting

  8. Icons, Lists and Links

  9. Colors

Our team has curated a list of the most important questions asked in universities such as DU, DTU, VIT, SRM, IP, Pune University, Manipal University, and many more. The questions are created from the previous year's question papers of colleges and universities.

  1. List the different CSS Text properties.

  2. What are the different types of text alignments?

  3. Explain Text Direction with example.

  4. Explain the Text Decoration property in CSS.

  5. What are the different CSS Font properties?

Text and Image Formatting

Question 1 - List the different CSS Text properties.

Answer- Text properties:

  • text.spacing

  • text.transform

  • text.underline

  • text.strikethrough

  • text.overline

  • text.color

  • text.background

Text spacing causes letters within a word to be `spaced out'. The normal inter-letter spaces are multiplied by the given factor. The factor can be given as a decimal or as a percentage: `%' simply means `times 0.01'. Note that spacing is different from justifying a line (which only changes spaces between words) and expansion (which stretches the letters themselves).

Text transformation can change upper case into lower case and vice versa, provided the characters have an upper/lower case equivalent. (The application will have a mapping table built in). Note that text transformation is different from selecting a `small-caps' style for text.style, although a font transformation and a size change together may occasionally serve as a poor man's small-caps if a real small-caps font is not available.

Underlines, overlines and strike-through lines are applied to letters and also to spaces between words, even when those spaces are stretched as a result of line justification. Spaces that are the result of tabs (<TAB> in HTML) do not get lines. The visually best position of the lines can often be found in the meta-information of a font. If the font has no such parameters, the application should use some heuristics.

The background color can have the special value `none', to indicate that the background of the window itself is used. `None' effectively means `transparent'. This is different from no value at all, since in that case the property is inherited and the parent's background color need not be transparent.

The area that is colored by the background color depends on other properties of the element. If the element is block-like (i.e, it has both a line break before and after it), the color will fill a rectangle that includes the whitespace around the element. Otherwise only the background behind letters and spaces is filled and margins and tabs are left to an ancestor element. See below for the precise filling rules when the element is block-like


Question 2 - What are the different types of text alignments?

The text-align property is used to set the horizontal alignment of a text.A text can be left or right aligned, centered, or justified.

The following example shows center aligned, and left and right aligned text (left alignment is default if text direction is left-to-right, and right alignment is default if text direction is right-to-left):


h1 {
text-align: center;

h2 {
text-align: left;

h3 {
text-align: right;

When the text-align property is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers):


div {
text-align: justify;


Question 3 - Explain Text Direction with example.

The direction and unicode-bidi properties can be used to change the text direction of an element:


p {
direction: rtl;
unicode-bidi: bidi-override;


Question 4 - Explain the Text Decoration property in CSS.

Answer- The text-decoration property is used to set or remove decorations from text.

The value text-decoration: none; is often used to remove underlines from links:


a {
text-decoration: none;

The other text-decoration values are used to decorate text:


h1 {
text-decoration: overline;

h2 {
text-decoration: line-through;

h3 {
text-decoration: underline;


Question 5 - What are the different CSS Font properties?

In CSS, we use the font-family property to specify the font of a text.

The font-family property should hold several font names as a "fallback" system, to ensure maximum compatibility between browsers/operating systems. Start with the font you want, and end with a generic family (to let the browser pick a similar font in the generic family, if no other fonts are available). The font names should be separated with comma.

Note: If the font name is more than one word, it must be in quotation marks, like: "Times New Roman".

5 views0 comments

Recent Posts

See All