Scribd
Upload
25 views

Part2in Unit1

Uploaded by

Chandrika Surya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
25 views

Part2in Unit1

Uploaded by

Chandrika Surya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 40

FORMS

Forms are the best way of adding interactivity of element in a web page. They are usually
used to let the user to send information back to the server but can also be used to simplify
navigation on complex web sites. The tags that use to implement forms are as follows.
<forms action=”URL” method = “post” | “get”>…….</form>
When get is used, the data is included as part of the URL. The post method encodes the
data within the body of the message. Post can be used to send large amount of data, and it
is more secure than get.
The <input> TAG
Many of the commonly used controls are specified with the inline tag <input> for text-box,
passwords, checkboxes, radio buttons, and the action buttons Reset, Submit, and plain.The
one attribute of <input> that is required for all of the controls is type, which specifies the
particular kind of control.
<input type = “text” | “password” | “checkbox” | “radio” | “submit”
name=”string “value=”string” size=”n”>

The <label> element in HTML is used to associate a text label with a form input element.
This improves accessibility and usability by allowing users to click on the label text to
focus on or toggle the associated input field. Here's an example:
<label for="username">Username:</label>
The `<label>` element associates text with form elements, improving accessibility and
usability. It’s `for` attribute matches the `id` attribute of the input field, enabling users to
click on the label to interact with the associated input.
In the above tag, the attribute type is used to implement text, password, checkbox, radio
and submit button.
Text Control:
A text control, which we usually refer to as a text box, creates a horizontal box into which
the user can type text. Text boxes are often used to gather information from the user, such
as the user’s name and address.
Attributes
 Type attribute takes the value – text, to create a text box
 Name attribute takes any valid identifier name so that it identifies uniquely while
processing the form data either at the client side or server side.
 Value attribute takes the value that is entered in the text box by the user
 Size attribute specifies the length of the text box in terms of number of characters
 Maxlength attribute specifies the maximum number of characters accepted by the
browser
Example: <form action = "">
<p>
<input type = "text" name = "Name" size = "25" maxlength = "25" />
</p>
</form>
1. Text: It is used to input the characters of the size n and if the value is given than it is
used as adefault value. It uses single line of text. Each component can be given a
separate name usingthe name attribute.
Example:
<label for="username">Username:</label>
<input type="text" id="username" name="username">

2. Password: It works exactly as text, but the content is not displayed to the screen,
instead an *is used.
Example:
<label for="password">Password:</label>
<input type="password" id="password" name="password">

3. Radio: This creates a radio button. They are always grouped together with a same name
butdifferent values.
Example:
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
Attributes
 Value attribute contains the radio button's value, which is hidden to the user
 A radio group is defined by giving each of radio buttons in the group the same name –
using the attribute name. Once a radio group is established, selecting any radio button
in that group automatically deselects any currently-selected radio button in the same
group.
 Checked is a boolean attribute indicating whether or not this radio button is the default-
selected item in the group
Example:
<head>
<title> Radio </title>
</head>
<body>
<p> Age Category </p>
<form action = "">
<p>
<label><input type = "radio" name = "age" value = "under20" checked = "checked" /> 0-
19 </label>
<label><input type = "radio" name = "age" value = "20-35" /> 20-35 </label>
<label><input type = "radio" name = "age" value = "36-50" /> 36-50 </label>
<label><input type = "radio" name = "age" value = "over50" /> Over 50 </label>
</p>
</form>
</body>

4. Checkbox: It provides a simple checkbox, where all the values can be selected unlike
radiobutton.
Example:
<input type="checkbox" id="subscribe" name="subscribe" value="yes">
<label for="subscribe">Subscribe to newsletter</label>
Attributes:
Name: This attribute takes any valid identifier name as it value so that it is identified
uniquely while the form is processing on the client side or server side.
Value: It is the value of the checkbox when submitting the form, if the checkbox is
checked.
Checked: A Boolean attribute that indicates checkbox is checked by default, when the
page is loaded.
Indeterminate: A Boolean attribute indicates that the value of the checkbox is
indeterminate rather than true or false
Example:
<html>
<head> <title> Checkboxes </title></head>
<body>
<p>Grocery Checklist</p>
<form action = "">
<p>
<label> <input type = "checkbox" name = "groceries" value = "milk" checked = "checked"
/> Milk
</label>
<label> <input type = "checkbox" name = "groceries" value = "bread" /> Bread </label>
<label> <input type = "checkbox" name = "groceries" value = "eggs" /> Eggs </label>
</p>
</form>
</body>
</html>

5. Submit: This creates a button which displays the value attribute as its text. It is used to
send the data to the server.
Example:
<input type="submit" value="Submit">

6. Email: This creates an email input field where users can enter their email address, and
the browser validates that it's in the correct email format.
Example:
<label for="email">Email:</label>
<input type="email" id="email" name="email">

7. Number: This creates a number input field where users can enter numerical values.
Example:
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity">

8. Textarea: This creates a textarea where users can enter multi-line text, such as a
message or comments.
Example:
<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="4" cols="50"></textarea>

9. Select Dropdown: This creates a dropdown list of options where users can select one
option, such as their country.
Example:
<label for="country">Country:</label>
<select id="country" name="country">
<option value="usa">USA</option>
<option value="uk">UK</option>
<option value="canada">Canada</option>
</select>

10.Date: This creates a date input field where users can select a date from a date picker.
Example
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob">

11.Time: This creates a time input field where users can select a time from a time picker.
Example
<label for="appointment-time">Appointment Time:</label>
<input type="time" id="appointment-time" name="appointment-time">

12.File:This creates a file input field where users can upload files from their device.
Example
<label for="file-upload">Upload File:</label>
<input type="file" id="file-upload" name="file-upload">

13.Reset: This creates a reset button that, when clicked, resets all form fields to their
default values.
Example
<input type="reset" value="Reset">

14.Hidden: This creates a hidden input field where data can be stored but not displayed to
the user. It's commonly used for passing values between pages or storing data on the
client side.
Example
<form>
<p>This is page 10</p>
<input type="hidden" name="pagename" value="10" />
This is page 10
<input type="submit" name="submit" value="Submit" /> Submit Reset
<input type="reset" name="reset" value="Reset" />
 This tag helps to have a list of item from which a user can choose. The name of
theparticular select tag and the name of the chosen option are returned.
<option value=”string” selected>……</option>
 The select statement will have several options from which the user can choose. The
values will be displayed as the user moves through the list and the chosen one returned
to the server.
<textarea name=”string” rows=”n” cols=”n”>…….</textarea>
 This creates a free format of plain text into which the user can enter anything they like.
Thearea will be sized at rows by cols but supports automatic scrolling.

<form> Attributes

Attribute Description
accept-charset Specifies the character encodings used for form submission
action Specifies where to send the form-data when a form is
submitted.
<form action="/action_page.php">
autocomplete Specifies whether a form should have autocomplete
on or off.
<form action="/action_page.php" autocomplete="on">
enctype Specifies how the form-data should be encoded when
submitting it to the server (only for method="post")
method Specifies the HTTP method to use when sending form-data.
The form-data can be sent as URL variables (with
method="get") or as HTTP post transaction (with
method="post").The default HTTP method when submitting
form data is GET.
name Specifies the name of the form
novalidate Specifies that the form should not be validated when submitted
<form action="/action_page.php" novalidate>
rel Specifies the relationship between a linked resource and the
current document
target Specifies where to display the response that is received after
submitting the form:_blank(newwindow or tab),_self(parent
frame),_parent(currentwindow),_topframe(fullbodyofthewindo
w),name(named iframe)
<form action="/action_page.php" target="_blank">
Example:
HTML code that implements forms
<html>
<head>
<title>form</title>
</head>
<body>
<p align="left">Name:<input type="text" maxlength=30 size=15>
<p align="left">Password:<input type="password" maxlenght=10
size=15>
<p align="left">Qualification:<br><input type="checkbox"name="q"
value="be">B.E
<input type="checkbox" name="q" value="me">M.E
<p align="left">Gender:<br><input type="radio" name="g"
value="m">Male
<input type="radio" name="g" value="f">Female
<p align="left">course:<select name="course" size=1>
<option value=cse selected>CSE
<option value=it>CSIT
</select>
<p align="left">Address:<br><textarea name="addr" rows=4 cols=5
Scrolling=yes></textarea>
<p align="center"><input type="submit" name="s" value="Accept">
<p align="center"><input type="reset" name="c" value="Ignore">
</body>
</html>
Output:
FRAMES
Frames provide a pleasing interface which makes your web site easy to navigate.When we
talk about frames actually we are referring to frameset, which is a special type of web
page.
Simply frameset is nothing but collection of frames. Web page that contains frame element
iscalled framed page. Framed page begins with <frameset> tag and ends with
</frameset>.Each individual frame is identified through <frame> tag. Creation of framed
page is verysimple. You can nest the framesets. First you decide how you want to divide
your webpageand accordingly define frame elements.
Consider the following diagrams, first form divides into two columns and the secondform
divides into three rows.

the <frameset> . . . </frameset> tags


The <FRAMESET> . . . </FRAMESET> tags are the container tags for all other tags that
are used to create frames. These tags are used to specify the size and number of the frames
to be created in an HTML Page. The frames within these tags are jointly referred to as a
frameset.
Syntax:
<FRAMESET cols=”n,n” rows=”n,n”>
<FRAME> Tags
</FRAMESET>
Attributes
COLS: The COLS attribute is used to specify the number of vertical frames within HTML
Page.
ROWS: The ROWS attribute is used to specify the number of horizontal frames within
HTML Page. To specify the values of the attributes, use a comma-separated list of values.
The values can be of the following two types:
Value: This numeric value is used to specify number of pixels that a frame will occupy in
the browser window.
Value%: This value is used to specify percentage of space that each frame will occupy in
the browser window. The total of all the values specified in the comma-separated list is
100%.In order to divide into two columns we can use the following syntax
<frameset cols=”25%,75%>
<frame name=”disp” src=”1.html”>
<frame name=”res” src=”2.html”>
</frameset>
In the second diagram we have three rows so by using rows parameter of frameset, we
candivide logically the window into three rows.
<frameset rows=”20%,*,10%>
<frame name=”first” src=”1.html”>
<frame name=”second” src=” 2.html”>
<frame name=”third” src=” 3.html”>
</frameset>
According to above code, first row occupies 20% of the window, third row occupies 10%
of the window, second row * represents remaining area that is 70% of the window.
<FRAME> Tag:
You use the <FRAME> Tag to create frame with in frameset. You can use the following
attributes to specify the name of the frame and the HTML page that you need to display in
the frame.
SRC: SRC attribute to specify the HTML page that you want to display in a
frame.NAME: NAME attribute to specify the name of the frame. This NAME is used
by the anchor element to display the linked HTML Pages with in frame.
SCROLLING: attribute used to add scrollbars to a frame. The SCROLLING attribute
takes three value: YES, NO, AUTO.
 The value YES specifies that a scrollbar should always be visible on the frame
 The value NO specifies that the scrollbar should never be visible on the frame
 The value AUTO specifies the browser to automatically display or remove scrollbars
from a frame
FRAMEBORDER: attribute to specify whether a frame should have a border. The value
0(zero) specifies no border. If you specify any other numeric value, the border is
displayed.
NORESIZE: By default, you can resize a frame by dragging its borders. You can restrict
this by specifying the NORESIZE attribute.
Syntax:
<FRAME SRC =”URL” NAME =” myframe” SCROLLING =”yes | no |auto”
FRAMEBORDER =”0|1” [NORESIZE]/>
Nested Framesets:-
Sometimes it is required to divide your window into rows and columns, and then there is
requirement of nested framesets. Frameset with in another frameset is known as nested
frameset.
The purpose of NAME parameter in frame tag in the above example is nothing but
mainimportance is if we have some links in left side and you want to display respective
pages inthe right side frame, then name is essential. Using target parameter of Anchor(A)
tag as follows users can specify name of frame.
Example:
First.html
<frameset rows=”20%,*”>
<frame name=”fr1” src=”frame1.html”>
<frameset cols=”25%,*”>
<frame name=”fr2” src=”frame2.html”>
<frame name=”fr3” src=”frame3.html”>
</frameset>
</frameset>

Frame1.html
<html>
<body>
<center><h1> College branches</h1></center>
</body>
</html>

Frame2.html
<html>
<body bgcolor=”green”>
<ul>
<li>CSE
<li>EEE
<li>ECE
<A href=”example2.html” target=”fr3”><li>IT</A>
</ul>
</body>
</html>

Frame3.html
<html>
<body text=”white” bgcolor=”tan”>
<h1>Profile</h1>
</body>
</html>
DIVISION AND SPANNING IN HTML
What is a <div> tag in HTML?
The <div> tag in HTML is a block-level element for grouping other HTML elements.
"Div" stands for "division" or "divider," and it's one of the most commonly used elements
for structuring and styling web pages.
Features of <div> Tag:
 A <div> takes up the entire width available to it, creating a block. This means that any
content following a <div> starts on a new line.
 <div> tags are often used with CSS (Cascading Style Sheets) to style elements grouped
within them. They can be styled with properties like width, height, background color,
margin, padding, and more.
 <div> tags are ideal for grouping together elements that form a section or a part of the
webpage. This grouping can be useful for applying styles or for layout purposes,
especially when used with CSS Flexbox or Grid systems.
 <div> element does not add any visual change to the content by itself. It’s primarily a
structural element, and any visual styling needs to be defined with CSS.
 <div> tags are versatile and can contain almost any other HTML element, including
headings, paragraphs, links, images, and other <div> tags.
 With the introduction of HTML5, more semantic elements like <section>, <article>,
<header>, and <footer> are often preferred over <div> for better document structure
and search engine optimization. However, <div> remains useful for general-purpose
grouping where no other semantic element is appropriate.
Example of <div> Tag
Below is an example that demonstrates the use of a <div> tag in an HTML document. In
this example, <div> tags are used to create a simple webpage layout with a header, a
content section, and a footer. Each section is styled with CSS to distinguish them visually.
<!DOCTYPE html>
<html>
<head>
<title>Div Tag Example</title>
<style>
#header {
background-color: #ffcc00;
padding: 10px;
text-align: center;
}
#content {
background-color: #e0e0e0;
padding: 20px;
}

#footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<div id="header">
<h1>My Web Page of Shiksha Online</h1>
</div>
<div id="content">
<p>Welcome to my web page. Here is some content on Shiksha Online</p>
</div>
<div id="footer">
<p>Footer Information on Shiksha Online</p>
</div>
</body>
</html>
What is a <span> tag in HTML?
The <span> tag in HTML is an inline element used for styling and grouping inline content
within a webpage. Unlike block-level elements like <div>, which create a new block or
line in the layout, <span> allows for styling or grouping without affecting the document's
flow.
Features of <span> Tag
 The <span> tag does not cause a line break or block formation, meaning the content
remains inline with other elements or text. It's used for small-scale adjustments or
styling within the flow of a document.
 <span> is commonly used with CSS (Cascading Style Sheets) to apply specific styles
to a part of the text or content, such as changing the color, font, or background of
selected text without altering the rest of the text around it.
 By itself, a <span> tag does not add any formatting or visual change to the content. It's
used as a hook for CSS styles or JavaScript functions.
 <span> can be used to group together inline elements or text for styling or scripting
purposes. It’s especially useful when you want to target a specific part of the text or
inline elements with a class or id.
 The <span> tag is semantically neutral, meaning it doesn’t convey any specific
meaning about its content. This is in contrast to more semantically specific tags
like <em> for emphasis or <strong> for important content.

Example of <span> Tag


Below is an example showcasing the use of the <span> tag in HTML. In this example,
the <span> tag is used to apply different styles to specific parts of a sentence.
<!DOCTYPE html>
<html>
<head>
<title>Span Tag Example</title>
<style>
.highlight {
color: red;
font-weight: bold;
}
.emphasis {
background-color: yellow;
font-style: italic;
}
</style>
</head>
<body>
<p>This is an example of a <span class="highlight">highlighted</span> word and <span
class="emphasis">emphasized</span> text using the span tag.</p>
</body>
</html>
Difference Between div and span Tag in HTML
Below is a table showcasing major differences between div and span in HTML.
Feature div Span
Type of Element Block-level Inline
Takes up the full width Only takes up as much width as
Default Display available, with a new line necessary, without forcing new
before and after. lines
Used to group a small chunk of
Used to group larger blocks of
Primary Use HTML elements or to apply
content or other elements
styling to part of a text
It can have width, height, Does not affect the layout with
Styling margin, and padding, which width and height; margin and
affects the layout significantly. padding are applied differently.
Minimal, typically used for
Impact on Significant, as it often creates a
styling text or small elements
Layout "box" for other elements
within text
Nesting It can contain other block-level Typically contains only data or
elements or inline elements other inline elements
Inherently inline but also
Not inherently accessible and
requires additional attributes for
Accessibility requires additional attributes
accessibility when used for
for accessibility.
grouping

HTML5
HTML 5 is the fifth revision of the HTML standard. It offers new features that provide not
only rich media support but also enhance support for creating web applications that can
interact with users, their local data, and servers more easily and effectively than was
previously possible. It has improved the markup available for documents and has
introduced application programming interfaces (API) and Document Object Model
(DOM).
Features:
1. It has introduced new multimedia features which supports audio and video controls by
using<audio> and <video> tags.
2. There are new graphics elements including vector graphics and tags.
3. Drag and drop- the user can grab an object and drag it.
4. Geo-location services- it helps to locate the geographical location of a client.
5. Web storage facility which provides web application methods to store data on web
browser.
6. Uses SQL database to store data offline.
7. Allows drawing various shapes like triangle, rectangle, circle, etc.
8. Capable of handling incorrect syntax.
9. Easy doctype declaration i.e. <!doctype html>
10. Easy character encoding i.e. <meta charset=‖utf-8′′>
The audio element
The <audio> tag is used to embed sound content in a document, such as music or other
audio streams. The <audio> tag contains one or more <source> tags with different audio
sources. The browser will choose the first source it supports. The text between the <audio>
and </audio> tags will only be displayed in browsers that do not support the <audio>
element. There are three supported audio formats in HTML: MP3, WAV, and OGG.
Usage:
<audio controls= ―controls‖>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
The only commonly used attribute of the audio element is controls, which we always set to
controls. When this attribute is used, it creates a display of start/stop button, a clock, a
slider of the progress of the play, that total time of the audio file and a slider for volume
control.
The video element
The <video> tag is used to embed video content in a document, such as a movie clip or
other video streams. The <video> tag contains one or more <source> tags with different
video sources. The browser will choose the first source it supports. The text between the
<video> and </video> tags will only be displayed in browsers that do not support the
<video> element. There are three supported video formats in HTML: MP4, WebM, and
OGG.
Usage:
<video width="320" height="240" controls = ―controls‖>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

The time element


The <time> tag is used to display the human-readable date/time. It can also be used to
encode dates and times in a machine-readable form. The main advantage for users is that
they can offer to add birthday reminders or scheduled events in their calendars’ and search
engines can produce smarter search results.
Usage:
<time attribute>
Time...................
</time>
This tag contains single attribute datetime which is used to define the date/time in a
Machine-readable form of the <time> element.
Example:
<!DOCTYPE html>
<html>
<body>
<h1>The time element</h1>
<p>Open from 10:00 to <time>21:00</time> every weekday.</p>
<p>I have a date on <time datetime="2008-02-14 20:00">Valentines day </time>.
</p>
<p><b> Note: </b>
The time element does not render as anything special in any of the major browsers.
</p>
</body>
</html>
Output:
The article element
The <article> element represents a section of content that forms an independent part of a
document, such as a blog post, article, or other self-contained unit of information that may
be linked to or included in some other content body.
Example:
<article>
<h1>Introduction to HTML</h1>
<p>HTML is a markup language that is used for creating web pages.</p>
</article>
The section element
The <section> element defines a section of a document, such as header, footer etc.
Example:
<section>
<h1>Welcome to Our Website</h1>
<p>Welcome and thank you for taking the time to visit our website. </p>
</section>
Advantages:
 All browsers supported.
 More device friendly.
 Easy to use and implement.
 HTML 5 in integration with CSS, JavaScript, etc. can help build beautiful websites.
Disadvantages:
 Long codes have to be written which is time consuming.
 Only modern browsers support it.
 Supported Browsers: It is supported by all modern browsers.

PART-II

CSS (CASCADING STYLE SHEETS)

The cascading style sheet is markup language used in web document for presentation
purpose. The purpose of CSS is to separate web content from web presentation.

Advantages:
1. By combining CSS with HTML document, considerable amount of flexibility into the
content submission can be achieved.
2. Separating out the style from actual contents help in managing large scale complex
sites. So, CSS facilitates publication of contents in multiple presentation formats.
3. If CSS is used effectively then global style sheet can be applied to a web document.
This helps maintaining consistency in web document.
4. If a small change needs to be done in the style of web content, then CSS makes it more
convenient.
A Cascading Style Sheet is a collection of CSS style rules.
Each style rule in the rule list has two parts:
1. Selector, which indicates the element or elements affected by rule
2. A list of property – value pairs
Usage:
selector {property: value; property: value; ............}
h1 {font – family: arial}->This CSS rule applies to all <h1> elements

LEVELS OF STYLE SHEETS

CSS means Cascading Style Sheets.It is used to format the layout of a webpage.With CSS,
you can controlthe color, font, the size of text, the spacing between elements, how
elements are positioned and laid out,what background images or background colors are to
be used, different displays for different devices andscreen sizes, and more.
It can be added to HTML documents in 3 ways:
● Inline Style Sheet - by using the style attribute inside HTML elements
● Embedded Style Sheet/Document Level Style Sheet - by using a <style> element in the
<head> section
● External Style Sheet - by using a <link> element to link to an external CSS file
The most common way to add CSS, is to keep the styles in external CSS files.
i. Inline CSS
Inline styles are applied directly to an HTML element using the style attribute. This
method is useful for applying unique styles to a single element.
The following example sets the text color of the <h1> element to blue, and the text color
of the <p> elementto red:
Example
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
</body>
</html>
Advantages of Inline Styles
1. Inline styles have the highest precedence. That means they are going to be applied no
matter what. The only styles that have higher precedence than inline style.
2. Inline styles are easy and quick to add.
Disadvantages of Inline Styles
1. Inline styles must be applied to every element you want them on.
2. It's impossible to style pseudo-elements and -classes with inline styles.

ii. Internal
Internal stylesheets are defined within the <style> tag inside the <head> section of an
HTML document. This method is useful for applying styles to a single page.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: green;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Advantages:
 The Embedded style sheet helps to decide the layout of the webpage.
 It is Useful when we want to apply the unique style sheet for the webpage.
Disadvantages:
 When we want to apply the style to more than one documents at a time then this style
sheet is of no use.

iii. External CSS


External stylesheets are separate CSS files linked to an HTML document using the <link>
tag. This method is useful for applying styles across multiple pages.
<!DOCTYPE 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>

Styles.css
The file must not contain any HTML code, and must be saved with a .css extension.
body
{
background-color: green;
}
h1
{
color: blue;
}
P
{
color: red;
}
STYLE SPECIFICATION FORMATS
The format of style specification depends on the level of style sheet. Inline style
specifications appear as values of the style attributes of a tag, the general form of which is
as follows:
style = ―property_1:value_1; property_2:value_2; ............. property_n:value_n;‖
Document style specifications appear as the content of a style element within the head
section of the document. The general form of the content of a style element is as follows:
<style type= ―text/css‖>
Rule list
</style>
The type attribute of the <style> tag tells the browser the type of the style specification for
CSS.Each style rule in the rule list has two parts:
1. Selector, which indicates the element or elements affected by rule
2. A list of property – value pairs
Following is the form of style rule:

Selector
{
property_1:value_1;
property_2:value_2;
.......
property_n:value_n;
}

An external style sheet consists of a list of style rules of the same form as in document
style sheets, but the <style> tag is not included. All the style information is placed in
separate file, created with the extension .css and this can be used for multiple html
documents. This .css file is linked to the html document by including <link> tag in the
head section of the html, which can be written as follows:

<link rel="stylesheet" type="text/css" href="[Style sheet URL]">

SELECTOR FORMS

A selector specifies the elements to which the style information applies. The selector can
have a variety of forms.
1. Simple Selector Forms
The simplest selector form is a single element name, such as h1, h2, p, etc...
In this case the property values in the rule apply to all the occurrences of the named
element.
Example:
h1
{
font-family:Arial;
font-size:20px;
}

<html>
<head>
<title>type selector</title>
<style type="text/css">
h1, h2, p {
font-family:Arial;
font-size:20px;
}
</style>
<body>
<h1>Vignan Nirula</h1>
<h2>Vignan Nirula</h2>
<p>Vignan Nirula</p>
</body>
</html>

2. Class Selectors
Class selectors are used to allow different occurrences of the same tag to use different style
specifications. A style class is defined in a style element by giving the style class a name,
which is attached to the tag’s name with a period.

Example:
<html>
<head>
<title>class selector</title>
<style type="text/css">
h1.redtext
{
font-family: monotype corsiva;
color: red;
font-size:14pt;
}
h1.bluetext
{
font-family: times new roman;
color: blue;
font-size:16pt;
}
</style>
</head>
<body>
<h1 class="redtext">Vignan Nirula</h1>
<h2> Andhra pradesh</h2>
<h1 class="bluetext">Vignan Nirula</h1>
</body>
</html>
3. Generic Selectors
To specify the class of style specifications to the content of more than one tag, generic
selectors are used. It is defined without a tag name in its selector. Without tag name, the
name of the generic class begins with a period, as in the following example:

<html>
<head>
<title> Generic Selector</title>
<style type="text/css">
.text
{
font-family:Arial;
color:black;
}
</style>
</head>
<body>
<h1 class="text">Vignan Nirula</h1>
<p> Women's</p>
<h2 class="text">Engineering</h2>
<p class="text">college</p>
</body>
</html>

4. ID Selectors
The ID selector is similar to the class selector but only the difference between the two is
that class selector can be applied to more than one elements where as using the ID selector
the style can be applied to one specific element.
The syntax is as follows.
#name_of_ID {property:value list;}
Example:
<html>
<head>
<title>ID selector</title>
<style type="text/css">
#top
{
font-family: monotype corsiva;
color: red;
font-size:14pt;
}
</style>
</head>
<body>
<p id="top"> Vignan’s Engineering college</p>
</body>
</html>

5. Contextual Selectors
Selectors can specify that the style should apply only to elements in certain positions in the
document. The simplest form of contextual selector is the descendant selector. Element B
is a descendant of element A if it appears in the content of A. And A is the ancestor of B.
A particular element in the document can be selected by listing one or more ancestors of
the element in the selector, with only white space separating the element names. Below is
the example for style rule that applies its style only to the content of ordered list elements
that are descendants of unordered list elements in the document:

ul ol {property – value list}

6. Pseudo Classes
Pseudo Classes specify that certain style rules apply when something happens. Some of
the
pseudo classes are as follows:
a) link pseudo class is used to style a link that has not been visited
b) visited pseudo class is used to style a link that has been visited
c) hover pseudo class is used to specify the style that is to be applied when mouse cursor
moves over it
d) focus pseudo class is used to specify the style that is to be applied when the associated
element is focused

Example: h2: hover {property – value list}

7. Universal Selector
If you want a style rule to apply to all elements, you can use this selector. It is denoted by
an asterisk (*)
Example:
<html>
<head> <title> Universal Selector </title>
<style type="text/css">
*{
color:green
}
</style>
</head>
<body>
<h1> Vignan's Lara Engineering College</h1>
<ul type="disc">
<li>Dept of CSE</li>
<li>Dept of IT</li>
<li>Dept of ECE</li>
<li>Dept of EEE</li>
</ul>
</body>
</html>
CSS COLORS AND BACKGROUNDS, CSS TEXT AND FONT PROPERTIES
CSS Colors
Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA
values.CSS/HTML support 140 standard color names.
 Color Names: e.g., color: red;
 Hexadecimal Colors: e.g., color: #ff0000;
 RGB Colors: e.g., color: rgb(255, 0, 0);
 RGBA Colors: e.g., color: rgba(255, 0, 0, 0.5); (with alpha for transparency)
 HSL Colors: e.g., color: hsl(0, 100%, 50%);
 HSLA Colors: e.g., color: hsla(0, 100%, 50%, 0.5);

CSS Background Color


You can set the background color for HTML elements:
 Background Color: background-color: #00ff00;
 Background Image: background-image: url('image.jpg');
 Background Repeat: background-repeat: no-repeat;
 Background Position: background-position: center;
 Background Size: background-size: cover; (or contain, specific size values)
 Background Attachment: background-attachment: fixed; (or scroll)
Example
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:lightblue;">Hello World</h1>
<p style="background-color:orange;">Welcome to Full Stack Web Technologies.</p>
</body>
</html>
Output

CSS Text Color


You can set the color of text:
Example
<!DOCTYPE html>
<html>
<body>
<h1 style="color:lightblue;">Hello World</h1>
<p style="color:orange;">Welcome to Full Stack Web Technologies.</p>
</body>
</html>
Output
CSS Border Color
You can set the color of borders:
Example
<!DOCTYPE html>
<html>
<body>
<h1 style="border-color: orange; border-style: solid">Hello World</h1>
<h1 style="border-color: blue; border-style: solid">Hello World</h1>
<h1 style="border-color: violet; border-style: solid">Hello World</h1>
</body>
</html>
Output:

CSS Color Values


In CSS, colors can also be specified using RGB values, HEX values, HSL values, RGBA
values, and HSLA values:
Example
<!DOCTYPE html>
<html>
<body>
<p>Same as color name "Orange":</p>
<h1 style="background-color:orange;">Orange</h1>
<h1 style="background-color:rgb(255, 165, 0);">Orange</h1>
<h1 style="background-color:#ffa500;">Orange</h1>
<h1 style="background-color:hsl(38.8, 100%, 50%);">Orange</h1>
<p>Same as color name "Orange", but 50% transparent:</p>
<h1 style="background-color:rgba(255, 165, 0, 0.5);">Transparent Orange</h1>
<h1 style="background-color:hsla(38.8, 100%, 50%, 0.5);">Transparent Orange</h1>
</body>
</html>
CSS Backgrounds
The CSS background properties are used to add background effects for elements.
The following are CSS background properties:
● background-color(Note: Already completed )
● background-image
● background-repeat
● background-attachment
● background-position
● background (shorthand property)
CSS background-image
The background-image property specifies an image to use as the background of an
element. By default, the image is repeated so it covers the entire element.

Example1
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image: url("paper.gif");
}
</style>
</head>
<body>
<h1>Hello World! </h1>
<p>This page has an image as the background! </p>
</body>
</html>
Example2
The background image can also be set for specific elements, like the <p> element:
<!DOCTYPE html>
<html>
<head>
<style>
p{
background-image: url("paper.gif");
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This paragraph has an image as the background!</p>
</body>
</html>
CSS background-repeat
Showing the background image only once is also specified by the background-repeat
property:For smaller images the background image repeats to avoid this we use
background repeat property
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
</style>
</head>

<body>
<h1>Hello World!</h1>
<p>W3Schools background image example.</p>
<p>The background image only shows once, but it is disturbing the reader!</p>
</body>
</html>
CSS background-position
The background-position property is used to specify the position of the background image
In the above example the background image is placed in the same place as the text. We
want to change the position of the image, so that it does not disturb the text too much.
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>Here, the background image is only shown once. In addition it is positioned away from
the text.</p>
<p>In this example we have also added a margin on the right side, so that the background
image will not disturb the text.</p>
</body>
</html>
CSS background-attachment
The background-attachment property specifies whether the background image should
scroll or be fixed (will not scroll with the rest of the page):
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("img_tree.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body>

<h1>The background-attachment Property</h1>


<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
</body>
</html>
Output

Example
Specify that the background image should scroll with the rest of the page:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
background-attachment: scroll;
}
</style>
</head>
<body>
<h1>The background-attachment Property</h1>
<p>The background-attachment property specifies whether the background image should
scroll.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
</body>
</html>
Output:
CSS background - Shorthand property
To shorten the code, it is also possible to specify all the background properties in one
single property. This is called a shorthand property.
Instead of writing:
body {
background-color: #ffffff;
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
You can use the shorthand property background:
Example
Use the shorthand property to set the background properties in one declaration:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #ffffff url("img_tree.png") no-repeat right top;
margin-right: 200px;
}
</style>
</head>
<body>
<h1>The background Property</h1>
<p>The background property is a shorthand property for specifying all the background
properties in one declaration. </p>
<p>Here, the background image is only shown once, and it is also positioned in the top-
right corner.</p>
<p>We have also added a right margin, so that the text will not write over the background
image.</p>
</body>
</html>
Output:
CSS Text and Font Properties
CSS has a lot of properties for formatting text.
Text Alignment and Text Direction
In this chapter you will learn about the following properties:
● Color (refer css color topic for color attribute)
● text-align
● text-align-last
● direction
● unicode-bidi
● vertical-align
Text Alignment
The text-align property is used to set the horizontal alignment of a text.
A text can be left, right, center aligned and justified.
The following example shows center aligned, and left and right aligned text (left alignment
is default if text direction is left-to-right, and right alignment is default if text direction is
right-to-left):

Example:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
h4 {
text-align: justify;
}
</style>
</head>
<body>
<h1>Heading 1 (center)</h1>
<h2>Heading 2 (left)</h2>
<h3>Heading 3 (right)</h3>
<h4>Heading 4 (justify)</h41111>
<p>The four headings above are aligned center, left, right and justify.</p>
</body>
</html>

Text Align Last


The text-align-last property specifies how to align the last line of a text.
<!DOCTYPE html>
<html>
<head>
<style>
p.a {
text-align-last: right;
}
p.b {
text-align-last: center;
}
p.c {
text-align-last: justify;
}
</style>
</head>
<body>
<p class="a">The text-align-last property with value right. Welcome to the Full Stack
Web Development CSS Text Property text-align-last property and right.</p>
<p class="b">The text-align-last property with value right. Welcome to the Full Stack
Web Development CSS Text Property text-align-last property and right.</p>
<p class="c">The text-align-last property with value right. Welcome to the Full Stack
Web Development CSS Text Property text-align-last property and right.</p>
</body>
</html>
Output:
Text Direction
The direction and unicode-bidi properties can be used to change the text direction of an
element: By using unicode-bidi property the entire text can be reversed and if we don't use
this property only text aligned is applied

Example:
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
direction: rtl;
unicode-bidi: bidi-override;
}
</style>
</head>
<body>
<p>This is the default text direction.</p>
<p class="ex1">This is right-to-left text direction.</p>
</body>
</html>
Output

Vertical Alignment
The vertical-align property sets the vertical alignment of an element.
Example
<!DOCTYPE html>
<html>
<head>
<style>
img.a {
vertical-align: baseline;
}
img.b {
vertical-align: text-top;
}
img.c {
vertical-align: text-bottom;
}
img.d {
vertical-align: sub;
}
img.e {
vertical-align: super;
}
</style>
</head>

<body>
<h1>The vertical-align Property</h1>
<h2>vertical-align: baseline (default):</h2>
<p>An <img class="a" src="sqpurple.gif" width="9" height="9"> image with a default
alignment.</p>
<h2>vertical-align: text-top:</h2>
<p>An <img class="b" src="sqpurple.gif" width="9" height="9"> image with a text-top
alignment.</p>
<h2>vertical-align: text-bottom:</h2>
<p>An <img class="c" src="sqpurple.gif" width="9" height="9"> image with a text-
bottom alignment.</p>
<h2>vertical-align: sub:</h2>
<p>An <img class="d" src="sqpurple.gif" width="9" height="9"> image with a sub
alignment.</p>
<h2>vertical-align: sup:</h2>
<p>An <img class="e" src="sqpurple.gif" width="9" height="9"> image with a super
alignment.</p>
</body>
</html>
Output:
Text Decoration
The text-decoration is used to decorate the text. In this concept you will learn about the
following properties:
● text-decoration-line
● text-decoration-color
● text-decoration-style
● text-decoration-thickness
● text-decoration
Example:
<!DOCTYPE html>
<html>

<head>
<style>
h1 {
text-decoration-line: underline;
text-decoration-thickness: auto; /* this is default */
}
h2
{
text-decoration-line: underline;
text-decoration-thickness: 5px;
}
h3
{
text-decoration-line: underline;
text-decoration-thickness: 25%;
}p
{
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: double;
text-decoration-thickness: 5px;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<p>A paragraph.</p>
</body>
</html>
Text-decoration shorth and property
The text-decoration property is a shorthand property for:
text-decoration-line (required)
text-decoration-color (optional)
text-decoration-style (optional)
text-decoration-thickness (optional)

Example
<!DOCTYPE html>
<html>
<head>
<style>
h1
{
text-decoration: underline;
}

h2
{
text-decoration: underline red;
}
h3 {
text-decoration: underline red double;
}
p{
text-decoration: underline red double 5px;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<p>A paragraph.</p>
</body>
</html>
Text Transformation
The text-transform property is used to specify uppercase and lowercase letters in a text.It
can be used to turn everything into uppercase or lowercase letters, or capitalize the first
letter of each word:
example
<!DOCTYPE html>
<html>
<head>
<style>
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
</style>
</head>
<body>
<h1>Using the text-transform property</h1>
<p class="uppercase">This text is transformed to uppercase.</p>
<p class="lowercase">This text is transformed to lowercase.</p>
<p class="capitalize">This text is capitalized.</p>

CSS Fonts
Choosing the right font for your website is important! The CSS Font Property
To shorten the code, it is also possible to specify all the individual font properties in one
property. The font property is a shorthand property for:
 font-style
 font-variant
 font-weight
 font-size/line-height
 Font-family
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p.a {
font: 20px Arial, sans-serif;
}
p.b {
font: italic small-caps bold 12px/30px Georgia, serif;
}
</style>
</head>
<body>

The font Property


This is a paragraph. The font size is set to 20 pixels, and the font family is Arial.This is a
paragraph. The font is set to italic, small-caps and bold, the font size is set to 12 pixels, the
line height is set to 30 pixels, and the font family is Georgia.

THE BOX MODEL

Virtually all document elements can have borders. These borders have various styles such
as color and width. The amount of space between the content of an element and its border
known as padding, as well as the space between the border and an adjacent element known
as margin. This model of document is shown as below:

Figure: Box Model

Borders
Every element has a property i.e. border – style, which controls whether the element
content has a border as well as the style of the border. Border style may be dotted, dashed,
solid, double and the default value is none.
The style of the each side of the border can be set with properties - Border-top-style,
Border-bottom-style, Border-left-style and Border-right-style.
And the color of the border can be set with the property border – color. The color of the
each side of the border can also be set with properties – border – right – color, border – top
– color, border – left – color, border – bottom – color. Border – width property is used to
specify the thickness of the border. It possible values are thin, medium, thick or a value in
pixels.
Example
<html>
<head>
<style type="text/css">
p
{
border-style: double;
border-width: thick;
border-color: green;
font-size:20px;
}
</style>
</head>
<body>
<p>
Properties of border are border style, border color, border width
</p>

</body>
</html>

Margins and Padding


Margin is the space between the border of an element and the element’s neighbor. Padding
is the space between the content of an element and its border. When there is no border, the
margin plus the padding is the space between the content of an element and its neighbor.
The margin properties are named margin, which applies to all four sides of an element,
four sides of the margin can also be set individually with the four properties, margin –
left, margin –right, margin – top, margin – bottom. Similarly, padding properties are
padding, padding – left, padding – right, padding – top, padding – bottom.
And the values for these properties can be specified in terms of units such as px for pixels,
in for inches, cm for centimeters, mm for millimeters, pt for points (a point is 1/72 inch),
and pc for picas (12 points).
Example:
<html>
<head>
<style type="text/css">
p.one
{
margin:0.2in;
padding:0.2in;
border-color: green;
border-style: double;
}
p.two
{
margin:0.1in;
padding:0.3in;
border-color: green;
border-style: double;
}
p. three
{
margin:0.3in;
padding:0.1in;
border-color: green;
border-style: double;
}
</style>
</head>
<body>

<p class="one">
Now is the time for all good programmers to learn to use style sheets
</p>
<p class="two">
Now is the time for all good programmers to learn to use style sheets
</p>
<p class="three">
Now is the time for all good programmers to learn to use style sheets
</p>
</body>
</html>
Output:
CONFLICT RESOLUTION

When there are two different values for the same property on the same element then there
is conflict that the browser must resolve. There are different situation where the conflict
can occur:
1. When style sheets at two or more level specify different values for the same property on
the same element, this kind of conflict is resolved by the precedence of the different levels
of style sheets. Inline style sheets have precedence over embedded style sheets which have
more precedence than external style sheets.
2. Sometimes, a conflict can occur within the single style sheet itself.

For example,
h3
{
color: blue;
};
body h3
{
color: green;
};

Here it is observed that the same style rule is applied to the h3 element, but the last one has
precedence over the preceding one.
3. Inheritance is another source for conflicts. These can occur if a property on a particular
element has a property value and also inherits a value for the same property from its parent
element. Then child element style rule has precedence over the parent element style rule.

For example,
<html>
<head>
<style>
i
{
color: green;
}
h1
{
color: red
}
</style>
</head>
<body>
<h1>This is <i>inheritance</i> style</h1>
</body>
</html>

It is observed that the color property for <h1> element is set to red, which is also inherited
to <i> element but it is given less precedence over the color property of <i> element,
which is set to green.
4. Conflicts may come from a style sheet written by the author of the document itself, but
from the browser user, and the browser too.
5. Property value specifications can be marked as being important, by including! important
in the specification.
For example,
p. special {font – style: italic! important; font-size:14;}
In this specification, font-style: italic is important, but the font-size: 14 is normal. Whether
a specification has been marked as being important is called weight of the specification.
This weight can be normal or important. This is also one of the ways to resolve the
conflicts.
Here the conflict resolution is a multi stage process:
First, it is to gather all style specifications from the three possible levels of style sheets.
These specifications are sorted into order of precedence of style sheet levels.
Next, all of available specifications are sorted by origin and weight according to the
following rules (rules are given in precedence order):
a. Important declarations with user origin
b. Important declarations with author origin
c. Normal declarations with author origin
d. Normal declarations with user origin
e. Any declarations with browser origin

6. If there are conflicts after sorting described above, the next step to resolve the conflicts
is done through specificity rule of selectors. This sort is based on the following rules of
precedence:

a. Id selectors
b. Class and pseudo-class selectors
c. Contextual selectors
d. Universal selectors
7. If there are still conflicts, they are resolved by given precedence to the most recently
seen specification. This whole sorting process that is used to resolve style specification
conflicts is called cascade.

You might also like