CSS Interview Questions - Set 5 - CSS Interview Questions - dyclassroom

This page consists of CSS interview questions and answers.

Q1: Which property helps in changing the font family?

For this we use the font-family property.

It takes comma separated font family names.

In the following example we are setting the font family to Helvetica, Arial and san-serif.

body {
  font-family: Helvetica, Arial, sans-serif;
}

Q2: How to make text of a paragraph all caps?

For this we use the text-transform property.

In the following example we are transforming text of a paragraph having class toUpper.

p.toUpper {
  text-transform: uppercase
}

Q3: How to capitalise text of a paragraph?

For this we use the text-transform property and set it to capitalize.

In the following example we are transforming the text of a paragraph having class toCapitalize.

p.toCapitalize {
  text-transform: capitalize;
}

Q4: How to underline a paragraph?

For this we use the text-decoration property.

We are setting underline for a paragraph having class underline.

p.underline {
  text-decoration: underline;
}

Q5: How to make a paragraph italic?

For this we use the font-style property and set it to italic.

In the following example we are setting the text of a paragraph having class italic to italic.

p.italic {
  font-style: italic;
}

Q6: How to use Google Fonts in a website?

For this we have to embedded the font file in the head tag and then set the font-family.

In the following example we are using Roboto font from Google Fonts.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Roboto">
    <style>
      body {
        font-family: "Roboto", Arial, serif;
      }
    </style>
  </head>
  <body>
    <p>Hello World!</p>
  </body>
</html>

Q7: How will you import a font family in css file?

For this we use the @import and set it to the url of the font family.

In the following example we are importing Roboto font family from Google Fonts.

@import url('https://fonts.googleapis.com/css?family=Roboto');

body {
  font-family: "Roboto", Arial, serif;
}

Q8: How will you change the size of a font?

For this we use the font-size property and set it to the desired value.

In the following example we are setting the font size of all the paragraphs to 16 pixels.

p {
  font-size: 16px;
}

Q9: How will you align a text in a paragraph to the right?

For this we use the text-align property and set it to right.

In the following example we are right aligning the text of a paragraph having class align-right.

p.align-right {
  text-align: right;
}

Q10: How will you increase the spacing between words in a paragraph?

For this we use the word-spacing property.

In the following example we are increasing the word spacing of a paragraph having class word-spacing-10 to 10px.

p.word-spacing-10 {
  word-spacing: 10px;
}