Ch-11 Form and CSS
Ch-11 Form and CSS
Cascading Style Sheet
Cascading Style Sheet refer
to as CSS is a technique to design a web page presentable. It is a powerful
mechanism for adding styles such as fonts, colors, border, background etc. With
style sheets, text and image formatting properties can be predefined in a
single list.
Advantages of CSS
- · CSS can be defined once and it
can be used in multiple HTML pages.
- · CSS
reduces HTML codes.
- · CSS
has ability to make global change to all documents from single location.
There are three different
ways of using style sheet which are:
1. Internal Style
Sheet
2. Inline Style
3. External Style
Sheet
Inline Style :
Inline Style Beside internal
style sheet and external style sheet, CSS can be written inside of HTML tag
using the style attribute which is called an “Inline style”. Inline style may
be used to apply a unique style for single element. In general it is not
considered a good practice. However, it may be a good choice sometimes.
Following example shows HTML page with inline style.
EXAMPLE
<HTML>
<HEAD>
<TITLE>INLINE
STYLE</TITLE>
</HEAD>
<BODY>
<H1>Inline
Style</H1>
<p
Style="color: red; font-style: italic; font-size: 16pt">Cascading
Style Sheet refer to as CSS is a technique to design a web page presentable. It
is a powerful mechanism for adding styles such as fonts, colors, border,
background etc. With style sheets, text and image formatting properties can be
predefined in a single list.
</P>
</BODY>
</HTML>
Font attributes
font-family
serif,sans-serif,cursive
font-style Normal, italic
font-weight
Normal,bold,border,lighter
font-size
xx-small,x-small,small,medium,large,x-large,xx-large
Internal Style
Sheet :
An internal style sheet may
be used if one single page has unique style. Internal styles are defined within
the section of an HTML page. Syntax: The attributes that can be specified to
the <style> element inside the <HEAD>section of an HTML page.
Syntax:
<Style Type=”text/css”>
Tag or Selector{attribute1:value1; attribute2:value2;…….}
……….
</Style>
EXAMPLE
<HTML>
<HEAD>
<TITLE>INLINE
STYLE</TITLE>
<STYLE
Type="text/css">
H1{font-family:arial;font-size:20pts;background-color:red;}
H2{font-family:cursive;font-size:16pts;background-color:gold;}
P{font-size:14pts;font-style:italic;
</STYLE>
</HEAD>
<BODY>
<H1>Inline
Style</H1>
<CENTER><<H1>Hyper Text Markup Language
HTML is a markuplanguage
devised to allow website creation. These websites can then be viewed by anyone
else connected to the Internet. It is relatively easy to learn, with the basics
being accessible to most people in one sitting; and quite powerful in what it
allows you to create.</P>
<CENTER><H2>CSS stands for Cascading Style
Sheets.</H2>
<P>CSS describes how HTML elements are to be
displayed on screen. CSS saves a lot of work. It can control the layout of
multiple web pages all at once. External style sheets are stored in CSS
files.</P>
</BODY>
</HTML>
External Style Sheet
An
external style sheet is a separate file where we can declare all the styles
which are required on the web site. It can saved as a file with an extension
“.css”. We can link the external style sheet from the HTML pages using
<Link> tag.
Syntax
of <Link> tag
<Link
Ref=StyleSheetHref=”<Stylesheet filename>”>
Main
advantage of external style sheet is that it can be set the each element once. If
update is required then it can be done updating at one place.
Code
for External.CSS
H1{font-family:arial,helvetica;font-size:20pts;background-color:red;}
P{font-size:14pts;font-style:italic;font-weight:bold;border-color:blue;border
style:groove;border-width:thick;margin-left:5%;margin-right:15%}
Note:
Save this file in desktop under filename External.CSS
<HTML>
<HEAD>
<TITLE>INLINE
STYLE</TITLE>
<LINK
REL=STYLESHEET HREF="EXTERNAL.CSS”>
</HEAD>
<BODY>
<P>HTML
is a markuplanguage devised to allow website creation. These websites can then
be viewed by anyone else connected to the Internet. It is relatively easy to
learn, with the basics being accessible to most people in one sitting; and
quite powerful in what it allows you to create.</P>
<CENTER><H1>CSS</h1></CENTER>
<P>CSS stands for Cascading Style Sheets.CSS
describes how HTML elements are to be displayed on screen. CSS saves a lot of
work. It can control the layout of multiple web pages all at once. External
style sheets are stored in CSS files.</p>
</BODY>
</HTML>
Note: Save the above file in desktop under filename
External.HTM and execute the code.
Form
<HEAD>
<TITLE>LAB work</TITLE>
</HEAD>
<BODY>
<style>
legend{
background-color:BLUE;
color:white;
border-radius:8px;
font-family:JOKERMAN;
padding:10px;
}
fieldset{
white-space: pre-wrap;
margin-bottom:10px;
border:1px solid green;
line-height:1.5;
}
</style>
<form>
<fieldset>
<CENTER><legend>ROSEBUD SCHOOL<BR>Buddhanagar, Kathmandu</CENTER>
</legend>
Name: <input type="text" placeholder="Enter your name">
Class : <select>
<option>9 Filipes</option>
<option>9 Gallica</option>
<option>9 Hugonis</option>
<option>9 Coryana</option>
</select>
Gender:
<input type="radio" name="gender">Male
<input type="radio" name="gender">Female
Phone Number: <input type="text" placeholder="Enter your phone number">
<input type="reset"> <input type="submit">
</fieldset>
</form>
</BODY>
</HTML>
1.
Fill in the blanks.
(a)
Data in form can be filled using text fields, checkbox , radio buttons.
(b)
Password input box displays bullets in the place of
characters.
(c)
One of the common fields or HTML form is the text input field that allows to input small piece of text.
(d)
Radio buttons are groups
of small round buttons that allow a user to choose one option in a group.
(e)
There are three ways to use styles sheet, which are inline, internal and external style sheet.
2. State whether the following statements are true
or false.
(a)
Textarea tag is used to input large peices of text which is up to 1024
characters. True
(b)
Once CSS is defined , it cna be used onlu in single HTML page. False
(c)
Border-style, border-color,border-width are attributes of border tag. True
(d)
An external style sheet is a separate file where we can declare all the styles
and saved as a file with an extension dot css. True
(e)
CSS supports a number of measurements including absolute units such as inches,
centimeters, points. True
6. Answer the following questions in short:
(a) What is text input element of form?
Ans::Text input field allows to input small piece of text such as names, addresses etc.
(b) What is the maximum number of characters can be input using textarea input element of form?
Ans::1024 Characters
(c) What is checkbox element?
Ans::Check box allows user to select multiple options from list.
(d) Give examples of relative measurement units.
Ans::Percentages and em units are examples of relative measurement units.
(e) What is internal style sheet?
Ans::The internal style sheet is used to add a unique style for a single document. It is defined in <head> section of the HTML page inside the <style> tag.
7. Answer the following questions:
(a) What is form? Write names of elements of form.
Ans::The HTML form element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc. Elements of form are : text fields, checkboxes, radio buttons, submit buttons, etc.
(b) Explain radio button element and check box element of form.
Ans::Radio buttons are groups of small round buttons that allow a user to choose one option in a group. Syntax of Radio Button:
<input type="radio" name="group-name" value="value-if-selected"> Options Check box allows user to select multiple options from list. Syntax of checkbox: <input type="checkbox" name="field-name" value="value-if-selected">Options
(c) What is links? Write the four different states of it.
Ans::Links is a connection from one web page to another web pages. CSS property can be used to style the links in various ways. There are four different states of a link supported by CSS are :
(1) a:link- a normal, unvisited link
(2) a:visited- a link the user has visited.
(3) a:hover- a link when the user mouse over it.
(4) a: active- a link the moment it is clicked.
(d) Write different attributes of margin.
Ans::Four attributes of margin are: (1) margin-top (2) margin-bottom (3) margin-left (4) margin-right
(e) What is CSS? Write any two advantages of it.
Ans::A technique to design a web page presentable in much more interactive and user friendly way is called CSS(Cascading Style Sheet). It is a powerful mechanism for adding styles such as fonts, colors, border, background etc. Two advantages of CSS are:
(i) It reduces HTML codes.
(ii) It can be defined once and it can be used in multiple HTML pages.
(f) Explain internal style sheet and external style sheet.
(g) What is CSS syntax? Explain with an example.
Ans:A CSS rule consists of a selector and a declaration block is called CSS syntax.
CSS Syntax: selector {property1:value;property2:value;...........}
Example: h1{color:red;font-size:18pt;}