UNIT-I

INTRODUCTION TO OSS,HTML & CSS

COVERS THE FOLLOWING TOPIC:

- AN INTRODUCTION TO THE WEB -HTML MARQUEE TAG

- AN INTRODUCTION TO THE HTML -INTRODUCTION TO CSS
- HTML EDITORS -ADDITING STYLE SHEET TO DOCUMENT
- HTML BASIC EXAMPLES -CSS SYNTAX
- HTML ELEMENTS -CSS COMMENTS
-HTML TEXT FORMATING ELEMENTS -CSS FONTS
-HTML LISTS -CSS LISTS
-HTML TABLES -CSS BACKGROUND COLOR PROPERTY
-HTML LINKS -CSS COLORS
-HTML FRAMES -CSS BOX MODEL
-HTML GRAPHICS -CSS DISPLAY PROPERTY
-IMPORTANT UNIVERSITY QUESTIONS

1 Open Source Software Materials.

 UNIT-I : HTML & CSS-Syllabus
Introduction to HTML- List- Creating Table- Linking document frames-Graphics to HTML Doc –Style
sheet –Style sheet basic-Adding style to document-Style sheet properties-Font-text-list-color and
background color-box-Display Properties.
1.1 WHAT IS OPEN SOURCE SOFTWARE
Open source software is computer software whose source code is available under a licence (or
arrangement such as the public domain) that permits users to study, change, and improve the software,
and to redistribute it in a modified form. It is a free program created through the collaborative efforts of
programmers from around the world.
1.2 ADVANTAGES OF OPEN SOURCE SOFTWARE
There are several advantages of using open source software. The following are a list of the
advantages of opting for open source software.
(i). Lesser Hardware Costs
 Since Linux and open source solutions are easily portable and compressed, it takes lesser hardware
power to carry out the same tasks when compared to the hardware power it takes on servers, such
as, Solaris, Windows or workstations.
 With this less hardware power advantage, you can even use cheaper or older hardware and still get
the desired results.
(ii). High-Quality Software
 Open source software is mostly high-quality software.
 When you use the open source software, the source code is available. Most open source software is
well-designed. Open source software can also be efficiently used in coding.
 These reasons make open source software an ideal choice for organizations.
(iii).No Vendor Lock-in
 IT managers in organizations face constant frustration when dealing with vendor lock-ins'.
 Lack of portability, expensive license fees and inability to customize software are some of the other
disadvantages.
 Using open source software gives you more freedom and you can effectively address all these
disadvantages.
(iv).Integrated Management
 By using open source software, you can benefit from integrated management.
 Open source software uses technologies, such as, common information model (CIM) and web
based enterprise management (WBEM).
 These high-end technologies enable you to integrate and combine server, application, service and
workstation management.
 This integration would result in efficient administration.

2 Open Source Software Materials.

(v). Simple License Management
 When you use open source software, you would no longer need to worry about licenses.
 Open source software enables you to install it several times and also use it from any location.
 You will be free from monitoring, tracking or counting license compliance.
(vi). Lower Software Costs
 Using open source software can help you minimize your expenses.
 You can save on licensing fees and maintenance fees.
 The only expenses that you would encounter would be expenditure for documentation, media and
support.
(vii).Abundant Support
 You will get ample support when you use open source software.
 Open source support is mostly freely available and can be easily accessed through online
communities.
 There are also many software companies that provide free online help and also varied levels of paid
support.
 Most organization that creates open source software solutions also provides maintenance and
support.
(viii). Scaling and Consolidating
 Linux and open source software can be easily scaled.
 With varied options for clustering, load balancing and open source applications, such as email and
database, you can enable your organization to either scale up and achieve higher growth or
consolidate and achieve more with less.
1.3 DISADVANTAGES OF OPEN SOURCE SOFTWARE
 The main disadvantage of open-source software is not being straightforward to use.
 Open-source operating systems like Linux cannot be learned in a day.
 They require effort and possibly training from your side before you are able to master them.
 You may need to hire a trained person to make things easier, but this will incur additional costs.
1.4 WHAT ARE EXAMPLES OF OPEN SOURCE SOFTWARE (OR) NEED OF
OPEN SOURCE SOFTWARE
 Office Automation(Word Processing, Spreadsheet and Presentation Software)
 Open Source Web Design
 Open Source Shopping Cards
 Open Source Communication
 Software redistribution
 Source code availability
 Distribution of licenses
 Anti-discrimination

3 Open Source Software Materials.

What is World Wide Web?
The term World Wide Web (WWW) refers to the collection of public Web sites connected to the
Internet worldwide, together with the client devices such as computers and cell phones that access its
content. For many years it has become known simply as "the Web."
1.6 What is Hypertext Transfer Protocol?
HTTP (Hypertext Transfer Protocol) is the set of rules for transferring files (text, graphic images,
sound, video, and other multimedia files) on the World Wide Web. HTTP is an application protocol that
runs on top of the TCP/IP.
1.7 What is Web Browser? (Or) What is URL(Uniform Resource Locator?
Web browser as "a computer program used for accessing sites or information on a network (such as the
World Wide Web).” This is a simple, yet accurate description.
1.8 Types of Web Browser?
The most popular web browsers that are used today are Mozilla Firefox, Google Chrome,
MicrosoftInternet Explorer, Apple Safari and the Operabrowser.

1.9 What is HTML?

 The founder of HTML was Tim Berners-Lee in 1990.
 HTML is short for HyperText Markup Language.
 HTML is used to create electronic documents (called pages) that are displayed on the World
Wide Web. Each page contains a series of connections to other pages called Hyperlinks.

1.10 Structure of an HTML Document

An HTML document has two main parts: the head and the body. But firstly every HTML document
should start by declaring that it is an HTML document.

4 Open Source Software Materials.

The overall structure of an HTML file is shown below:

Document Type <HTML> </HTML>

Title <TITLE> </TITLE>
Header <HEAD> </HEAD>
Body <BODY> </BODY>
• HTML document begins and ends with HTML tag i.e. <HTML> </HTML>
Here <HTML> indicates the browser that it is a HTML document and </HTML> tells the browser
that HTML document is completed.
• Header Tag i.e. <HEAD></HEAD>
Header Tag does not contain any text, it only contains the Title Tag in it.
• Title tag i.e. <TITLE></TITLE>
Anything written between this tag is not displayed on the screen but it is used to identify the
Webpage.
• Body tag i.e.<BODY></BODY>
This is the main part of HTML document. The content which is to be displayed on screen as
webpage should be written here. Body Tag contains the text as well as various tags but only the text
will be displayed on Webpage.
Simple Example Output
<html>
<head>
<title> My First Web Page </title>
</head>
<body>
HTML is Hyper Text Markup Language
</body>
</html>

5 Open Source Software Materials.

1.11 BASIC HTML TAGS
 What are HTML tags? ƒ
 HTML tags are used to mark-up HTML elements.
 ƒHTML tags are surrounded by the two characters < and >
 ƒThe surrounding characters are called angle brackets ƒ
 HTML tags normally come in pairs like <b> and </b>
 ƒThe first tag in a pair is the start tag, the second tag is the end tag.
 ƒThe text between the start and end tags is the element content ƒ
 HTML tags are not case sensitive, means the same as
 Basic HTML Tags
The most important tags in HTML are tags that define headings, paragraphs and line breaks.

a.HTML Headings Tags

Any document starts with a heading. You can use different sizes for your headings. HTML also has six
levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.Defines the
Heading <h1> to <h6> tags.
Example Output

b. Paragraph Tag
The <p> tag offers a way to structure your text into different paragraphs. HTML paragraph define
using <p> tag.

6 Open Source Software Materials.

Example Output

c. Line Break Tag

Whenever you use the <br /> element, anything following it starts from the next line. The
<br /> tag has a space between the characters br and the forward slash.
Example Output

d. Centering Content
You can use <center> tag to put any content in the center of the page or any table cell.
Example Output

e. Horizontal Lines
Horizontal lines are used to visually break-up sections of a document. The <hr> tag creates a line
from the current position in the document to the right margin and breaks the line accordingly.
Example Output

f. Preserve Formatting
The preformatted tag <pre>.Any text between the opening <pre> tag and the closing </pre> tag.
7 Open Source Software Materials.
Example Output

g. Nonbreaking Spaces
Use a nonbreaking space entity &nbsp; instead of a normal space.

Output : "12 Angry Men."

h. HTML Comment Tag

Defines the Comments <!-- Your Comment --> tag.
Example
<body>
<img src="../../jix/w2t.png" width="380" height="70" /> <!--Image File-->
</body>
i. HTML Images Tag
To display Images into web document. HTML Images are define inside the <img> tag.
Example
<body>
<img src="../../jix/w2t.png" width="380" height="70" />
</body>
j. HTML Link Tag
Defines the Link in internal or External document. HTML Link are defined inside the <a> tag.
Example
<body>
<a href="http://www.way2tutorial.com">Web Development Tutorial</a>
</body>

8 Open Source Software Materials.

1.12 Text Formatting Tag in HTML (or) HTML TEXT FORMATTING ELEMENTS
 HTML formatting tags use for formatting a text style. It will become necessary to make minor
changes to the formatting of those elements.
 HTML Tags like <b> for formatting output bold text.
 The following types of HTML Formatting elements are,
 Bold text
 Important text
 Italic text
 Emphasized text
 Marked text
 Small text
 Deleted text
 Inserted text
 Subscripts
 Superscripts

Example
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>

9 Open Source Software Materials.

 <p>The following word uses a <b>bold</b> typeface.</p>
</body>
</html>

1.13 HTML LISTS

Lists are used to display information separately in a HTML.Lists are divvied into 3 types. Namely,
1.Unordered List
2.Ordered List
3.Defintion or Description List
1. Unordered HTML Lists
 An unordered list starts with the <ul> tag.
 Each list item starts with the <li> tag.
 The list items will be marked with bullets (small black circles).
 The information are presented by any one of the following bullets
a."disk" Specifies a filled circle bullet.
b."square" Specifies a square bullet.
c."circle" Specifies an open circle bullet.
d.”none”
The list items will not be marked

 Syntax
<ul type=”value”>
<li>item1
<li>item2
<li>item 3
</ul>
Example for Unordered List:
<html>
<head>
<title>Unordered List Example
</title>
</head>
<body>
<ul type=”square”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul type=” disc">
<li>Coffee</li>
<li>Tea
<li>Milk</li>
</ul>
<ul type=”circle">
<li>Coffee</li>
<li>Tea
<li>Milk</li>
</ul>
10 Open Source Software Materials.
 <ul type="none">
<li>Coffee</li>
<li>Tea
<li>Milk</li>
</ul>
</body>
<html>
2.Ordered HTML Lists
 An unordered list starts with the <ul> tag.
 Each list item starts with the <li> tag.
 The HTML ol tag is used for ordered list.
There can be different types of numbered list
o Numeric Number (1, 2, 3)
o Capital Roman Number (I II
III)
o Small Romal Number (i ii iii)
o Capital Alphabet (A B C)
o Small Alphabet (a b c)
 A type attribute can be added to an ordered
list, to define the type of the marker:
Type Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers
Syntax:
<ol type=”value” start=”value”>
<li>item 1
<li> item 2
<li> item 3
</ol>
Example Program for ordered HTML List:-
<html>
<head>
<title>HTML Lists:Ordered HTML
List</title>
</head>
<body bgcolor="pink">
<h3><center>
<font size="30">
<font color="#800080">
Example Program Using Ordered
List
</font color>
</font size></h3>
<hr size="2" color="yellow">
<ol type="1">
<li>Coffee</li>

11 Open Source Software Materials.

 <li>Tea
<li>Milk</li>
</ol>
<ol type="A">
<li>Coffee</li>
<li>Tea
<li>Milk</li>
</ol>
<ol type="a">
<li>Coffee</li>
<li>Tea
<li>Milk</li>
</ol>
<ol type="I">
<li>Coffee</li>
<li>Tea
<li>Milk</li>
</ol>
<ol type="i">
<li>Coffee</li>
<li>Tea
<li>Milk</li>
</ol>
</body?
</html>

3. Description Lists (or) Definition List

 A description list, is a list of terms, with a description of each term.
 The <dl> tag defines a description list.
 The <dt> tag defines the term (name),
 and <dd> tag defines the data (description).
Syntax
<dl>
<dt>Item 1 <dd> Definition 1
<dt>Item 2 <dd> Definition 2
<dt>Item 3 <dd> Definition 3
</dl>
Example
<dl>
<dt>HTML</dt>
<dd>is a markup language</dd>
<dt>Java</dt>
<dd>is a programming language and platform</dd>
<dt>JavaScript</dt>
<dd>is a scripting language</dd>
<dt>SQL</dt>
<dd>is a query language</dd> </dl>
Output:
HTML
is a markup language
12 Open Source Software Materials.
 Java
is a programming language and platform
JavaScript
is a scripting language
SQL
is a query language
1.14 HTML TABLE
 HTML table tag is used to display data in tabular form (row * column). There can be many
columns in a row.
 HTML tables are used to manage the layout of the page e.g. header section, navigation bar, body
content, footer section etc. But it is recommended to use div tag over table to manage the layout of
the page.
HTML Table Tags

Tag Description

<table> It defines a table.

<tr> It defines a row in a table.
<th> It defines a header cell in a table.
<td> It defines a cell in a table.
<caption> It defines the table caption.
<colgroup> It specifies a group of one or more columns in a table for formatting.
<col> It is used with <colgroup> element to specify column properties for each column.
<tbody> It is used to group the body content in a table.
<thead> It is used to group the header content in a table.
<tfooter> It is used to group the footer content in a table.
Example
<table>
<tr>
<th>First_Name</th>
<th>Last_Name</th>
<th>Marks</th></tr>
<tr>
<td>Sonoo</td>
<td>Jaiswal</td>
<td>60</td>
</tr>
<tr>
<td>James</td>
<td>William</td>
<td>80</td>
</tr>
<tr>
13 Open Source Software Materials.
 <td>Swati</td>
<td>Sironi</td>
<td>82</td>
</tr>
<tr>
<td>Chetna</td>
<td>Singh</td>
<td>72</td></tr>
</table>
Output:
First_Name Last_Name Marks
Sonoo Jaiswal 60
James William 80
Swati Sironi 82
Chetna Singh 72
a. HTML Border attribute
Use border attribute of table tag in HTML to specify border.
<table border="1">
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
<tr><td>James</td><td>William</td><td>80</td></tr>
<tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
</table>
Output:
First_Name Last_Name Marks

Sonoo Jaiswal 60

James William 80

Swati Sironi 82
Chetna Singh 72

b.HTML Table with rowspan

If you want to make a cell span more than one row, you can use the rowspan attribute.
Example
<table>
<tr><th>Name</th><td>Ajeet Maurya</td></tr>
<tr><th rowspan="2">Mobile No.</th><td>7503520801</td></tr>
<tr><td>9555879135</td></tr>
</table>

Output

ame Ajeet Maurya

7503520801
Mobile No.
9555879135

1.15 HTML FRAMES

 In HTML, frames enable you present multiple HTML documents within the same window.
 For example, you can have a left frame for navigation and a right frame for the main content.
 Frames are achieved by creating a frameset page, and defining each frame from within that page.
14 Open Source Software Materials.
  This frameset page doesn't actually contain any content - just a reference to each frame.
 The HTML frame tag is used to specify each frame within the frameset.
 All frame tags are nested with a frameset tag.
Example 1 Output
<frameset rows="16%,84%">
<frame src="top.htm" name="top">
<frame src="bottom.htm" name="bottom">
</frameset>

Example 2 Output
<frameset rows="16%,84%">
<frame src="top.htm" name="top">
<frame src="bottom.htm" name="bottom">
</frameset>
Example 3 Output
<frameset rows="16%,84%">
<frame src="top.htm" name="top">
<frameset cols="50%,50%">
<frame src="left.htm" name="left">
<frame src="right.htm" name="right">
</frameset>
</frameset>

Example 4 Output
<frameset rows="50%,50%" cols="50%,50%">
<frame src="topleft.htm" name="topleft">
<frame src="topright.htm" name="topright">
<frame src="botleft.htm" name="botleft">
<frame src="botright.htm" name="botright">
</frameset>
Attributes of frameset
a. <frameset> Tag Attributes
o Cols
o Rows
o Border
o Frameborder
o Framespacing
b. <frame> Tag Attributes
o Src
o Name

15 Open Source Software Materials.

 o Frameborder
o Marginwidth
o Marginheight
o Noresize
o Scrolling
o longdesc

1.16 HTML FRAMES

o The <IMG> tag is used to embed graphics in HTML pages.
o They may be embedded inside other elements such as anchors.
o When embedded inside an anchor, then the user left clicks on the image, they will go to the
designated link (rather, their browser will load a file from the designated link).
o The <IMG> element has no ending tag.
IMG Attributes
 SRC="greenhomebutton.gif" - The path and filename of the image which specifies its location.
 ALT="Home" - This is a message displayed if the image could not be found.
 ALIGN="TOP" - Sets the image alignment. The image is aligned to the left or right column.
 HSPACE=5 - (Depreciated). The space between the image and the text to the left and right of it in
pixels.
 BORDER=10 - Sets a border of the specified width around the image.
 HEIGHT=33 - The height of the image.
 ISMAP - Identifies the image as an image map.
 USEMAP - Specifies the client side image map file to be used.
1.15 HTML <MARQUEE> TAG
o The HTML <marquee> tag is used for scrolling piece of text or image displayed either
horizontally across or vertically down your web site page depending on the settings.
Example
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee>This is basic example of marquee</marquee>
<marquee direction="up">The direction of text will be from bottom to top.</marquee>
</body>
</html>

16 Open Source Software Materials.

ATTRIBUTE OF MARQUEE TAG
The HTML <marquee> tag also supports following additional attributes:

Attribute Value Description

Behaviour Scroll slide alternate Defines the type of scrolling.

Bgcolor rgb(x,x,x) Defines the direction of scrolling the content.

Direction Up,down,left,right Defines the direction of scrolling the content.

Height pixels or % Defines the height of marquee.

Hspace pixels Specifies horizontal space around the marquee.

Loop number Specifies how many times to loop.

scrolldelay seconds Defines how long to delay between each jump.

scrollamount number Defines how far to jump.

Width pixels or % Defines the width of marquee.

Vspace pixels Specifies vertical space around the marquee.

17 Open Source Software Materials.

IN INTRODUCTION TO CASCADING STYLE SHEETS RODUCTION TO CASCADING STYLE SHEETDUCTION TO
CASCADINGINTRODUCTION TO CASCADING STYLE SHEETS (CSS)
1.16 What is CSS?
o CSS Stands for "Cascading Style Sheet."
o Cascading style sheets are used to format the layout of Web pages.
o They can be used to define text styles, table sizes, and other aspects of Web pages that
previously could only be defined in a page's HTML.
o CSS can be used to define the cell padding of table cells, the style, thickness, and color of a table's border, and the
padding around images or other objects.
o CSS gives Web developers more exact control over how Web pages

o HTML STYLES IN CSS

CSS = Styles and Colors
M a n i p u l a t e T e x t
C o l o r s , B o x e s

1 . 1 7 C S S S Y N T A X W I T H E X A M P L E

Example using CSS

p{
color: red;
text-align: center;
}
1.18 ADVANTAGES AND DISADVANTAGES OF USING CSS
a. ADVANTAGES OF USING CSS:
The biggest advantage of CSS is that it allows separating content of an html document from the
style and layout of that document.
Here are some more advantages, using CSS are:

1.CSS Save lots of time

CSS gives lots of flexibility to set the properties of an element. You can write CSS once; and then the
same code can be applied to the groups of HTML elements, and can also be reused in multiple HTML
pages.
2. Easy maintenance
CSS provide an easy means to update document formatting and maintain consistency across
multiple documents. By making one change to the website's CSS, elements in all the web pages will be
updated automatically.

18 Open Source Software Materials.

3.Pages load faster
CSS enable multiple pages to share formatting, and reduce complexity and repetition in the
structural content. It significantly reduces the file transfer size, which results in a faster page loading.
4.Superior Styles to HTML
CSS has much wider presentation capabilities than HTML, so you can give far better look to your
HTML pages in comparison to the HTML presentational elements and attributes.
5. Multiple Device Compatibility
CSS can also allow the HTML document to be optimized for more than one type of device media.
b.DISADVANTAGES OF USING CSS
1.Browser compatibility
CSS works differently on different browsers. IE and Opera supports CSS as different logic.
1.19 ADDING STYLEING TO DOCUMENT (OR) LEVELS OF STYLE SHEETS (OR)
TYPES OF STYLE SHEETS
The Cascading Style Sheet is W3C technology that allows document authors to specify the
presentation of elements on a web page separately from the structure of the document.
Styling can be added to HTML elements in 3 ways.Types are:
1. Inline style sheet
- using a style attribute in HTML elements
2. Embedded style sheet(or)Internal
- using a <style> element in the HTML <head> section
3. Linked style sheet(or)External
- using one or more external CSS files
1.Inline Style SHEET
This style declares an individual element’s format using attribute style. The attribute style specifies the
style for an element. The attribute is specified with the tag itself. Each CSS property is followed by a colon
and a value.Inline styling is useful for applying a unique style to a single HTML element. Inline styling
uses the style attribute.This inline styling changes the text color of a single heading:
Example:
<h1 style="color:blue">This is a Blue Heading</h1>
2.EMBEDDED STYLE SHEET(OR)INTERNAL STYLE SHEET
These sheets enable a web-page author to embed an entire CSS document in an HTML document’s
head section. An internal style sheet can be used to define a common style for all HTML elements on a
page. Internal styling is defined in the <head> section of an HTML page, using a <style> element:
Example
<html>
<head>
<style>
body {background-color:lightgrey}
19 Open Source Software Materials.
 h1 {color:blue}
p {color:green}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
3.LINKED EXTERNAL STYLE SHEET (OR) EXTERNAL STYLE SHEET
In this style sheet the style information is available on a separate document that contains only the CSS
rules. It is used to provide a uniform look and feel to an entire web site.
Generate a separate file with extension css for specifying the style and make a link with the original file
using link tag.
 External style sheet are ideal when the style is applied to many pages.
 With external style sheets, you can change the look of an entire site by changing one file.
 External styles are defined in the <head> section of an HTML page, in the <link> element:
Example
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
1.20 SAMPLE PROGRAMS INLINE USING INTERNAL & EXTERNAL STYLE SHEETS
a. Inline Style Sheet:
<html>
<head>
<title> Inline Style Sheet</title>
</head>
<body>
<p style=”font-size:20pt”> Dr.R.K.Shanmugam College of Arts & Science,Indili,Kallakurichi.</p>
<p style=”font-size:18pt;color:red”>Department of Computer Science</p>
</body>
</html>
b.Embedded Style Sheet:
<html>
<head>
<title> Embedded Style Sheet</title>
<style>
p { font-size:20pt;color:red }
h1 { font-size:30pt;color:green }
20 Open Source Software Materials.
 .special { color:blue}
</style>
</head>
<body>
<h1> Infant Jesus College of Engineering, Keelavallanadu, Thoothukudi Dist.</h1><br>
<p>Department of Computer Science and Engineering</p>
</body>
</html>
c.Linked External Style Sheet:
lss.html file:
<html>
<head>
<title> Linked Style sheet</title>
<link rel=”stylesheet” type=”text/css” href=”styles.css”>
</head>
<body>
<h1> Infant Jesus College of Engineering, Keelavallanadu, Thoothukudi Dist.</h1><br>
<p>Department of Computer Science and Engineering</p>
</body>
</html>
styles.css file
p { font-size:20pt;
color:red }
h1 { font-size:30pt;
color:green }
special { color:blue }
Here are a few reasons this is better External Style Sheet
1.Easier Maintenance
2.Reduced File Size
3.Reduced Bandwidth
4.Improved Flexibility
1.21 CSS COMMENTS
 Comments are used to explain your code, and may help you when you edit the source code
at a later date. Comments are ignored by browsers.
 A CSS comment starts with /* and ends with */.
 Comments can also span multiple lines:
Example using CSS COMMENTS
p{
color: red;
/* This is a single-line comment */
text-align: center;
}

21 Open Source Software Materials.

1.22 CSS PROPERTIES
1.Font Properties
2.Text Properties
3.List Properties
4.Color and Background Properties
5.Box Properties
6.Border Properties
7.Display Properties
1.22.1 CSS FONT PROPERTIES

You can set following font properties of an element:

 Font-family property is used to change the face of a font.
 Font-style property is used to make a font italic or oblique.
 Font-variant property is used to create a small-caps effect
 Font-weight property is used to increase or decrease how bold or light a font appears.
 Font-size property is used to increase or decrease the size of a font.
 Font property is used as shorthand to specify a number of other font properties.
a. Font-family
There are 2 choices for values:
 Font family : A specific font family like “Times New Roman” or “Arial”
 Generic family : A Group of font families with a with a similar book such as “Serif” or Sane-
serif”.
Example:

<html>
<head>
</head>
<body>
<p style="font-family:georgia,garamond,serif;">
This text is rendered in either georgia, garamond, or the default serif font
depending on which font you have at your system.
</p>
</body>
</html>
b. Font-style
The font-style property is mostly used to specify italic text. This property has three values.
 Normal – The text is shown normally.
 Italic – The text is shown in italics.
 Oblique – The text is “leaning” which is very similar to italic.

22 Open Source Software Materials.

EXAMPLE:
<html>
<head>
</head>
<body>
<p style="font-style:italic;">
This text will be rendered in italic style
</p>
</body>
</html>
C. Font-variant
You can set the variant of text within an element with the font-variant property.

Possible values are:

 normal
 small-caps
Example:
<html>
<head>
<style>
p { font-variant: small-caps; }
h3 { font-variant: normal; }
</style>
</head>
<body>
<h3>This heading is shown in normal font.</h3>
<p>This paragraph is shown in small font.</p>
</body>
</html>

d. Font-Weight
You can control the weight of text in an element with the font-weight property:
font-weight: value;
Possible values are
 lighter , normal , 100 , 200 . 300 . 400 . 500 . 600 , 700 , 800 , 900 , bold , bolder
Example:
<html>
<body>
<p style="font-weight:bold;">This font is bold.</p>
<p style="font-weight:bolder;">This font is bolder.</p>
<p style="font-weight:lighter;">This font is lighter.</p>
<p style="font-weight:100;">This font is 100 weight.</p>
<p style="font-weight:200;">This font is 200 weight.</p>
<p style="font-weight:300;">This font is 300 weight.</p>
<p style="font-weight:400;">This font is 400 weight.</p>
<p style="font-weight:500;">This font is 500 weight.</p>
<p style="font-weight:600;">This font is 600 weight.</p>
<p style="font-weight:700;">This font is 700 weight.</p>
<p style="font-weight:800;">This font is 800 weight.</p>
<p style="font-weight:900;">This font is 900 weight.</p>
</body>
</html>

e. Font-Weight
23 Open Source Software Materials.
You can set the size of the text used in an element by using the font-size property.
font-size: value;
There are a lot of choices for values:
 larger , large , medium , small , smaller , x-small , xx-small , length , % (percent)
Example:
<html>
<head>
<title>Practice CSS font-size property</title>
</head>
<body>
<p style="font-size:xx-small;"> This font size is extremely small.</p>
<p style="font-size:x-small;"> This font size is extra small</p>
<p style="font-size:small;"> This font size is small</p>
<p style="font-size:medium;"> This font size is medium. </p>
<p style="font-size:large;"> This font size is large. </p>
<p style="font-size:x-large;"> This font size is extra large. </p>
<p style="font-size:xx-large;"> This font size is extremely large. </p>
<p style="font-size:smaller;"> This font size is smaller. </p>
<p style="font-size:larger;"> This font size is larger. </p>
<p style="font-size:200%;"> This font size is set on 200%. </p>
<p style="font-size:20px;"> This font size is 20 pixels. </p>
</body>
</html>

f.Font property
The font property can set the style, weight, variant, size, line height and font:
font: italic bold normal small/1.4em Verdana, sans-serif;
1.22.2 CSS TEXT PROPERTIES
 CSS TEXT properties are various type like text color, text-align, text-decoration, letter-spacing and many more properties.

a.CSS Color
CSS color property use to set the Text color. The color value can be specified following three types:
1.Color Name: Orange
2.Color Hexadecimal Code: #FFA500
3.Color RGB: rgb(255, 165, 0)
Example
<body>
<p style="color:orange;">CSS TEXT color name orange</p>
<p style="color:#FFA500;">CSS TEXT color hexadecimal code #FFA500</p>
<p style="color:rgb(255,156,0);">CSS TEXT RGB color code rgb(255,156,0)</p>
</body>

b. CSS text-align
 CSS text-align property use to set the horizontal alignment of text.
text-align posible value center, left, right, or justify.

24 Open Source Software Materials.

Example
<body>
<p style="text-align:right;">CSS TEXT align right</p>
<p style="text-align:center;">CSS TEXT align center</p>
<p style="text-align:left;">CSS TEXT align left</p>
<p style="text-align:justify;">Hello reader, this ia example of CSS text-align
<p>
</body>
c. CSS text-indent
CSS text-indent property is used to set the paragraph first line leftside leave the blank space.
body>
<p style="text-indent:35px;">This paragraph is example of CSS text-indent property
</body>
d.CSS text-decoration
 CSS text-decoration property use to decorate the text.
 CSS text-decoration posible value underline, overline, blink, through etc.
EXAMPLE:
<body>
<p style="text-decoration:underline;">Text is underline decorate</p>
<p style="text-decoration:overline;">Text is overline decorate</p>
<p style="text-decoration:blink;">Text is blink decorate</p>
<p style="text-decoration:line-through;">Text is line delete decorate</p>
<p style="text-decoration:none;">Text is Nothing any decorate value</p>
</body>
e. CSS text-transformation
 CSS text-transformation property use to text transform.
 CSS text-transformation posible value capitalize, lowercase and uppercase in a text.
 CSS text-transformation property value capitalize, it means first letter capital for all word.
EXAMPLE
<body>
<p style="text-transform:capitalize;">this line transform capital</p>
<p style="text-transform:lowercase;">this line transform Lowercase</p>
<p style="text-transform:uppercase;">this line transform Uppercase</p>
</body>
f. CSS letter-spacing
CSS letter-spacing property set blank space between each two letter.
Example
<body>
<p style="letter-spacing:5px">This text is letter spacing</p>
</body>
g. CSS word-spacing
CSS word-spacing property set blank space between each two word.

25 Open Source Software Materials.

 Example:
<body>
<p style="word-spacing:25px">This text is Word Spacing</p>
</body>
h. CSS white-space
 CSS white-space property use to set a predefine task. CSS white-space possible value is normal, pre.
Example
<body>
<p style="white-space:pre">This text is Predefined Area

Predefined area second line</p>

</body>
g. CSS text-shadow
 CSS text-shadow property is use to decorate text and apply shadow effect style.
Example
body>
<p style="text-shadow:4px 4px 8px orange;">This text is Text Shadow Effect</p>
</body>
1.22.3 CSS LIST PROPERTIES
With CSS list properties, you can specify how lists appear.
The CSS list properties allow you to:
 Set different list item markers for ordered lists
 Set different list item markers for unordered lists
 Set an image as the list item marker
 Add background colors to lists and list items
Set some different list styles:

ul.circle {list-style-type: circle;}

ul.square {list-style-type: square;}
ol.upper-roman {list-style-type: upper-roman;}
ol.lower-alpha {list-style-type: lower-alpha;}
Example
<html>
<head>
<title>Lists</title>
</head>
<body>
<ul style="list-style-type: square;">
<li>green</li>
<li>blue</li>

26 Open Source Software Materials.

 <li>gray</li>
<li>orange</li>
</ul>
<ul style="list-style-type: upper-alpha;">
<li>green</li>
<li>blue</li>
<li>gray</li>
<li>orange</li>
</ul>
<ol style="list-style-type: disc;">
<li>green</li>
<li>blue</li>
<li>gray</li>
<li>orange</li>
</ol>
<ol style="list-style-type: circle;">
<li>green</li>
<li>blue</li>
<li>gray</li>
<li>orange</li>
</ol>
</body>
</html>
1.22.4 CSS COLOR AND BACKGROUND PROPERTIES
a.Color
The color property is used to specify the foreground color of HTML elements.
Syntax:
color: <color>
The color property allows authors to specify the color of an element.
H1 { color: blue }
H2 { color: #000080 }
H3 { color: #0c0 }

b. Background Color
The background-color property sets the background color of an element.
Syntax:
background-color: <value>

Example

27 Open Source Software Materials.

 BODY { background-color: white }
H1 { background-color: #000080 }

c. Background Image
The background-image property sets the background image of an element.
Syntax:
background-image: <value>
Example
BODY { background-image: url(/images/foo.gif) }
P { background-image: url(http://www.htmlhelp.com/bg.png) }

d. Background Repeat
The background-repeat property determines how a specified background image is repeated.
Syntax:
background-repeat: <value>
Example
BODY { background: white url(candybar.gif);
background-repeat: repeat-x }

e. Background Attachment
The background-attachment property determines if a specified background image will scroll with
the content or be fixed with regard to the canvas.
Syntax:
background-attachment: <value>
Example:
BODY { background: white url(candybar.gif);
background-attachment: fixed }

f.Background Position
The background-position property gives the initial position of a specified background image. This
property may only be applied to block-level elements and replaced elements.
Syntax:
background-position: <value>
Example
background-position: 50% 50%;
g. Background
The background property is a shorthand for the more specific background-related
properties.
Syntax:
background: <value>

Example
BODY { background: white url(http://www.htmlhelp.com/foo.gif) }
BLOCKQUOTE { background: #7fffd4 }
P { background: url(../backgrounds/pawn.png) #f0f8ff fixed }
TABLE { background: #0c0 url(leaves.jpg) no-repeat bottom right }

28 Open Source Software Materials.

1.22.5 CSS BOX PROPERTY
 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 add a border around elements, and to define space between elements.
The image below illustrates the box model:

a.Different Parts of Box Property

 Content - The content of the box, where text and images appear
 Padding - Clears an area around the content. The padding is transparent
 Border - A border that goes around the padding and content
 Margin - Clears an area outside the border. The margin is transparent

b.Property of Box Property

Value Description
content-box Default. The width and height properties (and min/max properties)
includes only the content. Border, padding, or margin are not included
border-box The width and height properties (and min/max properties) includes
content, padding and border, but not the margin
initial Sets this property to its default value.
inherit Inherits this property from its parent element.
c.CSS Syntax
box-sizing: content-box|border-box|initial|inherit;
Example:
<html>
<head>
<style>
.div1 {
width: 200px;

29 Open Source Software Materials.

 height: 100px;
border: 1px solid green;
}
.div2 {
width: 200px;
height: 100px;
padding: 50px;
border: 1px solid pink;
}
</style>
</head>
<body>
<div class="div1">TutorialsPoint.com</div></br>
<div class="div2">TutorialsPoint.com</div>
</body>
</html>

1.22.6 CSS BORDER PROPERTY

The border properties allow you to specify how the border of the box representing an element
should look.
There are three properties of a border
1. border-color specifies the color of a border.
2. border-style specifies whether a border should be solid, dashed line, double line, or one of the other
possible values.
3. border-width specifies the width of a border.

1. Border-Color Property
The border-color property allows you to change the color of the border surrounding an element. The
Border-Color Properties are:
1. border-bottom-color changes the color of bottom border
2. border-top-color changes the color of top border
3. border-left-color changes the color of left border
4. border-right-color changes the color of right border
Example

<html>
<head>
<style type="text/css">
p.example1{
border:1px solid;
border-bottom-color:#009900; /* Green */
border-top-color:#FF0000; /* Red */
30 Open Source Software Materials.
 border-left-color:#330000; /* Black */
border-right-color:#0000CC; /* Blue */
}
p.example2{
border:1px solid;
border-color:#009900; /* Green */
}
</style>
</head>
<body>
<p class="example1">
This example is showing all borders in different colors.
</p>
<p class="example2">
This example is showing all borders in green color only.
</p>
</body>
</html>

2. Border-Style Property
The border-style property allows you to select one of the following styles of border.
 none: No border. (Equivalent of border-width:0;)
 solid: Border is a single solid line.
 dotted: Border is a series of dots.
 dashed: Border is a series of short lines.
 double: Border is two solid lines.
 groove: Border looks as though it is carved into the page.
 ridge: Border looks the opposite of groove.
 inset: Border makes the box look like it is embedded in the page.
 outset: Border makes the box look like it is coming out of the canvas.
 hidden: Same as none, except in terms of border-conflict resolution for table elements.

31 Open Source Software Materials.

Individually change the style of the bottom, left, top, and right borders of an element using the following
properties:
 border-bottom-style changes the style of bottom border.
 border-top-style changes the style of top border.
 border-left-style changes the style of left border.
 border-right-style changes the style of right border.
Example

<html>
<head>
</head>
<body>.
<p style="border-width:4px; border-style:none;">
This is a border with none width.
</p>
</body>
</html>

3. Border-Width Property
The border-width property allows you to set the width of an element borders. The following
properties are:
1.border-bottom-width changes the width of bottom border
2.border-top-width changes the width of top border
3.border-left-width changes the width of left border
4.border-right-width changes the width of right border
Example

<html>
<head>
CSS Border Property
</head>
<body>
<p style="border-width:4px; border-style:solid;">
This is a solid border whose width is 4px.
</p>
</body>
</html>

32 Open Source Software Materials.

1.22.7 CSS DISPLAY PROPERTY
 The display property specifies if/how an element is displayed.
 Every HTML element has a default display value depending on what type of element it is.
 The default display value for most elements is block or inline.
EXAMPLE
<html>
<head>
<style>
body {
display: inline;
}
p{
display: inherit;
}
</style>
</head>
<body>
<p>These two paragraphs generates inline boxes, and it results in</p>
<p>no distance between the two elements.</p>
</body>
</html>

33 Open Source Software Materials.