Css Practice Question
Css Practice Question
Q1. Write an inline CSS code to set the font of the heading element as 'Arial' and the text color to red.
ANS. <HTML>
<BODY>
<H1 STYLE=FONT-FAMILY:ARIAL; COLOR:RED;> HEADING 1</H1>
</BODY>
</HTML>
Q2. Write the equivalent inline CSS for the following : <body bgcolor="blue">
ANS . <HTML>
<BODY STYLE=BACKGROUND-COLOR:BLUE;>
</BODY>
</HTML>
Q3. Write the equivalent internal CSS for the following : <p style="color:blue;">Example</p>
ANS . <HTML>
<HEAD>
<STYLE>
P{COLOR:BLUE;}
</STYLE>
</HEAD>
<BODY>
<P>EXAMPLE</P>
</BODY>
</HTML>
Q4. a. Write an external CSS code snippet to set the colour of the webpage as pink.
BODY{BACKGROUND-COLOR:PINK;}
Note : save above coding with the file name color.css in notepad.
<HTML>
<HEAD>
<link rel=stylesheet href=”color.css”>
</HEAD>
<BODY>
<H1> OPERATING SYSTEM</H1>
<P> it acts as an interface between the software and computer hardware</P>
</BODY>
</HTML>
b. Write an inline CSS code to set the Font size for a paragraph as 15.
ANS. <P STYLE=FONT-SIZE:15;>THIS IS A PARAGRAPH</P>
Q5. Write a CSS code for the following specifications: Background color should be pink. For the paragraph: Border
style should be dashed and red in color.
ANS . <HTML>
<HEAD>
<STYLE>
BODY{BACKGROUND-COLOR:PINK;}
P{BORDER-STYLE:DASHED;BORDER-COLOR:RED;}
</STYLE>
</HEAD>
<BODY>
<P>EXAMPLE</P>
</BODY>
</HTML>
Q6. Sophia, a web designer working for a creative agency, wants to apply consistent styling to all <p> (paragraph)
elements on a webpage. However, she's facing challenges achieving this with regular HTML code. Provide
guidance to Sophia on how she can implement the following styles for all <p> elements. across the webpage:
Text color: Green
Background color: Light Pink
Border: 1px solid Purple
ANS . <HTML>
<HEAD>
<STYLE>
BODY{BACKGROUND-COLOR:LIGHT PINK;}
P{BORDER-STYLE:SOLID;BORDER-COLOR:RED;BORDER-WIDTH:1px;}
</STYLE>
</HEAD>
<BODY>
<P>THIS IS PARAGRAPH SHOWN IN SOLID BLUE COLOR</P>
</BODY>
</HTML>
Q7. Form a CSS code within the <head>...</head> for the following specification:
Background colour: red.
For the paragraph: font family is dotum and colour of the text is yellow.
Heading should be in blue colour.
ANS . <HTML>
<HEAD>
<STYLE>
BODY{BACKGROUND-COLOR:RED;}
P{COLOR:YELLOW;FONT-FAMILY:DOTUM;}
H1{COLOR:BLUE;}
</STYLE>
</HEAD>
<BODY>
<P>THIS IS PARAGRAPH SHOWN IN SOLID BLUE COLOR</P>
</BODY>
</HTML>
Q8. Write the equivalent CSS code to set the following styles for a web page :
Second level heading properties should be as follows :
• Text color should be red.
• Left margin should be 25 px
ANS . <HTML>
<HEAD>
<STYLE>
H2{COLOR:RED; MARGIN-LEFT:25Px;}
</STYLE>
</HEAD>
<BODY>
<H2>THIS IS HEADING SHOWN IN RED COLOR</H2>
</BODY>
</HTML>
Q9. (i) Write a inline CSS code to display the first level heading text as “my school” in green color and center-aligned.
(ii) Write the inline CSS code to display the following paragraph below the above mention heading
This is my school
I study in class 12
The properties of the paragraph contains should be as follows:
Text colour should be yellow
Font size should be 25 px
Font style should be bold
ANS (i) <HTML>
<BODY>
<H1 STYLE=COLOR:GREEN; TEXT-ALIGN:CENTER;>MY SCHOOL</H1>
</BODY>
</HTML>
(ii) <HTML>
<BODY>
<P STYLE=COLOR:YELLOW; FONT-SIZE:25px; FONT WEIGHT:BOLD;>THIS IS MY
SCHOOL<BR>
I STUDY IN CLASS 12</P>
</BODY>
</HTML>
Q10. Write the equivalent inline CSS for the following HTML tag.
(i) <BODY BGCOLOR=”GREEN”>
(ii) <IMG SRC=>”me.jpg” STYLE=”HEIGHT=20 WIDTH=30>