Bright Tutorials LogoBright Tutorials
LoginSign Up

Cascading Style Sheets (CSS)

Solutions for Computer Applications, Class 10, CBSE

Application Oriented Questions

4 questions

Question 1

How do you add a background color for all <h1> elements?

Application Oriented Questions

Answer:

We define a rule for <h1> tag and use the property background-color to set the background color for all h1 elements.

For example, to set the background color of all <H1> elements to blue, we define the rule as follows:

h1 { background-color : blue ; }

Question 2

How do you display a border like this :

The top border = 10 pixels 
The bottom border = 5 pixels 
The left border = 20 pixels 
The right border = 1pixel
Application Oriented Questions

Answer:

To display the given border, we use the border-width property and write the values in the order — top, right, bottom, left. Thus, the rule will be written as follows:

selector { border-width : 10px 1px 5px 20px ; }

Question 3

How do you make each word in a text start with a capital letter ?

Application Oriented Questions

Answer:

To make each word in a text start with a capital letter we set the value of text-transform property to capitalize.

For example, to make each word in all <H1> elements start with a capital letter, we define a rule as:

h1 { text-transform : capitalize ; }

Question 4

Perform as instructed below.

(a) Create an HTML file namely index.html file with following guidelines :

x Make sure there are at least 2 paragraphs (<p>) in your HTML file 
x Use h1, h2 and h3 headings
x Use a numbered and a bulleted list
x Use a table
x At least 4 hyperlinks

(b) Link to an external style sheet namely personal.css from your index.html file.

(c) Create a CSS document called personal.css (Make sure you save as type .css) with rules for the following :

x Have your h2 headings :
    (a) Appear in a color of your choice
    (b) Be centered on the page (text-align: center;)
    (c) In the Serif font family of your choice
x Double the H1 headings size (relative font size)
x For paragraphs
    (a) Specify a font family and font size.
    (b) Give a background color with 5 px padding on each side
x For tables
    (a) Specify a border of width 3px
    (b) Table heading in bold
x Remove the underline in your links.

(d) View the html file in a browser

(e) Create another CSS file with different style rules for above mentioned elements and then link index.html to this CSS file. Now view index.html and see the change.

Application Oriented Questions

Answer:

index.html

<html>
<head>
<link rel = "stylesheet" type = "text/css" href = "personal.css">
<title>HTML Introduction</title>
</head>
<body>
<h1>Introduction to HTML</h1>
<h2> What is HTML ? </h2>
<p>
HTML (Hypertext Markup Language) is the standard markup language used for creating and structuring web pages. HTML uses a system of tags and elements to define the different components and content of a web page.
</p>
<p>
HTML forms the foundation of web development and is often combined with CSS (Cascading Style Sheets) and JavaScript to create interactive and visually appealing websites.
</p>
<h3> Advantages of HTML </h3>
<ol>
<li>Universal support across web browsers.</li>
<li>Easy to learn and understand syntax.</li>
<li>Platform independence for broad device compatibility.</li>
<li>Seamless integration with CSS and JavaScript.</li>
</ol>
<h3>Limitations of HTML</h3>
<ul>
<li>Limited styling and layout control.</li>
<li>Lack of built-in interactivity.</li>
<li>Insufficient data handling capabilities.</li>
<li>Browser compatibility issues.</li>
</ul>
<table>
<caption>Some tags of HTML</caption>
<tr>
<th>Tag</th>
<th>Description</th>
</tr>
<tr>
<td>B tag</td>
<td>Used to make text bold</td>
</tr>
<tr>
<td>I tag</td>
<td>Used to make text italic</td>
</tr>
</table>
<p>Check out these links to learn more about HTML:</p>
<ul>
<li><a href="https://www.w3schools.com">W3 Schools</a></li>
<li><a href="https://en.wikipedia.org/wiki/HTML">HTML Wikipedia</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML">HTML MDN</a></li>
<li><a href="https://www.html.com">HTML Code Tutorial</a></li>
</ul>
</body>
</html>

personal.css

h2 { 
    color: red ; 
    text-align: center ; 
    font-family: Times New Roman ;
    }

h1 {
    font-size: 2em ;
    }

p {
    font-family: Arial ;
    font-size: 10px ;
    background-color: cyan ;
    padding: 5px 5px 5px 5px ;
}

table {
    border: 3px solid;
}

th {
    border: 3px solid; font-weight: bold ;
}

td {
    border: 3px solid;
}

a {
    text-decoration: none ;
}
Output
Create an HTML file namely index.html. Make sure there are at least 2 paragraphs in HTML file. Use h1, h2 and h3 headings. Cascading Style Sheets, Computer Applications Code 165 Sumita Arora Solutions CBSE Class 10.

new-personal.css

h2 { 
    color: blue ; 
    text-align: left ; 
    font-family: Verdana ;
    }

h1 {
    font-size: 3em ;
    }

p {
    font-family: Georgia ;
    font-size: 14px ;
    background-color: green ;
    padding: 3px 8px 3px 8px ;
}

table {
    border: 1px dashed;
}

th {
    border: 1px dashed; font-weight: normal ;
}

td {
    border: 1px dashed;
}

a {
    text-decoration: overline ;
}
Output
Create an HTML file namely index.html. Make sure there are at least 2 paragraphs in HTML file. Use h1, h2 and h3 headings. Cascading Style Sheets, Computer Applications Code 165 Sumita Arora Solutions CBSE Class 10.

Objective Type Questions

16 questions

Question 1

Which of the following is not one of the DHTML technology ?

  1. HTML
  2. CSS
  3. JavaScript
  4. WWW
Objective Type Questions

Answer:

WWW

Reason — DHTML is a combination of HTML, CSS, JavaScript and DOM (Document Object Model) while the World Wide Web (WWW) is the system of interconnected hypertext documents accessed through the internet, it is not considered a DHTML technology itself. Instead, the WWW is the platform or environment where DHTML technologies are utilized to create interactive and dynamic web pages.

Question 2

The acronym CSS stands for what ?

  1. Carrot System Style
  2. Correlated Styling System
  3. Cascading Style Sheets
  4. Canvas Styling System
Objective Type Questions

Answer:

Cascading Style Sheets

Reason — CSS stands for Cascading Style Sheets.

Question 3

What property would you use to create space between the element's border and inner content ?

  1. margin
  2. spacing
  3. padding
  4. border
Objective Type Questions

Answer:

padding

Reason — Padding defines the inner distance between the border and the content of the element.

Question 4

How do you tell the browser you are creating a styling section with an internal style sheet ?

  1. <style type="css"></style>
  2. <class type="css"></class>
  3. class type="text/css"></class>
  4. <style type="text/css"></style>
Objective Type Questions

Answer:

<style type="text/css"></style>

Reason — To embed a style sheet in a web page, we use the <style> tag only within the <head> tag of a web page in the following way:

<HEAD>
<STYLE TYPE = "TEXT/CSS">
    ... CSS rules ...
</STYLE>
</HEAD>

Question 5

To reference a style sheet across multiple HTML pages, how would you define your CSS ?

  1. Inline Style
  2. Internal Style Sheet
  3. External Style Sheet
  4. CSS is meant for only one page
Objective Type Questions

Answer:

External Style Sheet

Reason — To reference a style sheet across multiple HTML pages, we define our CSS as an external style sheet.

Question 6

What is the correct CSS syntax for making all the <span> elements bold ?

  1. span {text-size:bold}
  2. span {font-weight:bold}
  3. <span style="font-size:bold">
  4. <span style="text-size:bold">
Objective Type Questions

Answer:

span {font-weight:bold}

Reason — The property font-weight specifies the boldness or heaviness for a font. In the given code, the content of span is set to bold.

Question 7

In the following code snippet, what value is given for the left margin :

margin: 5px 10px 3px 8px;

  1. 3px
  2. 10px
  3. 8px
  4. 5px
Objective Type Questions

Answer:

8px

Reason — The order of border margin values is top, right, bottom and left. Thus, the value given for the left margin is 8 pixels.

Question 8

What property is used to change the text color of an element ?

  1. fontcolor:
  2. textcolor:
  3. color:
  4. font-color:
Objective Type Questions

Answer:

color:

Reason — color property is used to change the text color of an element. For example:

p {color : red ;}

Question 9

Which is the correct CSS syntax ?

  1. {p:color=black(p}
  2. p {color: black;}
  3. {p;color:black}
  4. p:color=black
Objective Type Questions

Answer:

p {color: black;}

Reason — The correct CSS syntax is :

selector {color : value ;}

The option p {color: black;} follows correct CSS syntax.

Question 10

What is the correct CSS syntax to change the font name ?

  1. font-name:
  2. font:
  3. font-family:
  4. fontname:
Objective Type Questions

Answer:

font-family:

Reason — font-family: is used to define a list of fonts that should be used to display a given element or web page.

Question 11

Which HTML attribute is used to define inline CSS styles ?

  1. css
  2. style
  3. type
  4. id
Objective Type Questions

Answer:

style

Reason — STYLE attribute is used to define inline CSS styles. For example,

<H3 STYLE = "FONT-FAMILY = ARIAL">

Question 12

How do you make each word in a text start with a capital letter ?

  1. text-transform:capitalize
  2. text-transform:uppercase
  3. You can't do that with CSS
  4. text:capitalize
Objective Type Questions

Answer:

text-transform:capitalize

Reason — When the value of text-transform is set to capitalize, it will capitalize the first letter of each word.

Question 13

What is the correct CSS syntax for making all the <p> tag's font size 14px ?

  1. p {14px}
  2. p {font-size: 14px;}
  3. p {text-size: 14px;}
  4. p {font: 14px;}
Objective Type Questions

Answer:

p {font-size: 14px;}

Reason — The correct syntax for changing all the <p> tag's font size is :

p {font-size : value ;}

The given option follows the correct CSS syntax.

Question 14

Which CSS property controls the text size ?

  1. font-height
  2. text-size
  3. font-size
  4. text-style
Objective Type Questions

Answer:

font-size

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

Question 15

How do you insert padding so that it is :

10 pixels at the top
15 pixels at the bottom
5 pixels at the right
10 pixels to the left
  1. padding:10px 15px 5px 10px ;
  2. padding:15px 5px 10px 10px ;
  3. padding:10px 5px 10px 15px ;
  4. padding:10px 5px 15px 10px ;
Objective Type Questions

Answer:

padding:10px 5px 15px 10px ;

Reason — The order of padding values is top, right, bottom and left. Thus, to insert the given padding, we write the definition as follows:

padding:10px 5px 15px 10px ;

Question 16

How do you display hyperlinks without an underline?

  1. a {decoration:no underline}
  2. a {text-decoration:none}
  3. a {hyperlink:no underline}
  4. a {text-decoration:no underline}
Objective Type Questions

Answer:

a {text-decoration:none}

Reason — To display hyperlinks without an underline, the value of text-decoration property is set to none.

Theoretical Questions

17 questions

Question 1

Which property is used to change the background color ?

  1. background-color
  2. bgcolor
  3. bg-color
  4. color
Theoretical Questions

Answer:

background-color

Reason — The background-color property is used to change the background color of an element. For example,

h1 {background-color : yellow; }

Question 2

Which property is used to increase and decrease the text size ?

  1. font-width
  2. font-size
  3. text-width
  4. text-size
Theoretical Questions

Answer:

font-size

Reason — font-size property is used to increase and decrease the text size in the following way:

h3 {font-size : 8pt; }

Question 3

What would this CSS rule do ?

p   {   color:red; 
    }
  1. Make the background of all paragraphs red.
  2. Make the fonts of all paragraphs red.
  3. Make all text boxes red.
  4. Make the border of all paragraphs red.
Theoretical Questions

Answer:

Make the fonts of all paragraphs red.

Reason — The breakup of the rule is as follows:

  • p is a selector in CSS, which targets all <p> elements. In HTML, <p> elements represent paragraphs.
  • {} encloses the declaration block, which contains one or more property-value pairs.
  • color:red; is a property-value pair within the declaration block. Here, the color property is set to red, which means the text color of all <p> elements will be changed to red.

So, applying this CSS rule to an HTML page would result in all paragraphs being displayed with red text color.

Question 4

What would this CSS rule do ?

h2  {   font-size:2em; 
    }
  1. Make fonts in a specific h2 tag double in size.
  2. Make fonts in all h2 tags double in size.
  3. Make fonts in all h2 tags double in size and italic.
  4. Make all fonts that are size 2, empty.
Theoretical Questions

Answer:

Make fonts in all h2 tags double in size.

Reason — The breakup of the rule is as follows:

  • h2 is a selector in CSS, which targets all <h2> elements. In HTML, <h2> represents a heading level 2.
  • {} encloses the declaration block, which contains one or more property-value pairs.
  • font-size:2em; is a property-value pair within the declaration block. Here, the font-size property is set to 2em. The value 2em means the font size will be twice the size of the default font size.

So, applying this CSS rule to an HTML page would result in all heading level 2 elements (<h2>) being displayed with a font size that is twice the default font size.

Question 5

How do you link an external stylesheet to a page.

  1. <link href='somefile.css'>
  2. <link rel='stylesheet' src='somefile.css'>
  3. <script rel='stylesheet' href=' somefile.css'> </script>
  4. <link rel='stylesheet' href='somefile.css'>
Theoretical Questions

Answer:

<link rel='stylesheet' href='somefile.css'>

Reason — The correct syntax is explained below:

  • <link> is an HTML tag used to include external resources, such as stylesheets.
  • rel='stylesheet' is an attribute that specifies the relationship between the current document and the linked resource. In this case, it indicates that the linked resource is a stylesheet.
  • href='somefile.css' is the attribute that specifies the location (URL or file path) of the external CSS file. In this case, it points to a file named "somefile.css".

By using this <link> tag with the correct attributes, we can connect an external CSS file (such as "somefile.css") to our HTML document, allowing the styles defined in the CSS file to be applied to the web page.

Question 6

Which one of these name and value declarations would not work ?

  1. margin:20px 0 0 30%;
  2. margin;20px 30%:
  3. margin:20px 30%;
  4. margin:20px 23px 5% 30px;
Theoretical Questions

Answer:

margin;20px 30%:

Reason — In CSS, declarations follow the format of property: value;. The value is assigned to the corresponding property, separated by a colon : and terminated by a semicolon ;.
The option margin;20px 30%: has an incorrect syntax. The semicolon ; should be a colon : before the value and the colon : at the end should be a semicolon ;.

Question 7

Which of the following CSS types is defined in the header of a Web page and applies to the entire Web page document ?

  1. Inline
  2. Embedded
  3. Inbuilt
  4. External
Theoretical Questions

Answer:

Embedded

Reason — Embedded or internal styles are defined in the header of a Web page using the <style> tag and apply to the entire Web page document.

Question 8

Which of the following type of CSS is coded in the body of the Web page as an attribute of an HTML tag and applies ONLY to the specific element that contains it as an attribute ?

  1. Inline
  2. Embedded
  3. Inbuilt
  4. External
Theoretical Questions

Answer:

Inline

Reason — Inline style of CSS is coded in the body of the Web page as an attribute of an HTML tag and applies ONLY to the specific element that contains it as an attribute.

Question 9

Where in an HTML document is the correct place to refer to an external style sheet ?

  1. In Body section
  2. In Head section
  3. In a paragraph
  4. Top of the document
Theoretical Questions

Answer:

In Head section

Reason — A <LINK> tag is used in the head section of HTML document to link the HTML page to an external CSS file.

Question 10

Use the CSS ............... property to configure the cellpadding of a table.

Theoretical Questions

Answer:

table   { padding : 50px 20px 20px 20px ; }

Question 11

What is the utility of dynamic websites ?

Theoretical Questions

Answer:

The utility of dynamic websites are as follows:

  1. Dynamic websites allow easy content updates.
  2. They tailor content based on user preferences.
  3. They enable feedback forms, comment sections, and social media integration.
  4. They can fetch and display real-time data from databases or APIs enabling live updates like news feeds, stock market information, weather updates, etc.
  5. They support online transactions and inventory management.
  6. They handle large amounts of content and user traffic.
  7. They streamline processes and save time.

Question 12

What are some features of dynamic websites ?

Theoretical Questions

Answer:

Some features of dynamic websites are as follows:

  1. User registration and authentication can be done.
  2. Content management system (CMS) provides for easy content updates.
  3. Search functionality to find specific content.
  4. Database integration for dynamic content generation.
  5. Interactive forms for user engagement.
  6. E-commerce capabilities for online transactions.
  7. Social media integration for sharing and interaction.
  8. Personalization based on user preferences.
  9. Dynamic content delivery for customized user experiences.
  10. Analytics and tracking to gather data for analysis and optimization.

Question 13

What do you understand by Stylesheets? How are these useful ?

Theoretical Questions

Answer:

A style sheet is a file containing formatting guidelines that define the overall look of a document.

Style sheets are useful in the following ways:

  1. It helps to separate structure and presentation. The HTML file can include structure tags and style sheet takes care of the presentation of content.
  2. Web pages download much faster.
  3. Developers have to type less code, and the web pages are shorter and neater.
  4. The look of the site is kept consistent throughout all the pages that work off the same style sheet.
  5. Updating design and general site maintenance are made much easier.
  6. Errors caused by editing multiple HTML pages occur less often.

Question 14

What is CSS style rule? How do you define it ?

Theoretical Questions

Answer:

A CSS rule is a single statement in a style sheet that identifies what should be styled (the selector) and how those styles should be applied (the declaration).

We define a rule by writing the selector tag without angle brackets. The properties and their values are written in the following syntax:

selector { propertyname : value ; propertyname : value ; ...}

For example, if we want <H3 tag to have font face Arial and red color then we define the style rule as follows:

h3 { font.family : Arial ; color : red ; }

Question 15

What are three ways of creating style rules? Give examples of each.

Theoretical Questions

Answer:

The three ways of creating style rules are as follows:

1. Inline — Styles are embedded right within the HTML code they affect. For example,

<h3 style = "font.family = Arial ; color = red ">

2. Internal — Styles are placed within the header information of the web page and then affect all the corresponding tags on the page. For example,

<HEAD>
<STYLE TYPE = "TEXT/CSS">
h3 { font.family : Arial ; color : red ; }
</STYLE>
</HEAD>

3. External — Styles are coded in a separate document, which is then referenced from within the header of the actual web page. For example, let there be a CSS file named sample.css :

h3 { font.family : Arial ; color : red ; }

p { font.family : Times New Roman ; color : blue ; }

...and so on...

To link sample.css file to an HTML document, we use the <link tag in the following manner:

<HEAD>
<LINK REL = "STYLE SHEET" TYPE = "TEXT/CSS" HREF = "SAMPLE.CSS">
</HEAD>

Question 16

What is the Cascading order of different style types ?

Theoretical Questions

Answer:

The cascading order of different style types from higher precedence to lower precedence is :

  1. Inline
  2. Internal
  3. External

Question 17

Where do you place the code to associate a Web page with an external style sheet ?

Theoretical Questions

Answer:

To associate a Web page with an external style sheet, we place the code in the head tag in the following manner :

<HEAD>
<LINK REL = "STYLE SHEET" TYPE = "TEXT/CSS" HREF = "SAMPLE.CSS">
</HEAD>

where, sample.css is the name of the CSS file.