Subject - Computer, Ch - 4, Using CSS in HTML [ N. B ]
Exercise
|
Q:1 |
Fill in the blanks. |
|
| |||
|
a. |
is the latest standard for HTML. |
||
|
Ans: |
HTML5 |
||
|
b. |
The property is used to set the indentation of the first line of
text |
||
|
Ans: |
text-indent |
||
|
c. |
A CSS rule contains a selector block
and a block |
||
|
Ans: |
declaration |
||
|
d. |
CSS files are saved
with an extension . |
||
|
Ans: |
.css |
||
|
e. |
is an organisation which
sets international standards for the World
Wide Web. |
||
|
Ans: |
W3C |
||
|
2. |
Answer the following questions. |
||
|
a. |
What is the advantage of using the external style
sheet? |
||
|
Ans: |
The main advantage is that when we use external
style sheet, all HTML files can be
linked to a single CSS file to style the pages. Whenever you need to change the design of the pages
uniformly, you need to only edit one .css file to make global changes
to your website. |
||
|
b. |
Explain any three
CSS properties for
text using examples |
||
|
Ans: |
1. Text Colour The color property is used to decide the colour of
text in the web page. The default colour of text for a web page is defined in the
body selector. Example: <html> <head><style> body { color:#CA1C9B } h1 { color: #EFAE3C; } p.ex { color:#22BDCC; } </style></head><body> <h1>This is heading level 1</h1> <p>Displaying the text using CSS properties</p> <p class=ex>This is a paragraph with class name “ex”.
</p></body></html> 2.
Text decoration The text-decoration property is used for drawing lines over, across or below the text. Example: <html> <head><style> h1{ text-decoration: overline; } h2 { text-decoration: line-through; } h3 { text-decoration: underline;} </style></head><body> <h1>This heading has a line above it</ h1> <h2>This heading has a line across it</ h2> <h3>This heading has been styled as underlined </h3></body></html>
3. Text transformation The text-transform property is used to specify the case of letters in the text. It can be used to convert and display text in uppercase, lowercase or title case that has the first letter of each word capitalised. <html><head><style> p.uppercase { text-transform:
|
|
c. |
Explain any two CSS selector using examples. |
|
Ans: |
Element Selector: The element selector
selects elements based
on their names. For example, you can select all <P> elements on a web
page and make
the text red and aligned at the centre with
the following example. p { text-align:center; color:red; }
id Selector: The id selector uses the id attribute of an HTML
tag to apply
style. A unique id has to be within a page. It is used to find
a single and unique element. The example given below will apply the defined style
to the HTML
element with id=“pid1”. Example using
id selector <html><head> <style> #pid1
{ text-align: center; color: blue; |
|
|
font-size: 18px; } </style></head><body> <p id=pid1>This is an example
of id selector</p> <p>This text
is not affected by the style.</p> </body></html> |
|
d. |
What is CSS? Which
are the different ways in which
a style sheet
can be added
in an HTML page? Explain
any one of them. |
|
Ans: |
CSS is used to specify how HTML elements are
displayed. It allows all formatting
to be removed from the HTML document and
store in a separate CSS file. The HTML file then just needs to be linked to the required CSS file to
apply the formats defined therein.
CSS is the language used for describing the
presentation and formatting of web pages, such as colors, layout,
background, borders, fonts and so on. A style
sheet can be of three
different types: ·
Inline style
sheet ·
Internal style
sheet ·
External style
sheet Internal style
sheet When the style
sheet is defined
in the HEAD
section of the
HTML page inside the <STYLE> tag, it is called an internal style
sheet. This type is used when
a single document needs to be given a unique style. <head> <title></title> <style type=“text/css”> hr { color:green; } p { margin-left:20px;
} body { background-image:url(“images/background.jpg”); } |
|
|
|
</style></head><body> … </body> |
|
|
e. |
Shreya has created a website with more than
ten web pages. She needs to use CSS for formatting the web pages. Which type of style
sheet she must
use and why? |
|
|
Ans: |
External Style
Sheet. An external CSS file is created using a text editor
containing the CSS code and is
saved with the file extension .css. A link is then created to this file in the web page by placing the following code in the <Head>
section. Therefore, she should use external style sheet.  Notes : Q.1 What is
CSS? Answer: To solve this problem CSS (Cascading Style Sheet)
was developed by W3C (World Wide Web Consortium). W3C is the main organization
responsible for setting the international standards for the WWW.
Q2 What is
used of CSS? Answer: CSS is used to specify how HTML elements are
displayed. It allows all formatting to be removed from the HTML document and
store in a separate CSS file.
Q.3 Write a
syntax of CSS with description. Answer: v
p
{color:red;text-align:center;font-size:18px;} Ø
Here “p” is Selector Ø
Color : text-align &font size are
Properties of p tag Ø Red,
center &
18px are value of respected Properties.
In HTML and CSS, the words ‘centre’ and ‘colour’ are spelled as
‘center’ and ‘color’, respectively.
Q.4 Write the types of CSS with Example. Answer :A style sheet can be of three
different types: 1. Inline style sheet Example: <p style= “color:blue;
margin-right:20px;”> 2. Internal style sheet <head> <title></title> <style type=“text/css”> hr {
color:green; } p { margin-left:20px; } body {
background-image:url(“images/background.jpg”); } </style></head><body>
… </body>
3. External style sheet : v Html code in “hello.html” <head> link rel=”stylesheet” type=”text/css” href=”style1.css”/> </head> Ø CSS code in “style1.css” h1{color:red;text-align:center;
} p{color:red;text-align:center;font-size:18px;
}
Q.5Write the Background properties for CSS. Answer: Background color: It is used to specify the background color of an element. The
background color of a page is defined in the body selector. Background image: The background-image property is used to specify the
image to be used as the backdrop of a web page or a table. By default, the
image will be repeated to cover the background of the entire element. ·
background-image:url ·
background-repeat ·
background-position Q.6 Difference between ID and Class in CSS A class
name can be used by multiple HTML elements, while an id name must only be used
by one HTML element within the page Note: The id name is case sensitive! Note: The id name must contain at least one character,
cannot start with a number, and must not contain whitespaces (spaces, tabs,
etc.).
Q.7 Explain ID with suitable example. ·
The ·
The ·
The syntax for id is: write a hash character (#), followed by an
id name. Then, define the CSS properties within curly braces {}. Example: <head> <style> #myHeader {background-color: lightblue; color: black; padding: 40px text-align: center;} </style> </head> <body> <h1 id="myHeader">My Header</h1> </body> </html> |
Q.1 Difference between ID and Class in CSS
A class
name can be used by multiple HTML elements, while an id name must only be used
by one HTML element within the page
Note: The id name is
case sensitive!
Note: The id name must
contain at least one character, cannot start with a number, and must not
contain whitespaces (spaces, tabs, etc.).
Q.2 Explain ID with suitable example.
The id attribute
specifies a unique id for an HTML element. The value of the id attribute must be unique within the HTML document.
The id attribute
is used to point to a specific style declaration in a style sheet. It is also
used by JavaScript to access and manipulate the element with the specific id.
The syntax for id is: write a hash character (#), followed by an
id name. Then, define the CSS properties within curly braces {}.
Example:
<html>
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px
text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">My Header</h1>
</body>
</html>
Q.3
Explain all three types of CSS with Example.
Inline CSS
An
inline CSS is used to apply a unique style to a single HTML element.
An
inline CSS uses the style attribute of an HTML element.
Example :
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
Internal
CSS
An
internal CSS is used to define a style for a single HTML page.
An
internal CSS is defined in the <head> section
of an HTML page, within a <style> element.
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
External CSS
An
external style sheet is used to define the style for many HTML pages.
To
use an external style sheet, add a link to it in the <head> section of each HTML page.
Extranal.html
<html>
<head>
<link rel="stylesheet" href="styles.css"> </head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body></html>
Style.css
body { background-color: powderblue;}
h1 { color: blue;}
p { color: red;}
What about the workbook of this
ReplyDeleteThis article provides a clear and comprehensive explanation of CSS, its properties, and how to apply them effectively in HTML. It covers key concepts like the types of CSS (inline, internal, and external), the use of selectors, and common properties like text color, alignment, and background. The examples provided help readers better understand how to implement CSS in real web projects. Overall, it's a valuable resource for beginners looking to enhance their web development skills
ReplyDeleteFree Style Matching Australia