Subject - Computer, Ch - 4, Using CSS in HTML [ N. B ]

Exercise

Q:1

Fill in the blanks.

is the latest standard for HTML.

Ans:

HTML5

The property is used to set the indentation of the first

line of text

Ans:

text-indent

A CSS rule contains a selector block and a block

Ans:

declaration

CSS files are saved with an extension .

Ans:

.css

is an organisation which sets international standards for the World Wide Web.

Ans:

W3C

Answer the following questions.

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.

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>

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:

uppercase;}

p.lowercase { text-transform:

lowercase;}

p.capitalize { text-transform: capitalize;}</style></head>

<body>

<p class=uppercase>Text styled in uppercase .</p>

<p class=lowercase>Text styled in lowercase.</p>

<p class=capitalize>Text styled in title case, where the first letter of each word is capitalized.</

</body></html>

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>

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>

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>

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 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.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;}

Search This Blog

Grade 8