Cascading Style Sheets (CSS)

Multiple Choice Questions

Question 1

Which of the following web pages are loaded on the client's browser exactly in the same way as they are stored on the web server?

1. Dynamic
2. Static
3. HTML
4. None of these

Answer

Static

Reason — Static web pages are loaded on the client's browser exactly in the same way as they are stored on the web server.

Question 2

Which of the following programming language is used to create dynamic web pages?

1. C
2. Visual Basic
3. ASP
4. None of these

Answer

ASP

Reason — ASP is used to create dynamic web pages.

Question 3

The full form of DHTML is ............... .

1. Dynamic Hypertext Markup Language
2. Definite Hypertext Markup Language
3. Designing Hypertext Markup Language
4. None of these

Answer

Dynamic Hypertext Markup Language

Reason — The full form of DHTML is Dynamic Hypertext Markup Language.

Question 4

The full form of CSS is ............... .

1. Cascading Spread Sheet
2. Control Spread Sheet
3. Cascading Style Sheet
4. None of these

Answer

Cascading Style Sheet

Reason — The full form of CSS is Cascading Style Sheet.

Question 5

A ............... is the name of the HTML element to which a style is applied.

1. Tag
2. Element
3. Selector
4. None of these

Answer

Selector

Reason — A Selector is the name of the HTML element to which a style is applied.

Question 6

Name the selector that works like a wild card character and is used to match and apply a style to all the elements on a web page.

1. Wild card
2. Universal
3. Static
4. None of these

Answer

Universal

Reason — The Universal selector works like a wild card character and is used to match and apply a style to all the elements on a web page.

Question 7

Which one of the following is a correct statement?

1. h1 {font-weight:bold; font-family:Arial;color:red}
2. h1 {font weight; bold; fontfamily: Arial; color: red}
3. h1 {font-weight; bold; font-family;Arial;color;red
4. None of these

Answer

h1 {font-weight:bold; font-family:Arial;color:red}

Reason — This above statement specifies that the text within <h1> elements should have a bold font-weight, use the Arial font family, and have red text color. The format with a colon (:) is used to assign property-value pairs in CSS. Options 2 and 3 have incorrect syntax with missing colons and semicolons, making them invalid CSS statements. Option 4 is not applicable because option 1 is the correct statement.

Question 8

Which tag is used to create an embedded or internal style sheet?

1. Color>
2. <Style
3. <Type>
4. <PRE>

Answer

<Style

Reason — Embedded or internal style sheet is created using the <Style></Style> tag.

Question 9

Which of the following characters are used to add comments in CSS?

1. #
2. <!--
3. //
4. None of these

Answer

None of these

Reason — In CSS, comments are placed between /* and */.

Question 10

Which property is generally applied to blocks of text (h1, p,th,td,etc.) and is used to align the text of a document.

1. Text-align: value
2. Letter-align: value
3. Background-align: value
4. None of these

Answer

Text-align: value

Reason — Text-align: value property is generally applied to blocks of text (h1, p,th,td,etc.) and is used to align the text of a document.

Question 11

Which property helps you to set the border style of an HTML element?

1. Style
2. border-color
3. border-width
4. None of these

Answer

Style

Reason — Style property helps us to set the border style of an HTML element.

Question 12

Which one of the following is not a DHTML component?

1. HTML
2. Cascading Style Sheets (CSS)
3. C++
4. None of these

Answer

C++

Reason — C++ is not a DHTML component. HTML and Cascading Style Sheets (CSS) are DHTML components.

Question 13

Which one of the following is the default value of border style?

1. 1
2. 2
3. none
4. None of these

Answer

none

Reason — The default value of border style is 'none'.

Question 14

Select the correct statement from the options given below.

1. Body background-color:#F5A9A9; color; Black
2. Body[background-color:#F5A9A9; color: Black]
3. Body(background-color:#F5A9A9; color : Black)
4. None of these

Answer

None of these

Reason — None of the statements follows the correct syntax to define a rule in CSS which is as follows:

selector {property1: value ; property2: value ; }

Question 15

Which property is used to set the size of a font?

1. Font-size
2. Font-style
3. Font
4. None of these

Answer

Font-size

Reason — Font-size property is used to set the size of a font.

Fill in the Blanks

Question 1

A ............... size sets the font size relative to surrounding elements.

Answer

A relative size sets the font size relative to surrounding elements.

Question 2

............... helps in creating dynamic web pages that are interactive, animated, and responsive to the user's actions.

Answer

DHTML helps in creating dynamic web pages that are interactive, animated, and responsive to the user's actions.

Question 3

Dynamic web pages can be created by using ..............., ............... or ............... .

Answer

Dynamic web pages can be created by using ASP, PHP or DHTML.

Question 4

The application of DHTML was introduced by Microsoft with the release of Internet Explorer 4 in year ............... .

Answer

The application of DHTML was introduced by Microsoft with the release of Internet Explorer 4 in year 1997.

Question 5

................ is a set of style sheet design principles that determines the visual layout of the content of a web page.

Answer

CSS is a set of style sheet design principles that determines the visual layout of the content of a web page.

Question 6

The ................ defines the logical structure of a webpage.

Answer

The DOM (Document Object Model) defines the logical structure of a webpage.

Question 7

Cascading Style Sheets is a collection of rules called ................ that affect the visual appearance of a web page.

Answer

Cascading Style Sheets is a collection of rules called styles that affect the visual appearance of a web page.

Question 8

CSS allows the web designers to specify the web page formatting options through a ................ while keeping HTML markup considerably simple.

Answer

CSS allows the web designers to specify the web page formatting options through a Style Sheet while keeping HTML markup considerably simple.

Question 9

CSS can store web applications locally with the help of an ................ .

Answer

CSS can store web applications locally with the help of an Offline cache.

Question 10

You cannot define ................ and ................ in CSS.

Answer

You cannot define variables and functions in CSS.

Question 11

A CSS comprises of ................ that are interpreted by the browser and then applied to the corresponding elements in your document.

Answer

A CSS comprises of Style rules that are interpreted by the browser and then applied to the corresponding elements in your document.

Question 12

In CSS, properties can be applied to individual elements using an ................ .

Answer

In CSS, properties can be applied to individual elements using an ID selector.

Question 13

The file which contains the style code is saved with the extension ................ .

Answer

The file which contains the style code is saved with the extension .css.

Question 14

The ................ property sets the text font in two variants: normal or small-caps.

Answer

The Font-variant property sets the text font in two variants: normal or small-caps.

Question 15

The ................ property is used to transform the appearance of text into different cases, like uppercase, lowercase, or to capitalise the first letter of each word.

Answer

The Text-Transform property is used to transform the appearance of text into different cases, like uppercase, lowercase, or to capitalise the first letter of each word.

State True or False

Question 1

You may need to specify the path of .css file if the file does not exist in the same folder as that of your .html file.

Answer

True

Reason — We need to specify the path of .css file if the file does not exist in the same folder as that of our .html file.

Question 2

Href points to the external style sheet file's URL.

Answer

True

Reason — Href points to the external style sheet file's URL.

Question 3

Generic-family is group of family names that have uniform appearances.

Answer

True

Reason — Generic families are groups of family names that have uniform appearances. For example, Cursive, Monospace, Sans-Serif, etc.

Question 4

Font-weight property specifies the height or width of the font.

Answer

False

Reason — Font-weight property specifies the weight or boldness of the font.

Question 5

The unit em makes the font absolute.

Answer

False

Reason — The em unit is defined relatively to the current font size. For example, 0.5 em is half the current font size.

Question 6

The text-indent property controls the appearance of text on a web page.

Answer

False

Reason — The text-indent property indents the first line in a block of text where it is specified.

Question 7

The color property is used to set the colour of the text.

Answer

True

Reason — The color property is used to set the colour of the text.

Question 8

Line-height property is used to specify the space between characters.

Answer

False

Reason — Line-height property is used to specify the space between the lines of text.

Question 9

You can assign negative values to the Line-height property.

Answer

False

Reason — We cannot assign negative values to the Line-height property as lines cannot be displayed on top of one another.

Question 10

Line spacing property is used to give additional space between text.

Answer

False

Reason — Word spacing and Letter spacing properties are used to give additional space between text.

Question 11

The background property in CSS allows you to control the background of any element.

Answer

True

Reason — The background property in CSS allows us to control the background of any element.

Question 12

The Margin property is used to define the distance from each side to the sides of the neighbouring elements of the document.

Answer

True

Reason — The Margin property is used to define the distance from each side to the sides of the neighbouring elements of the document.

Theoretical Questions

Question 1

What are the different components of DHTML?

Answer

The different components of DHTML are as follows:

1. HTML — HyperText Markup Language defines the basic structure of a web page by using the essential elements, such as paragraphs, headings, forms, tables, and links.
2. Cascading Style Sheets — CSS is a set of style sheet design principles that determines the visual layout of the content of a web page.
3. Scripting — It provides a way to interpret the user's actions and accordingly brings changes to a web page.
4. Document object Model — The DOM defines the logical structure of a web page.

Question 2

Differentiate between Static and Dynamic web pages.

Answer

Question 3

How can we set the margins for an element?

Answer

We can specify the margin for all the sides of an element in one single declaration by using the Margin shorthand property.

Syntax — Margin : top-value right-value bottom-value left-value where value can be length or percentage or 'auto'.

For example, to define the margins for <P> element, we will use the following rule:

P {margin: 20px 40px 60px 80px}

Question 4

What does Cascading imply in CSS? Support your answer with an example.

Answer

Cascading means the hierarchical order in which different style sheet types are arranged so that the latest style sheet takes the precedence on the earlier ones. Consider the example given below:

<HTML>
<HEAD>
<STYLE> P{Color: red} </STYLE>
<STYLE> P{Color: blue} </STYLE>
<STYLE> P{Color:green} </STYLE>
</HEAD> 
<BODY Bgcolor = "Lightyellow">
<H1> Tiger Reserves in lndia </H1>
<P> Jim Corbett Tiger Reserve, Uttarakhand </P>
<P> Ranthambore Tiger Reserve, Rajasthan </P>
<P> Sunderban Tiger Reserve, West Bengal </P>
<P> Bandhavgarh National Park, Madhya Pradesh </P>
<P> Sariska Tiger Reserve, Rajasthan </P>
</BODY>
</HTML>

Here, the first definition specifying the <P> colour as red precedes the second definition, which defines the blue colour for <P>, and this, in turn, precedes the third definition, which specifies the green colour for <P>. The definition at the bottom will take precedence, and the paragraph will appear in green colour.

Question 5

Differentiate between External style sheets and Internal style sheets.

Answer

Differences between External and Internal style sheets are listed below:

Question 6

Scripting makes the web page dynamic. Explain.

Answer

Scripting is one of the components of DHTML. It makes a web page dynamic. It provides a way to interpret the user's actions and accordingly brings changes to a web page. For example, scripts can interpret the mouse actions (such as clicking or entering a value in a textbox) and respond to that action by using a set of predefined instructions (such as opening a page).

JavaScript is the standard language for creating cross-browser DHTML pages. It uses various scripting techniques to detect the browser that the user is using and accordingly executes the code, intended for that browser.

Question 7

Differentiate between the Font-weight and Font-variant properties.

Answer

Question 8

Explain the purpose of using the shorthand Margin property.

Answer

We can specify the margins of all sides of an element in one single declaration by using the Margin shorthand property.

The syntax for shorthand Margin property is as follows:

Margin : top-value right-value bottom-value left-value;

where value = length | percentage | auto

For example, to define the margins for the <P> element, we will use the following rule:

P {margin: 20px 40px 60px 80px}

Question 9

How will you add padding space to all the four sides of an element?

Answer

We can use the Padding property to add padding space to all the four sides of an element. The syntax for Padding property is as follows:

padding-side : value;

where side = top / right / bottom / left

and value = length | percentage

For example, to add padding to a <P> element, we use the following code:

P   {
Padding-top : 20px;
Padding-right : 40px;
Padding-bottom : 20px;
Padding-left : 40px;
}

Question 10

Identify the errors in the codes below and write the correct code:

1. import url (style_imp.css)

2. <STYLE> p{color:808080} </STYLE>

3. <p style= "text:align: justify">

4. P {font: arial 15px sans-serif;}

5. {p-color:red;}

Answer

1. import url (style_imp.css)
   The syntax of import statement is incorrect. It must be preceded by an '@' symbol and the terminator symbol ';' is also missing at the end. Thus the correct code is as follows:
   @import url(style_imp.css);

2. <STYLE> p{color:808080} </STYLE>
   If the value of Color property is given as a Hexadecimal value, it must begin with a '#' symbol. The ' ; ' must be placed at the end of the value. Thus, the correct code is as follows:
   <STYLE> p{color:#808080;} </STYLE>

3. <p style= "text:align: justify">
   The name of the property is "text-align" and not "text:align". The correct code is as follows:
   <p style= "text-align: justify;">

4. P {font: arial 15px sans-serif;}
   The order of values for font property should be in the following manner:
   Syntax : Font:Font-style Font-variant Font-weight Font-size Font-family;
   Thus, the correct code is as follows:
   P {font: 15px arial sans-serif;}

5. {p-color:red;}
   The selector should be placed outside the parentheses. The correct code is as follows:
   P {color:red;}

Application Based Questions

Question 1

Harsh is working on a client's project which requires him to add a picture on the top left part of the web page. While adding the picture, Harsh realised that the picture is being repeated multiple times. Suggest the property and its value to Harsh that can be used to stop the image from getting repeated.

Answer

To prevent an image from repeating on a web page, Harsh can use the background-repeat property in CSS. He should set this property to "no-repeat" to ensure that the image is displayed only once and not repeated. He can use the following code:

background-repeat: no-repeat;

Question 2

Ruby has written the following code to shift a background image to the bottom-right corner of the page. The code however is not giving the desired result. Help her in finding a solution to the problem.

<body style= "background-image: url (C:/Desktop/image-3.jpg);
background-repeat: no-repeat; background-position: 45% 90%; 
background-color: #cccccc"; >

Answer

Ruby can change the value of 'background-position' property from '45% 90%' to 'bottom right'. She can write the following code to shift a background image to the bottom-right corner of the page.

<body style= "background-image: url(C:/Desktop/image-3.jpg);
background-repeat: no-repeat; background-position: bottom right;
background-color: #cccccc;" >

Question 3

Namrata has written some style rules using the embedded style sheet method, but the effects are not getting applied on the elements. Instead the rules are getting displayed as such on the screen. What can be the possible reason? Suggest her some solution for the same.

Answer

One of the possible reasons for such a problem can be browser compatibility. Namrata may be using an older browser which doesn't support CSS.

Two ways in which the problem can be fixed are as follows:

1. Namrata can switch to a browser which supports CSS.
2. She should wrap the style sheet code within HTML comments:

<HTML>
<HEAD>
<TITLE> Embedding Style Sheets</TITLE>
<STYLE Type = "text/css">
<!--
...
style rules
...
-->
</STYLE>
</HEAD>
</HTML>

Question 4

Diya wants to display all the text on her web page in blue colour with font size 3. Suggest Diya, which selector she should use to achieve the same.

Answer

To display all the text on her web page in blue color with a font size of 3, Diya should use the universal selector ' * '. The universal selector selects all elements on the page, and she can then apply the desired styles to them in the following way:

<HTML>
<HEAD>
<STYLE Type = "text/css">
*
{
Color:blue;
Font-size: 3;
}
</STYLE>
</HEAD>
<BODY>
<H1>Universal Selector</H1>
<P>Using Universal Selector in CSS</P>
</BODY>
</HTML>