CSS Interview Questions
This page consists of CSS interview questions and answers.
For this we use the font-family property.
font-family
It takes comma separated font family names.
In the following example we are setting the font family to Helvetica, Arial and san-serif.
Helvetica
Arial
san-serif
body { font-family: Helvetica, Arial, sans-serif; }
For this we use the text-transform property.
text-transform
In the following example we are transforming text of a paragraph having class toUpper.
toUpper
p.toUpper { text-transform: uppercase }
For this we use the text-transform property and set it to capitalize.
capitalize
In the following example we are transforming the text of a paragraph having class toCapitalize.
toCapitalize
p.toCapitalize { text-transform: capitalize; }
For this we use the text-decoration property.
text-decoration
We are setting underline for a paragraph having class underline.
underline
p.underline { text-decoration: underline; }
For this we use the font-style property and set it to italic.
font-style
italic
In the following example we are setting the text of a paragraph having class italic to italic.
p.italic { font-style: italic; }
For this we have to embedded the font file in the head tag and then set the font-family.
head
In the following example we are using Roboto font from Google Fonts.
Roboto
<!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>
For this we use the @import and set it to the url of the font family.
@import
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; }
For this we use the font-size property and set it to the desired value.
font-size
In the following example we are setting the font size of all the paragraphs to 16 pixels.
p { font-size: 16px; }
For this we use the text-align property and set it to right.
text-align
right
In the following example we are right aligning the text of a paragraph having class align-right.
align-right
p.align-right { text-align: right; }
For this we use the word-spacing property.
word-spacing
In the following example we are increasing the word spacing of a paragraph having class word-spacing-10 to 10px.
word-spacing-10
p.word-spacing-10 { word-spacing: 10px; }