Theortical questions in CSS
Theortical questions in CSS
Question 1
1. background-color
2. bgcolor
3. bg-color
4. color
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
1. font-width
2. font-size
3. text-width
4. text-size
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
p { color:red;
}
Answer
Make the fonts of all paragraphs red.
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
h2 { font-size:2em;
}
Answer
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
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'>
Answer
<link rel='stylesheet' href='somefile.css'>
Reason — The correct syntax is explained below:
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;
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
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
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
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
Answer
Question 11
Answer
Question 12
Answer
Question 13
Answer
A style sheet is a file containing formatting guidelines that define the overall look of a document.
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
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:
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.
Answer
1. Inline — Styles are embedded right within the HTML code they affect. For example,
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 :
...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
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 ?
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>
Question 1
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
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:
Question 3
How do you make each word in a text start with a capital letter ?
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
(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 :
(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.
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
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 ;
}