Web Unit - 2

UNIT - 2
WEB DESIGN
Part -A
HTML AND XHTML
Origins and evolution of HTML
⚫ To make a long story short, HTML was invented in 1990 by a scientist
called “Tim Berners Lee”.
⚫ The purpose was to make it easier for scientists at different universities to
gain access to each other's research documents.
⚫ The project became a bigger success than Tim Berners-Lee had ever
imagined. By inventing HTML he laid the foundation for the web as we
know it today.
⚫ HTML is a language, which makes it possible to present information (e.g.
scientific research) on the Internet.
⚫ What you see when you view a page on the Internet is your browser's
interpretation of HTML
What can I use HTML for?
⚫ HTML is used to create Static Web pages. If you want to make
websites, there is no way around HTML.
⚫ Even if you're using a program to create websites, such as
Dreamweaver, a basic knowledge of HTML can make life a lot
simpler and your website a lot better.
⚫ The good news is that HTML is easy to learn and use. In just
two lessons from now you will have learned how to make your
first website.
⚫ HTML is used to make websites. It is as simple as that!
Origins and evolution of XHTML
⚫ XHTML stands for EXtensible HyperText Markup Language. It is the next
step in the evolution of the internet. The XHTML 1.0 is the first document
type in the XHTML family.
⚫ XHTML is almost identical to HTML 4.01 with only few differences. This
is a cleaner and stricter version of HTML 4.01. If you already know HTML,
then you need to give little attention to learn this latest version of HTML.
⚫ XHTML was developed by World Wide Web Consortium (W3C) to help
web developers make the transition from HTML to XML. By migrating to
XHTML today, web developers can enter the XML world with all of its
benefits, while still remaining confident in the backward and future
compatibility of the content.
⚫ XHTML syntax is very similar to HTML syntax and almost all the valid
HTML elements are valid in XHTML as well. But when you write an
XHTML document, you need to pay a bit extra attention to make your HTML
document compliant to XHTML.
⚫ Here are the important points to remember while writing a new XHTML
document or converting existing HTML document into XHTML document −
⚫ Write a DOCTYPE declaration at the start of the XHTML document.
⚫ Write all XHTML tags and attributes in lower case only.
⚫ Close all XHTML tags properly.
⚫ Nest all the tags properly.
⚫ Quote all the attribute values.
⚫ Forbid Attribute minimization.
⚫ Replace the name attribute with the id attribute.
What is XML?
⚫ XML stands for EXtensible Markup Language. XML is a markup language much
like HTML and it was designed to describe data. XML tags are not predefined.
You must define your own tags according to your needs.
⚫ XML stands for eXtensible Markup Language
⚫ XML is a markup language much like HTML
⚫ XML was designed to store and transport data
⚫ XML was designed to be self-descriptive
⚫ Example of XML:
<note>
<to>John</to>
<from>Jenny</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
XHTML Document structure
⚫ The XHTML documents contains three parts, which are discussed below:
⚫ DOCTYPE: It is used to declare a DTD
⚫ head: The head section is used to declare the title and other attributes.
⚫ body: The body tag contains the content of web pages. It consists many tags.
Creating a XHTML web page, it is necessary to include DTD (Document Type

Definition) declaration. There are three types of DTD which are discussed below:
⚫ Transitional DTD
⚫ Strict DTD
⚫ Frameset DTD
1. Transitional DTD: It is supported by the older browsers which does not
have inbuilt cascading style sheets supports.
Syntax :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. Strict DTD:
This is used when the user wants a clean markup, free of presentational
clutter. Use this in conjunction with Cascading Style Sheets.
Syntax :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org /TR/xhtml1/DTD/xhtml1-strict.dtd">
3. Frameset DTD:
Use this when you want to use XHTML Frames to
partition the browser window into two or more frames.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Frameset//EN" "http://www.w3.org
/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Simple program using xhtml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org /TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
<title> XHTML Example </title>
</head>
<body>
<p>Hello Everyone This is XHTML</p>
</body>
</html>
Explanation of the code
⚫ First line is XML version which is 1.0
⚫ Second line is document type which is strict dtd
⚫ Third line is xmlns – this attribute specifies the xml namespace for a
document
⚫ Language we are using in xml document is English.
⚫ Xhtml document has two parts which are head and body.
⚫ Head contains title of the document
⚫ Body section is main content section of web page and the content will be
seen when the user loads the webpage.
Differnece between HTML and
XHTML :
HTML XHTML
1. HTML stands for Hypertext Markup Language. 1. XHTML stands for Extensible Hypertext
Markup Language.
2. It was developed by Tim Berners-Lee. 2. It was developed by World Wide Web
Consortium
3. It was developed in 1991. 3. It was released in 2000
4. It is extended from SGML. 4. It is extended from XML and HTML.
5. All tags and attributes are not necessarily to be 5. In this, every tag and attribute should be in
in lower or upper case. lower case.
6. Doctype is not necessary to write at the top. 6. Doctype is very necessary to write at the top of
the file.
7. It is not necessary to close the tags in the order 7. It is necessary to close the tags in the order they
they are opened. are opened.
8. While using the attributes it is not necessary to 8. While using the attributes it is mandatory to
mention quotes. For e.g. <color=red>. mention quotes. For e.g. <color=”Red”>.
9. Filename extension used are .html, .htm. 9. Filename extension are .xhtml, .xht, .xml.
HTML
⚫ HTML stands for Hyper Text Markup Language
⚫ HTML is the standard markup language for creating Web
pages
⚫ HTML describes the structure of a Web page
⚫ HTML consists of a series of elements
⚫ HTML elements tell the browser how to display the
content
⚫ HTML elements label pieces of content such as "this is a
heading", "this is a paragraph", "this is a link", etc.
Sample program
<!Doctype html>
<html>
<head>
<title> My First Website </title>
</head>
<body>
<h1> Welcome to my website </h1>
<p>Hello Everyone good morning </p>
</body>
</html>
A Simple example of html
document
⚫ <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>

<p>My first paragraph.</p>
</body>
</html>
Example Explained
⚫ The <!doctype Html > declaration defines that this
document is an html5 document.
⚫ The <html> element is root of html document.
⚫ The <head> element contains meta information about the
html page.
⚫ The <title> element defines the title for html page.
⚫ The <body> element defines the documents body, and is a
container for headings, paragraph, images, hyperlinks,
tables ,lists etc.
⚫ <h1> tag defines the large heading. We have six sizes of
heading ,<h1><h2><h3><h4><h5><h6>.
⚫ The <p> element defines the paragraph.
Basic tags in html
⚫ HTML has certain basic tags
1. <br>- Line break
2. <b> - Bold text
3. <strong> - Important text
4. <i> - Italic text
5. <em> - Emphasized text
6. <mark> - Marked text
7. <small> - Smaller text
8. <del> - Deleted text
9. <ins> - Inserted text
10. <sub> -Subscript text
11. <sup> -Superscript text
Program on basic text formatting in
html
<!doctype html>
<html>
<head>
<title> Basic tags of HTML</title>
</head>
<body>
<b>This text is bold</b><br>
<strong>This text is important!</strong><br>
<i>This text is italic</i><br>
<em>This text is emphasized</em>
<small>This is some smaller text.</small>
<p>Do not forget to buy <mark>milk</mark> today.</p>
<p>My favorite color is <del>blue</del> red.</p>
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
<p>This is <sub>subscripted</sub> text.</p>
<p>This is <sup>superscripted</sup> text.</p>
HTML Headings
⚫ HTML headings are defined with the <h1> to <h6> tags.
⚫ <h1> defines the most important heading. <h6> defines
the least important heading
⚫ Example:
⚫ <h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h4>This is heading 1</ h4 >
HTML Lists
⚫ You can add set of related items in web page using list.
⚫ List is of two types
1. Unordered list
2. Ordered list
Unordered list :An unordered list starts with <ul>.Each list
item starts with <li>.
Example :
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
⚫ Ordered List : An ordered list starts with <ol>. Each list
item starts with <li>.
⚫ Example :
⚫ <ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
HTML Tables
⚫ Table let you to arrange the data in row and column
⚫ The <table> defines html table.
⚫ Each table header is defined with tag <th>.
⚫ Each row is defined with tag <tr>.
⚫ Each data/cell is defined with <td>.
Example
<!DOCTYPE html>
<html>
<body>
<h2>Basic HTML Table</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>Smith</td>
<td>60</td>
</tr>
<tr>
<td>Eve</td>
Adding border to the table
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Table With Border</h2>
<p>Use the CSS border property to add a border to the table.</p>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
Collapsing Border of table
⚫ To let the borders collapse into one border, add the
border-collapse property.
⚫ Table,th,td{
⚫ Border:1px solid red;
⚫ Border-collapse:collapse;
⚫ }
Cell padding
⚫ Cell padding specifies the space between the cell content
and its borders.
⚫ Example :
Th,td{
Padding:15px;
}
Text alignment in table
⚫ In html table by default table header is bold and it is
centered. We can align text right or left using
text-align property.
⚫ Example :
⚫ th {
text-align: left;
}
Cell spacing in table
⚫ Border spacing specifies the space between the cells.
⚫ To set the border spacing for a table, use the CSS

border-spacing property.
⚫ Example
table {
border-spacing: 5px;
}
HTML Images
⚫ The HTML <img> tag is used to embed an image in a web page.
⚫ Images are not technically inserted into a web page; images are
linked to web pages. The <img> tag creates a holding space for the
referenced image.
⚫ The <img> tag is empty, it contains attributes only, and does not
have a closing tag.
⚫ The <img> tag has two required attributes:
⚫ src - Specifies the path to the image

⚫ alt - Specifies an alternate text for the image
⚫ Syntax :
<img src="url" alt="alternatetext">
⚫ The src Attribute

The required src attribute specifies the path (URL) to the image.
⚫ The alt Attribute

The required alt attribute provides an alternate text for an image,
if the user for some reason cannot view it (because of slow
connection, an error in the src attribute, or if the user uses a
screen reader).
⚫ The value of the alt attribute should describe the image

Width and height of image
⚫ You can use the style attribute to specify the width and
height of an image
Example
<img src="img.jpg" alt=“Flower
image" width="500px" height="600px">
⚫ You can even set width and height using <style>
⚫ <!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>
<img src=“flower.gif" alt=“Red Flower" >
</body>
</html>
Floating images
Use the float property to let the image float to the right or to the left of a text
<!DOCTYPE html>
<html>
<head>
<style>
img {
float:left;
width:42px;
height:42px;
}
</style>
</head>
<body>
<h2>Floating Images</h2>
<p><strong>Float the image to the right:</strong></p>
<p>
<img src="smiley.gif" alt="Smiley face" ">
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.
</p>
</body>
</html>
Adding background image
⚫ You can add any image as background image in website
using background-image property.
⚫ Example:
<style>
body {
background-image: url('img_girl.jpg');
}
</style>
No repeating background
⚫ If you don’t want to repeat the background image you can
use background-repeat property.
⚫ Example:
<style>
body {
background-image: url(‘image name.jpg');
background-repeat: no-repeat;
}
</style>
Full screen background image
⚫ If you want your background image should be fixed to
window then use property.
⚫ Example:background-size
<style>
body {
background-image:url('back.jpeg');
background-size: 100% ;
}
</style>
HTML Links
⚫ HTML links are hyperlinks.
⚫ You can click on a link and jump to another document

⚫ The HTML <a> tag defines a hyperlink. It has the following syntax
⚫ <a href="url">link text</a>
⚫ The most important attribute of the <a> element is the href attribute,
which indicates the link's destination.
⚫ The link text is the part that will be visible to the reader.
⚫ Clicking on the link text, will send the reader to the specified URL
address.
Example program on link
<html>
<head><title>Link</title></head>
<body>
<a href="https://klebcakhanapur.com/">Click here to view
KLE COLLEGE OF BCA WEBSITE</a>
</body>
</html>
Creating image as link
⚫ You can set any image as link in your website.
⚫ By clicking on particular image you can view desired web
page or any other document.
⚫ Syntax:
⚫ <a href=“https://www.klebcakhanapur.com">
<img src=“rose.jpg" alt=“Rose in red color" >
</a>
Program on image as link
<html>
<head><title>Image as link</title></head>
<body>
<a href="https://www.klebcakhanapur.com">
<p>Click on flower to visit the website</p>
<img src="rose.jpg" alt="Rose"
style="width:42px;height:42px;">
</a>
</body>
</html>
Display image in center of page
⚫ To disaply image in center use following styles.
img{
margin-left:auto;
margin-right:auto;
display:block;
}
Display property is used to display image on web page.

When you make it block it will display in the middle of
page.
<html>
<title> Hyperlink </title>
<style>
img{
margin-left:auto;
margin-right:auto;
display:block;
}
</style>
</head>
<body>
<h2> Welcome to My Website </h2>
<img src="C:\Users\ADMIN\Desktop\rose.jpg" >
</body>
<html>
Forms
⚫ A web form on a web page allows a user to enter data that
is sent to a server for processing.
⚫ Forms is a document which stores information of a user on
web server using interactive controls.
⚫ An HTML form contains different kind of information
such as username, password, contact number, email id etc.
⚫ The elements used in as HTML form are checked box,
input box, radio buttons , submit button etc.
The <form> Element
⚫ <form> element is used to create an html form for user
input.
⚫ EX:
⚫ <form>
Form elements
</form>
The form element is a container for different types of input
elements, such as textbox, checkbox, radio buttons and
submit button etc.
Label tag
⚫ <label> tag is used to provide information about a
particular element.
⚫ Example:
⚫ <form>
<label>First name:</label><br>
<label>Last name:</label><br>
</form>
The <input> Element
⚫ An <input> element can be displayed in many ways , depending on type of
attribute. It defines how user has to enter data in form.
Type Description
<input type="text"> Displays a single-line text input
field
<input type="radio"> Displays a radio button (for
selecting one of many choices)
<input type="checkbox"> Displays a checkbox (for selecting

zero or more of many choices)
<input type="submit"> Displays a submit button (for

submitting the form)
<input type="button"> Displays a clickable button
⚫ 1. <input type=“text”>
This tag specifies an input field where the user can enter the
data in text format.
Syntax:
<form>
<input type=“text” value=“”>
</form>
2. <input type=“password”>
This tag specifies an input field where the user can enter the
data in password format.
Syntax:
<form>
<input type=“password” value=“”>
</form>
3. <input type=“radio”>
This tag specifies an input field where the user can choose one
option among specified options.
<form>
<h3>Choose Gender </h3>
<input type="radio" name="Gender"
value="female">Female<br>
<input type="radio" name="Gender" value="Male">Male<br>
<input type="radio" name="Gender" value="Other">Other<br>
</form>
4. <input type=“checkbox”>
This tag specifies an input field where the user can choose one
option among specified options.
<form>
<h3>Select Favorite game</h3>
<input type=“checkbox" name=“Football"
value="football">Football<br>
<input type=“checkbox" name=“Cricket"
value=“Cricket">Cricket<br>
<input type=“checkbox" name=“Chess"
value=“chess">Chess<br>
</form>
5. <input type=“color”>
This tag specifies an input field where the user can choose color
from specified options.
<form>
<h3>Select Color</h3>
<input type=“color" >
</form>
Select tag
⚫ The <select> tag is used to create a drop-down list.
⚫ The name attribute is needed to reference the form data
after the form is submitted (if you omit the name attribute,
no data from the drop-down list will be submitted).
⚫ The id attribute is needed to associate the drop-down list
with a label.
⚫ The <option> tags inside the <select> element define the
available options in the drop-down list.
⚫ Example:
<form>
<label>Select car</label>
<select name="cars">
<option value="volvo">Volve</option>
<option value=“Audi">Audi</option>
<option value=“Mercedes">Mercedes</option><br>
</select>
Textarea tag
⚫ The <textarea> tag defines multi-line text input control.
⚫ The <textarea> element is often used in a form, to collect user
inputs like comments or reviews.
⚫ The size of a text area is specified by the <cols> and <rows>
attributes .
⚫ The name attribute is needed to reference the form data after
the form is submitted(if you omit the name attribute, no data
from the text area will be submitted).
⚫ The id attribute is needed to associate the text area with a label.
⚫ Example
<html>
<form>
<label>Enter your Address</label><br>
<textarea name="message" rows="10" cols="30">
</textarea>
</html>
Action buttons
⚫ The <button> element defines a clickable button
1. Submit button
2. Reset button
1. Submit button :This button is used to submit data which
user has filled in form (submits form-data)
Syntax :
<input type=“submit” value=“submit”>
Reset button
2. Reset button : The button is a reset button (resets the
form-data to its initial values). If user wants to reset his data
while filling the form he can use Reset button.
Syntax:
<input type=“reset” value=“reset”>
⚫ <form action="/action_page.php" method="get">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br
>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<button type="submit" value="Submit">Submit</button
>
<button type="reset" value="Reset">Reset</button>
</form>
UNIT – 2(Part-B)
CSS(Cascading Style Sheets)
Introduction
⚫ Cascading Style Sheets, fondly referred to as CSS, is a simply
designed language intended to simplify the process of making
web pages presentable.
⚫ CSS allows you to apply styles to web pages. More importantly,
CSS enables you to do this independent of the HTML that makes
up each web page.
⚫ CSS is easy to learn and understood but it provides powerful
control over the presentation of an HTML document.
⚫ A CSS (cascading style sheet) file allows you to separate your web sites
(X)HTML content from it’s style (presentation).
Cascading Style Sheets (CSS) :
⚫ Used to describe the presentation of documents
⚫ Define sizes, spacing, fonts, colors, layout, etc.
⚫ Improve content accessibility
⚫ Improve flexibility
⚫ Designed to separate presentation from content
⚫ Due to CSS, all HTML presentation tags and attributes can be formatted., e.g.
font, color, etc.
Definition
⚫ CSS is a language that applies styles to a HTML
document and its elements to change the look and feel
and is usually stored in separate .css style sheets which
can be reused for all the web pages.
⚫ HTML + CSS = WEB PAGE (Content) (presentation)
A CSS comprises of style rules that are interpreted by the browser and
then applied to the corresponding elements in your document. A style
rule is made of three parts −
⚫ Selector − A selector is an HTML tag at which a style will be
applied. This could be any tag like <h1> or <table> etc.
⚫ Property - A property is a type of attribute of HTML tag. Put
simply, all the HTML attributes are converted into CSS properties.
They could be color, border etc.
⚫ Value - Values are assigned to properties. For example, color
property can have value either red or #F1F1F1 etc
CSS Syntax
⚫ A CSS rule has two main parts: a selector, and one or more declarations.
⚫ The selector is normally the HTML element you want to style.
⚫ Each declaration consists of a property and a value.
⚫ The property is the style attribute you want to change.
⚫ Each property has a value.
⚫ In the above example, h1 is the selector, color is the property and blue is the
value
CSS Example
⚫ CSS declarations always ends with a semicolon, and declaration groups are
surrounded by curly brackets:
⚫ Example:
p {color:red; text-align:center;}
To make the CSS more readable, you can put one declaration on each line, like
this:
Example:
p{
color:red;
text-align:center;
}
Comments
⚫ You can insert comments in CSS to explain your code.
⚫ Like HTML comments, CSS comments will be ignored by the browser.
⚫ A CSS comment begins with "/*", and ends with "*/“.
⚫ Comments can appear before or within rule sets as well as across multiple
lines. They can also be used to comment out entire rules or individual
declarations.
⚫ For example:
/* Giving style to paragraph*/
p{
margin: 1em; /* size is 1em*/
padding: 2em;
/*color: white;*/
background-color: blue; }
LEVELS OF STYLE SHEETS
⚫ There are three levels of style sheets, in order from lowest level to highest level, are
inline, document level, and external
⚫ Inline style sheets are specified for a specific occurrence of a tag and apply only to the
content of that tag. This application of style, which defeats the purpose of style sheets –
that of imposing uniform style on the tags of at least one whole document
⚫ Document-level style(Internal css) specifications appear in the document head section

and apply to the whole body of the document.
⚫ External style sheets are not part of the documents to which they apply. They are stored
separately and are referenced in all documents that use them. They are written as text
files with MIME type text/css.
INLINE STYLES
⚫ An inline style loses many of the advantages of style sheets by mixing content
with presentation. Use this method sparingly!
⚫ To use inline styles you use the style attribute in the relevant tag. The style
attribute can contain any CSS property.
⚫ When CSS style is applied this way, it gets the highest priority over other style
definitions i.e., it will overwrite existing styles.
⚫ Inline style apply only to the particular element in which they appear.
⚫ This method is inefficient as they combine the code and presentation which
becomes difficult to maintain.
⚫ Examples of inline style
⚫ 1. The following example applies red color to h1 tag with a border
<h1 style=“color:red;border:5px”>
⚫ 2. The example shows how to change the color and the left margin
of a paragraph:
<p style="color:red; margin-left:20px">First paragraph</p>
<p style=“color:blue; margin-left:40px”>Second
paragraph</p>
⚫ The two tags will be displayed in different styles. The first text
First paragraph is displayed in red color at a left margin of 20px
and the second text Second paragraph is displayed in blue color at
a left margin of 40px.
Example pgm on inline css :

Transitional//EN" "http://www.w3.org/TR/xhtml1/
DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Inline Styles</title>
</head>
<body>
<p>First paragraph. Here is some text</p>
<p style="font-size: 20pt">Second paragraph. Here is some more text</p>

<p style="font-size: 40pt;color:red" >Third paragraph .Even more
text</p>
</body>
</html
OUTPUT :
Internal or Document style
⚫ An internal style sheet should be used when a single document has a unique
style.
⚫ When applying internal CSS we put all CSS ruls in the <head> and part of
XHTML document and enclose it with </head>
<style type=“text/css”>….</style> tag.
⚫ The type text/css indicates the MIME type for CSS.
⚫ The difference is that with an internal rule, we don’t have to create a rule with
each tag of an XHTML element.
⚫ A h1 heading given the color red in an internal style rule will be applied to h1
heading in red every time it is used on the page without having to code the
rule into each heading tag
Style Tag
⚫ This tag is placed in the head tag.
⚫ Rules defined using this style will be applied to all the elements
available in the document.
⚫ Syntax:
<head>
<style type=“text/css” media=“….”>
…..Style rules…..
</style>
</head>
Attributes associated with <style> element are:
⚫ 1. type: Takes the value text/css (mandatory attribute)
⚫ 2. media: It specifies the device the document will be displayed on.
Default value is all. It is an optional attribute. Other values this attribute
can take are screen, tty, tv, projection, handheld, print and all
Example of internal style
<head>
<style type="text/css">
body{
background-image:url('back.jpg');
background-repeat:no-repeat;
background-size: 100%;
}
h1{
color:red;
}
p {color: green}
</style>
</head>
<body>
<h1> Internal CSS</h1>

<p> The text in this paragraph will be green. </p>
<p> This paragraph too. </p>
OUTPUT :
External Style Sheet
⚫ The true power of CSS is separating presentation from content. External style
sheets are the tools for doing the same.
⚫ An external style sheet is used when the same style has to be applied to many
pages.
⚫ CSS can be defined for entire web site by simply writing the CSS definitions
in a plain text file with an extension .css. This file is referred to from each of
the pages in the site.
⚫ The CSS file is loaded on the first page that a visitor visits at the website.
When the user moves to other pages, the CSS file will be cached and thus
doesn’t have to be transferred via the internet for subsequent pages.
<link> tag
⚫ To link an XHTML document with a CSS file, the link tag is used as given
below:
<link rel=“stylesheet” type=“text/css” href=“first.css” />
⚫ In the above example,

1. type – It is the MIME content-type and should always be text/css for style
sheets.
2. rel - It describes the relationship between the actual document and the one we
are linking to.
3. href - It is the link to actual CSS file.
⚫ The <link> tag must be included in the header section.
Examples of External style
XHTML page .css file (ex1.css)
<!DOCTYPE html PUBLIC "-//W3C//DTD body {
XHTML 1.0 background-color:yellow;
Transitional//EN" "http://www.w3.org/TR/xhtml1/ }
DTD/xhtml1-transitional.dtd"> h1 {
<html xmlns="http://www.w3.org/1999/xhtml"> font-size:36pt;
}
<head>
<link rel="stylesheet" type="text/css" h2 {
href="ex1.css" /> color:blue;
</head> }
<body>
<h1>This header is 36 pt</h1> p{
<h2>This header is blue</h2> margin-left:50px;
<p>This paragraph has a left margin of 50 Color:red;
pixels</p> }
</body>
</html>
OUTPUT:
Importing css files
⚫ You can import a css style sheet in to another style sheet using
@import rule.
⚫ @import rule must be at the top of the document.
⚫ Syntax ;
⚫ @import url(“ex2.css”);
XHTML page .css file (ex1.css) .css file(ex2.css)
<!DOCTYPE html PUBLIC "-//W3C//DTD @import url(“ex2.css”); h1{
XHTML 1.0 body { Text-align:center;
Transitional//EN" background-color:yellow; }
"http://www.w3.org/TR/xhtml1/ }
DTD/xhtml1-transitional.dtd"> h1 { P{
<html font-size:36pt; Color:pink;
xmlns="http://www.w3.org/1999/xhtml"> } }
<head> h2 {
<link rel="stylesheet" type="text/css" color:blue;
href="ex1.css" /> }
</head>
<body> p{
<h1>This header is 36 pt</h1> margin-left:50px;
<h2>This header is blue</h2> }
<p>This paragraph has a left margin of 50
pixels</p>
</body>
</html>
Selector in css
⚫ In CSS, a selector is the target element or elements to
which each CSS rule is applied.
⚫ The selector tells the browser where and what to
format.
⚫ There are many types of selectors you can use in css.
Or you can use xhtml element as a selector itself.
TYPES OF SELECTOR (Selector
Forms)
1. Type Selectors
2. Class Selectors
3. ID Selectors
4. Descendant Selectors
5. Child Selectors
6. Universal Selectors
7. Adjacent Selectors
8. Attribute Selectors
9. Pseudo- Classes
10. Pseudo-elements
Type selectors
⚫ The most common and easy to understand selectors
are type selectors.
⚫ Type selectors will select any HTML element on a
page that matches the selector, regardless of their
position in the document tree.
For example:em {color: blue; }
⚫ This rule will select any element on the page and
color it blue. As you can see from the document tree
diagram below, all em elements will be colored blue,
regardless of their position in the document tree.
⚫ There are a huge range of elements that you can
select using type selectors, which means you can
change the appearance of any or every element on
your page using selectors.
Class Selector
⚫ While type selectors target every instance of an element, class
selectors can be used to select any HTML element that has a
class attribute, regardless of their position in the document tree.
⚫ note that a class selector begins with a (.) period.
.class name
{ color: red;
font-weight: bold;
}
<head>
<style>
.big{
color:red;
}
</style>
<body>
<p class="big">This is some
<em>text</em></p>
<p>This is some text</p>
<ul>
<li class="big">List item</li>
<li>List item</li>
<li>List <em>item</em></li>
</ul>
⚫ For example, if you want to target the first paragraph and
first list items on a page to make them stand out, you
could mark up the page in the following way:
<body>
<p class="big">This is some
<em>text</em></p>
<ul>
<li class="big">List item</li>
<li>List item</li>
</ul>
</body>
ID selectors
⚫ ID selectors are similar to class selectors. They can be used to
select any HTML element that has an ID attribute, regardless of
their position in the document tree.
⚫ generally use IDs to style the layout elements of a page that will
only be needed once, whereas I use classes to style text and such
that may be declared multiple times.
⚫ The id of an element should be unique within a page, so the id
selector is used to select one unique element!. Use # when using
id.
⚫ Syntax :
#id name{
color:red;
}
<head>
<style>
#big{
color:red;
}
</style>
<body>
<p id="big">This is some
<em>text</em></p>
<ul>
<li id="big">List item</li>
<li>List item</li>
</ul>
Descendant Selectors
⚫ The descendant selector matches all elements that are descendants of a specified
element. The first simple selector within this selector represents the ancestor
element—a structurally superior element, such as a parent element, or the parent of
a parent element, and so on. The second simple selector represents the descendant
element we’re trying to match.
<head>
<style>
ul li {
color:red;
}
</style>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<ol>
<li>Sub-item 2A</li>
<li>Sub-item 2B</li>
</ol>
</li>
Child Selectors
⚫ The child selector selects all elements that are the children
of a specified element.
⚫ Example:
ol > li{ color:red;}
<ol>
<li>Mango<li>
<li>Apple</li>
<li>Orange</li>
</ol>
<head>
<style>
ul > li {
color:red;
}
</style>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Iem 2</li>
<ol>
</ol>
</li>
Universal Selectors
⚫ CSS universal selectors select any type of elements in an
HTML page.
⚫ It matches a single element. An asterisk ( i.e. "*" ) is used to
denote a CSS universal selector.
⚫ An asterisk can also be followed by a selector. This is useful
when you want to set a style for of all the elements of an HTML
page or for all of the elements within an element of an HTML
page.
⚫ Syntax:
* { CSS-Property: value; ........................ }
<head>
<style>
*{
color:blue;
}
</style>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Iem 2</li>
<ol>
</ol>
</li>
Adjacent Selectors
⚫ The adjacent sibling selector is used to select an element that is directly after
another specific element.
⚫ Sibling elements must have the same parent element, and "adjacent" means
"immediately following".
<head>
<style>
li + li {
color:blue;
}
</style>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol>
<li>Item3</li>
<li>Item4</li>
Attribute Selector
⚫ The [attribute~="value"] selector is used to select elements with an attribute value
containing a specified word.
⚫ The following example selects all elements with a title attribute that contains a
space-separated list of words, one of which is "flower":
⚫ [title~="flower"] {
border: 5px solid yellow;
}
<head>
<style>
[title~=flower] {
border: 5px solid yellow;
}
</style>
</head>
<body>
<h2>attribute Selector</h2>
<p>All images with the title attribute containing the word "flower" get a yellow border.</p>
<img src="C:\Users\ADMIN\Desktop\pink.jpg" title="pink flower" width="150" height="113">

<img src="C:\Users\ADMIN\Desktop\red.jpg" title="flower" width="224" height="162">
<img src="C:\Users\ADMIN\Desktop\blue.jpg" title="blue rose" width="200" height="358">
</body>
</html>
CSS Units of Measurement
(Property Value Forms)
1. Number Values
2. Percentage Values
3. Length Values
4. Color Values using Color Keywords
5. Color Values using RGB Values
6. URLs
CSS Units of Measurement
⚫ CSS includes many properties in seven categories: fonts, lists, text, margins, colors,
backgrounds and borders.
⚫ Every property has a value and value can include measurements like %, cm, mm, px
etc.
⚫ CSS supports a number of measurements including absolute units such as inches,
centimeters, points and so on, and relative units such as percentage and em units.
Number Values
⚫ There are two types of numbers in CSS – integers and real numbers.
⚫ They can be used as a value for a property.
⚫ Numbers can be positive or negative.
⚫ Certain properties restrict the range of numbers they will accept
Percentage Values
⚫ They are always relative to another value, like the element’s font size or the size of
the parent element.
⚫ 100% takes the current value unchanged, 200% doubles it, 50% reduces it by half
and so on.
⚫ Percentages are set by appending a % sign at the end of a number
Example: p { font-size=200%;}
Length Values
⚫ CSS supports many different ways of measuring length of an element.
⚫ Some are absolute length units such as inches, points etc., and others are relative
length units.
⚫ Absolute length units are fixed in relation to each other. They are highly dependent
on the output medium, so are mainly useful when the output environment is known.
Different length units
available in CSS
Color Values using Color
Keywords
⚫ Colors can be specified using names such as black, white, red, blue
etc.
Example:
⚫ body {color:black; background-color:cyan;}
⚫ p {color:DarkGreen;}
Color Values using RGB
Values
Example color values
FONT PROPERTIES
1. Font Families
2. Font Size
3. Font Variant
4. Font Style
5. Font Weights
6. Font Shorthands
Font Properties
⚫ CSS font properties define the font family, boldness, size, and the style of a
text.
⚫ In CSS fonts are specified using font related properties.
⚫ Using font properties, we can change the text size, color, style and more
Font Families
⚫ CSS fonts are specified using a comma separated font family list. If the first
named font is not installed, the font style rule checks the next in line.
⚫ To change fonts we can use the font-family property with font names such as
comma-separated values. If a font name contains space in it, it must be enclosed
in a pair of double quotes.
⚫ Font families can be divided into two groups: serif and sans-serif - A sans-serif
font does not include the small lines at the end of characters, while a serif font
does include these small lines.
⚫ There are two types of font family names:
1. family-name - The name of a font-family, like "times", "courier", "arial", etc.
2. generic-family - The name of a generic-family, like "serif", "sans-serif", "cursive",
"fantasy", "monospace".
⚫ Start with the font you want, and always end with a generic family, to let the
browser pick a similar font in the generic family, if no other fonts are available
Generic Family
Fonts
Font Sizes
⚫ The font-size property sets the size of the text.
⚫ Being able to manage the text size is important in web design. However, you should
not use font size adjustments to make paragraphs look like headings, or headings
look like paragraphs.
⚫ Always use the proper XHTML tags, like - for headings and for paragraphs.
⚫ The font-size value can be an absolute, or relative size. 1. Absolute size: Sets the
text to a specified size and does not allow a user to change the text size in all
browsers. It is useful when the physical size of the output is known. 2. Relative size:
Sets the size relative to surrounding elements and allows a user to change the text
size in browsers.
⚫ If you do not specify a font size, the default size for normal text, like paragraphs, is
16px (16px=1em)
Examples of font size
Font Variant
⚫ Specifies whether or not a text should be
displayed in a small-caps font.
⚫ Small caps indicates that all letters will be
displayed in capitals but the font size is
smaller than usual.
⚫ The possible values are small-caps and
normal.
Font Styles
⚫ CSS Font-Style is where you define if your font
will be italic or not. Possible key terms are the
following: italic, oblique, and normal.
⚫ Italic and oblique are both slanted versions of
the font. Italic style is a separate typeface design
with curved letter forms, while oblique text
takes the normal font design and just slants it.
⚫ But, they look similar in most of the browser
Font Weights
⚫ If you want to control the weight of your
font (its thickness), using font weight is the
best way to go about it. We suggest that you
only use font-weight in multiples of 100 (e.g.
200, 300, etc) because any less and you
probably will not see any difference. The
values range from 100 (thin)-900 (thick).
Font Shorthand
⚫ Specifying multiple font properties for each text element could get repetitive and lengthy. So, shorthand
font property compiles all the font-related properties into one rule.
⚫ The value of the font shorthand property is a list of values for all the font properties separated by
character spaces.
⚫ While specifying the properties, the order of values is important. The order of values for font is:
⚫ font-style / font-variant / font-weight / font-size / font-family
List Properties
1. List style type
2. List style Images
3. List style position
1. List style type
In HTML, there are two types of lists:
1. unordered lists - the list items are marked with bullets
2. ordered lists - the list items are marked with numbers or
letters
With CSS, lists can be styled further, and images can be used
as the list item marker.
List Style Type
⚫ We can use the list-style-type property to select the type of
marker that appears before each list item.
⚫ This property can be used with ul, ol and li.
⚫ Example
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
In the above examples, a, b, c and d are class names.
Possible Values for
list-style-type
⚫ none - no list marker
⚫ disc - solid circle
⚫ circle - empty circle.
⚫ square - solid square
⚫ decimal - 1, 2, 3, 4 etc.
⚫ decimal-leading-zero - 01, 02, 03 ... 10, 11 etc.
⚫ lower-roman - i, ii, iii, iv etc.
⚫ upper-roman - I, II, III, IV etc.
⚫ lower-greek - Greek characters.
⚫ lower-latin - a, b, c, d etc.Not supported by IE.
⚫ upper-latin - A, B, C, D etc. Not supported by IE.
List type image
⚫ To design your lists on web pages You can also add
images in list type as well.
⚫ Syntax:
Ul{
List-style-image:url(‘flower.jpg’);
}
List Style Position
⚫ The list-style-position property specifies if
the list-item markers should appear inside or
outside the content flow.
⚫ Specify that the list-item markers should
appear inside the content flow (results in an
extra indentation):
ul{list-style-position:inside;}
Colors in CSS
⚫ The CSS color property is used for setting the color (more
specifically, the foreground color) of elements.
⚫ The color property can be used in conjunction with the
backgound-color property to achieve the desired effect.
⚫ 147 color names are defined in the HTML and CSS color
specification (17 standard colors plus 130 more).
Foreground Color
⚫ To set the foreground color, color property can be used to assign different colors.
⚫ Color property can be used almost with any element.
⚫ Example:
body {color:red;}
h1 {color:#00ff00;}
p {color:rgb(0,0,255);}
Background Color
⚫ The background-color property is used to change the background color of almost
any XHTML element.
⚫ Example to set the background-color of different elements:
body { background-color:yellow; }
h1{ background-color:#00ff00; }
p{background-color:rgb(255,0,255);}
<html>
<head>
<style type="text/css">
h2 { color:olive; }
p.question { color: rgb(30%,25%,60%) }
p.answer { color:#663300; }
</style>
</head>
<body>
<h2>CSS color property example</h2>
<p class="question">Is this OK? Should I put a bit more blue in
there???</p>
<p class="answer">Yeah, just a little bit. Actually, no, leave it - I
like it just the way it is!</p>
</body>
</html>
CSS BOX MODEL
⚫ All HTML elements can be considered as boxes. In CSS, the term "box model" is
used when talking about design and layout.
⚫ The CSS box model is essentially a box that wraps around HTML elements, and it
consists of: margins, borders, padding, and the actual content.
⚫ The box model allows us to place a border around elements and space elements in
relation to other elements.
⚫ Each XHTML element like letters, images, form controls, tables etc., has an
invisible box around it. Though it is invisible by default, we can change that easily.
CSS BOX MODEL
⚫ The box model is the specification that defines how a box and its attributes relate
to each other. In its simplest form, the box model tells browsers that a box defined
as having 100 pixels and height 50 pixels should be drawn 100 pixels wide and 50
pixels tall.
⚫ Using CSS we can change different properties of the box around the element,
including borders, margins, padding.
⚫ We can specify just one measurement and it can be used for all sides or we can
specify different value for each side if we wish Using CSS we can specify the
properties of each side of the box separately (diagram )
⚫ A box is made of four distinct parts:
1) Content Area: The content of the box, where text and images appear. It is the
innermost part of the box. The CSS width and height property defines the width and
height of this element.
Example: p {width:100px; height:50px;}
2) Padding: It defines the space between the content area of the box and the border.
It clears an area around the content. The padding is affected by the background color
of the box.
Example: p {padding:30 px 20px 30 px 20 px;}
3) Border: A border that goes around the padding and content. The border is affected by
the background color of the box. It refers to the space used by the border in the box model
is the thickness of the border. It outlines the visible portion of the element.
Example: p {border: 5px solid red;}
Sets a border of 5px thickness, border style is solid and border color will be red.
4) Margin: It is the space just outside the border. The margin does not have a background
color, it is completely transparent and does not contain any elements behind it.
Example:
p {margin: 30px 0px 30px 20px;}
Sets left margin to 30px, right margin to 0, top and bottom margins to 30px and 20px
respectively.
Width and Height of an
Element
⚫ It is important to note that when you specify the width and height properties of
an element with CSS, you are just setting the width and height of the content
area.
⚫ To know the full size of the element, you must also add the padding, border
and margin.
⚫ The total width of the element in the example below is 300px: width:250px;
padding:10px; border:5px solid gray; margin:10px;
⚫ Let's do the math: 250px (width) + 20px (left and right padding) + 10px (left
and right border) + 20px (left and right margin) = 300px
Sample Program 1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Examples of margins, padding, and borders</TITLE>
<STYLE type="text/css">
UL {background: yellow; margin: 12px 12px 12px 12px; padding:
3px 3px 3px 3px; /* No borders set */ }
LI { color: white; background: blue; margin: 12px 12px 12px 12px;
padding: 12px 0px 12px 12px; list-style: none}
LI.withborder { border-style: dashed; border-width: medium;
border-color: lime; }
</STYLE> </HEAD>
<BODY>
<UL> <LI>First element of list </li>
<LI class="withborder">Second element of list is a bit longer to illustrate wrapping. </LI> </UL>
</BODY>
</HTML>
Sample Program 2
<?xml version="1.0"?>
<!Doctype html public="-w3c//DTD XHTML 1.1 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head> <TITLE>Examples of margins, padding, and borders</TITLE>
#cssbox{
width:350px;
border-color:blue;
border-style:solid;
padding:40px;
border-width:10px;
margin-top:40px;
margin-left:60px;
}
</style> </head>
<body>
<p> This is a paragraph without using CSS Box Model </p>
<p id="cssbox"> This is a paragraph with CSS Box Model </p>
</body> </html>
Background
⚫ CSS background properties are used to define
the background effects of an element.
⚫ CSS properties used for background effects:
1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position
Background-image
⚫ The background-image property is used to add a background image
to an element.
⚫ Its main job is to provide the location of the image file to be set as
background.
⚫ The value of background-image is a sort of url-holder that contains
the URL of the image.
⚫ The URL specifies the name of the image file associated with the
XHTML document and not the style sheet.
⚫ By default, the image is repeated so it covers the entire element.
⚫ Example to set the background image for the whole page: body
{background-image:url('paper.gif');}
⚫ Example to set the background image for a paragraph:
p{background-image:url('paper.gif');}
Background-repeat
⚫ When background-image property is used to set an image as
background, the image repeats in entire page. This is the default
behavior.
⚫ The default behavior can be changed using the background-repeat
property which specifies whether a background image repeats itself.
Possible values for this property are:
⚫ repeat – image repeats both horizontally and vertically
⚫ no-repeat – image is displayed only once and does not repeat
⚫ repeat-x – image repeats only horizontally across x-axis
⚫ repeat-y - image repeats only vertically across y-axis
Background-position
⚫ The position of the image is specified by the background-position
property.
⚫ It can take the values:
⚫ 1) A combination of [top, center, bottom] and [left, right, center]
⚫ 2) Two percentage values – where the first value indicates the
horizontal percentage, the second value indicates the vertical percentage
⚫ 3) Two position values – The first value is the absolute horizontal
position and the second is the vertical position
. body { background-image:url('img_tree.png’);
background-position:right top;
Background Shorthand
⚫ The shorthand property for background is simply "background":
Example :
body { background: #ffffff url('img_tree.png') no-repeat right top;}
The background-attachment property sets whether a background image scrolls with the rest of the page, or is fixed.
Background-attachment property
⚫ The background-attachment property sets whether a
background image scrolls with the rest of the page, or is
fixed.
⚫ Fixed:A background-image that will not scroll with the
page (fixed):
⚫ body {
background-image: url(“back.jpg");
background-attachment: fixed;
}
⚫ <!DOCTYPE html>
⚫ <html>
⚫ <head>
⚫ <style>
⚫ body {
⚫ background-image: url("blue.jpg");
⚫ background-repeat: no-repeat;
⚫
⚫ background-size:50%
⚫ }
⚫ </style>
⚫ </head>
⚫ <body>
⚫ <h1>The background-attachment Property</h1>
⚫ <p>The background-image is fixed. Try to scroll down the page.</p>

⚫ <p>If you do not see any scrollbars, try to resize the browser window.</p>
⚫ </body>
⚫ </html>
Program on background image
<?xml version="1.0"?>
<head>
<TITLE>Examples of margins, padding, and borders</TITLE>
body
{
background-image:url('1.jpg');
background-position:center center;}
}
</style>
<body>
<h1> Hello CSS </h1>
</body>
</html>
SPAN AND DIV TAGS
⚫ Most Web page designers use a table-based layout to achieve a coherent and consistent look.
There's a different way to achieve the same look. Using SPAN and DIV tags reduces markup
code, speeds up page downloads, separates content from its visual presentation, and brings your
code closer to Web standards compliance--all while making your website more appealing to
search engines.
⚫ HTML contains 2 tags generally used as "containers".
⚫ <div> is the first of the two and its use is as a block-level container.
⚫ The second,<span> is an inline container. Think of a container as an individual part or section of
a web page, with content within it of some sort. The container can be styled wholly with CSS,
thus separating style from content and being standards compliant at the same time.
<DIV> Tag
⚫ DIV (division) divides the content into individual sections. Each section can then have its own formatting, as
specified by CSS.
⚫ <DIV> is a block-level container which means that there is a line feed after the </Div> tag.
⚫ The XHTML div tag is used for defining a section of the web page. With the <DIV> tag, we can group large
sections of XHTML elements together and format them with CSS.
⚫ For example, we can have the menu in one section, main content in another and so on.
⚫ For example, if we have the following CSS declaration:
.large {
color: #00FF00; font-family:arial; font-size: 4pt;
}
The HTML code
<div class="large">
This is a DIV sample.
</div>
SPAN tag
⚫ Span is similar to div in that they both divide the content
into individual sections.
⚫ The difference is that span goes into a finer level, so we
can span to format a single character if needed. There is
no line feed after the </span> tag.
⚫ For example, if we have the following CSS declaration:
⚫ .largefont {
color: #0066FF; font-family:arial; font-size: 6px; }
⚫ The HTML code
Span is not at the <span class="largefont">block
level</span>.
⚫ gets displayed as
Program on DIV Tag
<head>
<TITLE>DIV Example</TITLE>
div.heading{background-color:white; text-align:center;}
div.content{ background-color:blue; text-align:justify; border:5px dashed silver;
color:white;}
</style>
</head>
<body>
<div class="heading"> DIV IS BLOCK-LEVEL TAG</DIV><br/> <br/>
<div class="content">DIV (division)divides <br/>
the content into individual sections.<br /> Each section can then have its own formatting, as
specified by CSS.</div>
</body>
</html>
CONFLICT RESOLUTION
⚫ CSS offers numerous means of applying
styles in a hierarchical fashion and resolving
potential conflicts within style sheets.
THE CASCADE:
⚫ The cascade in style sheets is a hierarchy of application. It appears in several places—you
already saw how a certain type of style sheet will override another.
⚫ So, if you have an inline style for a paragraph, an embedded style for a paragraph, and a
linked style for a paragraph, the inline styles take precedence over the embedded styles,
which take precedence over the linked styles.
⚫ Additional style information that doesn't conflict from one style sheet type to another is
also applied to the selector in question.
⚫ Another area where the cascade appears is in the ordering of multiple style sheets within
a document. Let's say you have three style sheets linked to your document:
<link rel="stylesheet" type="text/css" href=“first.css" />
<link rel="stylesheet" type="text/css" href=“second.css" />
<link rel="stylesheet" type="text/css" href=“third.css" />
⚫ The rules of the cascade say that whichever is last in the list is the style that takes
precedence. So, styles in third.css will take precedence over other.
INHERITANCE
⚫ Some properties are passed from parent to a child.
⚫ For example, the following rule in a style sheet would be inherited by all child
elements of the body and makes every font on the page display as Arial.
body {font-family:Arial;}
SOURCE ORDER
⚫ It means the order in which rules appear in the style sheet. A rule that appears
later in the source order will generally overrule an earlier rule.
body{font-family:Arial;}
h1, h2, h3, h4 {font-family:”Times new roman”;}
⚫ As h1, h2 and h3 are in source order after body rule, the headings would be
displayed in times new roman and not in Arial.
SPECIFICITY
⚫ When two rules in a single style sheet conflict, the type of selector is used to
determine the winner. If in a style sheet, there is a type selector and a class
selector, then the class selector will overrule the type selector. The more specific
selector overrules the less specific selector.
p {font-family:Georgia;}
.feature p {font-family:Verdana;}
⚫ In the above example, the class selector .feature p is more specific than the type
selector p. For any paragraph assigned to the class feature the font-family would
be Verdana.
RULE ORDER
If there are conflicts within style rules of identical weight, whichever comes the last
in the list is used
!important
⚫ There are rules that are declared !important.
Such rules always overrules other rules, no
matter what inheritance, source order or
specificity might otherwise do. A user created
style sheet can use !important to overrule
internal and inline rules.
{font-family:verdana !important;}
• The above rule applies Verdana font to all
elements irrespective of other rules used in CSS.
Overview and Features of CSS3
⚫ CSS3 version introduced new features that allowed
developers to style HTML elements with less CSS code.
CSS3 is most notorious for modules that speed up the
specification process.
⚫ At first, browsers did not support CSS3 features, and it
took a while for them to become fully compatible.
⚫ CSS3 is the latest version of CSS and contains a number
of exciting, new features that make it easier for web
developers to create great styling for websites.
Overview and Features of
CSS3
1. Box Shadow
One of the CSS3 new features is the box-shadow property that adds a shadow to an element.
Instead of using multiple images around an item, this property lets you add shadow with a short
line of code.
2. Opacity
One of the CSS3 properties called opacity makes elements see-through or completely
transparent.
For instance, you can apply opacity to images or other HTML elements. The transparency level
depends on the indicated values.
3. Rounded Corners
Before the release of CSS3, developers had to write long code to produce rounded corners.
Now, it is enough to apply the border-radius CSS3 property to HTML elements.
4. Attribute Selectors
⚫ CSS3 also introduced new selectors in addition to the ones in CSS2.
Instead of applying IDs or classes for styling, developers can select
HTML elements according to their attributes.
⚫ As a result, you do not have to create unique IDs only to apply CSS rules.
5. New Colors
⚫ One of the CSS3 features is the addition of new colors:
⚫ RGBA(red, green, blue, alpha)
⚫ HSL(hue, saturation ,lightness)
⚫ HSLA(hue, saturation ,lightness,alpha)
⚫ Gradient Colors

Web Unit - 2

Uploaded by

Copyright:

Available Formats

Web Unit - 2

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Unit - 2

Uploaded by

Copyright:

Available Formats

UNIT - 2

Creating a XHTML web page, it is necessary to include DTD (Document Type

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<h1>My First Heading</h1>

<h2>Basic HTML Table</h2>

<h2>Table With Border</h2>

<p>Use the CSS border property to add a border to the table.</p>

⚫ To set the border spacing for a table, use the CSS

⚫ The <img> tag has two required attributes:

⚫ src - Specifies the path to the image

⚫ The src Attribute

⚫ The alt Attribute

⚫ The value of the alt attribute should describe the image

⚫ You can click on a link and jump to another document

Display property is used to display image on web page.

<input type="checkbox"> Displays a checkbox (for selecting

<input type="submit"> Displays a submit button (for

⚫ Document-level style(Internal css) specifications appear in the document head section

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

<p style="font-size: 20pt">Second paragraph. Here is some more text</p>

<h1> Internal CSS</h1>

⚫ In the above example,

<img src="C:\Users\ADMIN\Desktop\pink.jpg" title="pink flower" width="150" height="113">

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

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

You might also like