Stream : BCA 3rd Sem

Subject : Web Design[WD]- 1020201302

Unit 1 | Introduction to HTML& CSS

 What is HTML?

 HTML stands for Hyper Text Markup Language.

 HTML is a standard markup language which is used for creating web pages.

 It describes the structure of web pages through HTML elements or tags.

 It provides some titles, headings, paragraphs, lists, tables, embedded images, etc., to
describe the structure of text-based and multimedia information in HTML
documents.

 The History of HTML :

 HTML was first created by Tim Berners-Lee, Robert Cailliau, and others starting in
1986.

 In 1989, Berners-Lee wrote a memo proposing an Internet-based hypertext system.

 Berners-Lee specified HTML and wrote the browser and server software in late 1990.

1.1 Different Versions of HTML and its significance :

Year Version

1991 Tim Berners-Lee invented HTML

1993 Tim Berners-Lee invented HTML 1.0

1995 HTML Working Group defined HTML 2.0

1997 W3C Recommendation: HTML 3.2

1999 W3C Recommendation: HTML 4.01

2000 W3C Recommendation: XHTML 1.0

2014 W3C Recommendation: HTML5

www.RNWMULTIMEDIA.com Page | 1
1. HTML 1.0 :

o HTML 1.0 or first version of HTML was a version of SGML that had ability to link
different document or pages using 'href'.

o HTML 1.0 had 20 elements or tags, now latest version of HTML, ie HTML5 has a lot
more.

2. HTML 2.0 :

o After HTML 1.0, the second version of HTML was released in 1994. HTML 2.0 was
an expansion of HTML 1.0.

o Internet Engineering Task Force (IETF) was behind it's creation.

3. HTML 3.2 :

o HTML 3.2 was released In 1997. HTML 3.2 had many new features like tables,
superscript, subscript etc.

o Two most important features introduced in HTML 3.2 were tables and text flow
around images.

o Tables were widely used and programmers still use them but it is not recommended
anymore.

4. HTML 4.01 :

o HTML 4.01 was released In 1999. HTML 4.01 introduced features like scripting,
style sheets, better tables, better forms frames and embedding objects.

o HTML 4.01 was a revised version of HTML 4.0, it also included features for the
disabled people to enhance their interactivity with the Global world through Internet.

5. XHTML :

o In 2000 XHTML was released. XHTML stands for Extensible Hyper Text Markup
Language.
o XHTML has strict set of rules and it is basically an XML application of HTML.

6. HTML5 :

o So all of this added up and then after so many year HTML5 was released in 2014.

o HTML5 is the best version of HTML up till now. HTML5 improved user interactivity
so much and also lessened the burden of devices.

www.RNWMULTIMEDIA.com Page | 2
 Difference between HTML and HTML5 :

HTML HTML5
HTML Doctype declaration is lengthy. DOCTYPE declaration in HTML5 is simple.

HTML5 Character encoding declaration is

HTML Character encoding is longer.
simple.
Audio and video are not HTML parts. Audio and video are HTML5 part.
It is possible to draw a vector with the help of
Vector graphics are a part of HTML5, e.g.,
other technologies like Silverlight, Flash,
canvas, SVG.
VML, etc.
JS Geolocation API in HTML5 enables you to
It is impossible to get the actual Geolocation
identify the location of the user browsing any
of a person browsing any website.
website.
HTML offers local storage instead of
Html5 uses cookies to store data.
cookies.
In HTML, it is not possible to draw basic
In Html5, it is possible to draw basic shapes.
shapes.
It enables you to run JavaScript code in the
It allows you to run JavaScript in a browser.
background.
You can use HTML with all old browsers. You can use HTML5 with all new browsers.
You can use browser cache as temporary You can use application (database and web
storage. storage) Cache as temporary storage.
You can establish full-duplex communication
Web Socket is not available.
channels with a server using Web Sockets.
There is no process to handle structurally HTML5 supports persistent error handling via
incorrect HTML codes. the improvised error handling process.
HTML is less mobile-friendly. HTML5 is mobile friendly.

Attributes like async, charset, and ping are Attributes of async, ping, charset, and are a
not present in HTML. part of HTML5.

HTML does not allow drag and drop effects. HTML5 allows drag and drop effects.

Built based on Standard Generalized Markup HTML5 has improved parsing rules providing
Language (SGML). enhanced compatibility.

The type attribute for < script > and < link > The type attribute for < script> and < link > tag
tag is mandatory in the code. can be omitted in the code.
< Html >, < body >, < head > tags are < Html >, < body >, < head > tags can be
mandatory while coding. omitted while coding.

www.RNWMULTIMEDIA.com Page | 3
1.2 Create and save an HTML document, access a web page using a web
browser :

 ".html" or ".htm" are the two extensions used to write and save HTML files; we
can write HTML code in any text editor and save it as "filename.html" or
"filename.htm".

 Requirements:

1. Text Editor
2. An Internet Browser

Step :1 Open Your Text Editor :

 You can write HTML in any simple editor such as Notepad. And other software such
as Adobe Dreamweaver, Sublime, NetBeans, Notepad ++, etc., are mainly used for
writing and editing HTML.

Step 2: Write Your HTML Code.

Step 3: Save Your File :

 There are a few important things to keep in mind when you save it the file:

 Use the .html HTML file extension,

i.e. about_me.html.

 Don’t use any spaces or special characters in the file name. Use underscores (_) or
dashes (-) instead.

 Decide where in your computer you will save the file, and make sure to remember the
location!

Step 4: Open Your Web Page in Your Browser.

www.RNWMULTIMEDIA.com Page | 4
1.3 Structure of HTML page :

 The basic structure of an HTML document consists of 5 elements:

1. <!DOCTYPE>
2. <html>
3. <head>
4. <title>
5. <body>

1. The DOCTYPE :

 A DOCTYPE declaration must be specified on the first line of each web

document :

 The DOCTYPE tells the web browser which version of HTML the page is written
in.

 In this class, we will be using ‘XHTML Transitional’, which allows us a little

flexibility.

www.RNWMULTIMEDIA.com Page | 5
2. The <html> Element :

 Immediately following the DOCTYPE declaration is the <html> element:

 The <html> element tells the browser that the page will be formatted in HTML
and, optionally, which world language the page content is in.

3. The <head> and <body> Elements :

 The <head> element surrounds all the special “behind the scenes” elements of a
web document.

 Most of these elements do not get displayed directly on the web page.

 The <body> element surrounds all the actual content (text, images, videos, links,
etc.) that will be displayed on our web page.

4. The <meta> Element :

 Immediately after the <head> line, we place this <meta> element :

 This line declares that the document is encoded in the UTF-8 (Unicode) character
set.

www.RNWMULTIMEDIA.com Page | 6
  There can be multiple <meta> lines in the same web page.

 The <meta> element is often used to provide additional information such as page
keywords, a page description, and the author(s) of a web document.

5. The <title> Element :

 The <title> element defines what text will show in the web browser’s title bar :

 What is an HTML Element ?

 An HTML element is defined by a start tag, some content, and an end tag :

<tagname> Content goes here... </tagname>

 The HTML element is everything from the start tag to the end tag :

<h1> My First Heading </h1>

<p> My first paragraph. </p>

 Note : Some HTML elements have no content (like the <br> element). These
elements are called empty elements. Empty elements do not have an end tag!

www.RNWMULTIMEDIA.com Page | 7
 1. HTML Headings tag:

 HTML headings are defined with the <h1> to <h6> tags.

 <h1> defines the most important heading. <h6> defines the least important
heading:

Example : Output :

<!DOCTYPE html>
<html>
This is heading 1
<body>
This is heading 2
<h1>This is heading 1</h1>
<h2>This is heading 2</h2> This is heading 3
<h3>This is heading 3</h3>
This is heading 4
<h4>This is heading 4</h4>
<h5>This is heading 5</h5> This is heading 5
<h6>This is heading 6</h6>
This is heading 6

</body>
</html>

2. HTML Paragraphs tag:

 HTML paragraphs are defined with the <p> tag :

Example : Output :

<p>This is a paragraph.</p> This is a paragraph.

<p>This is another paragraph.</p> This is another paragraph.

3. Unclosed HTML Tags :

 Some HTML tags are not closed, for example br and hr.

 <br> Tag : br stands for break line, it breaks the line of the code.

 <hr> Tag : hr stands for Horizontal Rule. This tag is used to put a line across the
webpage.

www.RNWMULTIMEDIA.com Page | 8
4. HTML Formatting Elements :

 Formatting elements were designed to display special types of text:

Tag Description
<b> Bold text
<strong> Important text
<i> Italic text
<u> Underline text
<tt> Teletype text
<em> Emphasized text
<mark> Marked (Heighlight) text
<small> Smaller text
<big> Bigger text
<del> , <s> Deleted text , Strike text
<ins> Inserted text
<sub> Subscript text
<sup> Superscript text
<q> Short Quotations text

5. Block Formatting Tags :

 A block-level element always starts on a new line.

 A block-level element always takes up the full width available.

Tag Description
<address> Contact information.
<article> Article content.
<aside> Aside content.
<blockquote> Long ("block") quotation.
<div> Document division.
<nav> Contains navigation links.
<header> Section or page header.
<footer> Section or page footer.
<form> Input form.
<table> Create Table.
<h1 to <h6> Heading levels 1-6.
<hr> Horizontal rule (dividing line).
<p> Paragraph.
<pre> Preformatted text.
<section> Section of a web page.

www.RNWMULTIMEDIA.com Page | 9
 6. HTML List Tag :

Unordered List :

 An unordered list is a collection of related items that have no special order or

sequence.
 It is also known as bulleted list also.
 This list is created by using HTML <ul> tag and list items start with the <li>
tag.
 Each item in the list is marked with a bullet.
 To represent different lists, The CSS list-style-type property is used to define
the style of the list item marker.
 There are 4 types of attributes in <ul> tag :

Type Description

Type "disc" This is the default style. the list items are marked with bullets.

Type "circle" In this style, the list items are marked with circles.

Type "square" In this style, the list items are marked with squares.

Type "none" In this style, the list items are not marked .

www.RNWMULTIMEDIA.com Page | 10
 Example : Example : Example :
Default(Disc Bullets) Circle Bullets Square Bullets
1. <ul> 1. <ul type="circle"> 1. <ul type="square">
2. <li>HTML</li> 2. <li>HTML</li> 2. <li>HTML</li>
3. <li>Java</li> 3. <li>Java</li> 3. <li>Java</li>
4. <li>JavaScript</li> 4. <li>JavaScript</li> 4. <li>JavaScript</li>
5. <li>SQL</li> 5. <li>SQL</li> 5. <li>SQL</li>
6. </ul> 6. </ul> 6. </ul>

Output : Output : Output :

 HTML o HTML  HTML

 Java o Java  Java
 JavaScript o JavaScript  JavaScript
 SQL o SQL  SQL

Ordered List :

 An ordered list can be numerical or alphabetical.

 It is also known as Numbered list also.
 This list is created by using HTML <ol> tag and list items start with the <li>
tag.
 The list items are marked with numbers by default.
 To represent different lists, The CSS list-style-type property is used to define
the style of the list item marker.

Type Description

Type "1" This is the default type. The list items are numbered with numbers.

Type "I" In this type, the list items are numbered with upper case roman numbers.

Type "i" In this type, the list items are numbered with lower case roman numbers.

Type "A" In this type, the list items are numbered with upper case letters.

Type "a" In this type, the list items are numbered with lower case letters.

www.RNWMULTIMEDIA.com Page | 11
  The start Attribute :

o You can use start attribute for <ol> tag to specify the starting point of
numbering you need.
o Following are the possible options −

<ol type = "1" start = "5"> ……… Numerals starts with 5.

<ol type = "I" start = "4"> ……… Numerals starts with IV.
<ol type = "i" start = "6"> ……….Numerals starts with vi.
<ol type = "a" start = "7"> ………..Letters starts with g.
<ol type = "A" start = "3"> ………..Letters starts with C.

Example :

<!DOCTYPE html>
<html>

<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "i" start = "4">
<li> HTML </li>
<li> PHP </li>
<li> Android </li>
<li> JavaScript </li>
</ol>
</body>
</html>

Output :

iv. HTML
v. PHP
vi. Android
vii. JavaScript

Descriptive List :

 A description list is a list of terms, with a description of each term.

 Definition List makes use of following three tags.

<dl> − Defines the start of the list

<dt> − A term (Descriptive type)
<dd> − Term definition (Descriptive Data)

www.RNWMULTIMEDIA.com Page | 12
1. Example :
2. <dl>
3. <dt>HTML</dt>
4. <dd>is a markup language</dd>
5. <dt>Java</dt>
6. <dd>is a programming language and platform</dd>
7. <dt>JavaScript</dt>
8. <dd>is a scripting language</dd>
9. <dt>SQL</dt>
10. <dd>is a query language</dd>
</dl>

Output :

HTML
is a markup language

Java
is a programming language and platform.

JavaScript
is a scripting language

SQL
is a query language

7. HTML Table Tag :

 HTML table tag is used to display data in tabular form (row * column).

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

www.RNWMULTIMEDIA.com Page | 13
Example :

<!DOCTYPE html>
<html>
<body>
<table border =”5”>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Priya</td>
<td>Sharma</td>
<td>24</td>
</tr>
<tr>
<td>Arun</td>
<td>Singh</td>
<td>32</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
<td>41</td>
</tr>
</table>
</body>
</html>

Output :

Firstname Lastname Age

Priya Sharma 24
Arun Singh 32
Sam Watson 41

www.RNWMULTIMEDIA.com Page | 14
  Table Tag Properties (Attributes) :

Properties Description
Border border attribute of table tag in HTML to specify border.
Align It specify table Alignment (Left , Right ,Center).
Height It specify the HTML table Height (pixels or percentage).
Width It specify the HTML table width (pixels or percentage).
Bgcolor It specify background color for table.
Background It specify background image for table.
Cellpadding It specify padding for table header and table data.
Cellspacing It specify Space for table in between cell.
Rowspan It will divide a cell into multiple rows.
The number of divided rows will depend on rowspan values.
It used in <th> or <td> tag.
Colspan It will divide a cell into multiple Columns.
The number of divided columns will depend on colspan values.
It used in <th> or <td> tag.

8. HTML Form Tag :

 The HTML <form> element is used to create an HTML form for user input.

Syntax :

<form>
//form elements
</form>

HTML Form Attributes :

1. The Action Attribute :

o The action attribute defines the action to be performed when the form is
submitted.
o Usually, the form data is sent to a file on the server when the user clicks on
the submit button.

www.RNWMULTIMEDIA.com Page | 15
 2. The Method Attribute :

o The method attribute specifies the HTTP method to be used when

submitting the form data.
o The form-data can be sent as URL variables (with method="get") or as
HTTP post transaction (with method="post").

HTTP GET HTTP POST

In GET method we can not send large In POST method large amount of
amount of data rather limited data is sent data can be sent because the request
because the request parameter is appended parameter is appended into the body.
into the URL.

GET request is comparatively less secure POST request is comparatively more

because the data is exposed in the URL bar. secure because the data is not
exposed in the URL bar.

Request made through GET method are Request made through POST method
stored in Browser history. is not stored in Browser history.

GET method request can be saved as POST method request can not be
bookmark in browser. saved as bookmark in browser.

Request made through GET method are Request made through POST method
stored in cache memory of Browser. are not stored in cache memory of
Browser.

Data passed through GET method can be Data passed through POST method
easily stolen by attackers. can not be easily stolen by attackers.

In GET method only ASCII characters are In POST method all types of data is
allowed. allowed.

www.RNWMULTIMEDIA.com Page | 16
 The <form> element can contain one or more of the following form elements:

Tag Description

<form> It defines an HTML form to enter inputs by the used side.

<input> It defines an input control.

<textarea> It defines a multi-line input control.

<label> It defines a label for an input element.

<fieldset> It groups the related element in a form.

<legend> It defines a caption for a <fieldset> element.

<select> It defines a drop-down list.

<optgroup> It defines a group of related options in a drop-down list.

<option> It defines an option in a drop-down list.

<button> It defines a clickable button.

Example :
<html>
<body>
<form method="post">
<fieldset>
<legend> User Information: </legend> <br>

<label for="firstname">First Name: </label>

<input type="text" id="firstname" name="fname"/> <br><br>

<label for="lastname">Last Name: </label>

<input type="text" id="lastname" name="lname"/><br><br>

<label for="address">Address: </label>

<textarea rows="2" cols="20" id="address"></textarea> <br><br>

<label for="dob">Date of Birth: </label>

<input type="datetime-local" id="dob" name="date"/><br><br>

<label for="mno">Mobile No: </label>

<input type="number" id="mno" name="mobno"/><br><br>

www.RNWMULTIMEDIA.com Page | 17
 <label for="Gender">Gender:</label>
<input type="radio" id="male" name="gender" value="Male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="FeMale">
<label for="female">FeMale</label> <br><br>

<label for="country">Select Country:</label>

<select name="country" id="country">
<option value="india">india</option>
<option value="pakistan">pakistan</option>
<option value="africa">africa</option>
<option value="china">china</option>
<option value="other">other</option>
</select> <br> <br>

<label for="hobby">Hobby:</label>
<input type="checkbox" name="hobby1" value="Reading">
<label for="hobby1"> Reading</label>
<input type="checkbox" name="hobby2" value="Shopping">
<label for="hobby2"> Shopping</label>
<input type="checkbox" name="hobby3" value="Travelling" checked>
<label for="hobby3"> Travelling</label> <br> <br>

<label for="favcolor">Select your favorite color:</label>

<input type="color" id="favcolor" name="favcolor" value="#ff0000"><br><br>

<label for="vol">Volume (between 0 and 100):</label>

<input type="range" id="vol" name="vol" min="0" max="100"><br><br>

<label for="mail">Email Id: </label>

<input type="email" id="mail" name="email"/><br><br>

<label for="pass">Password: </label>

<input type="password" id="pass" name="password"/><br><br>

<input type="submit" name="submit" value="SUBMIT"/><br><br>

</fieldset>
</form>
</body>
</html>

www.RNWMULTIMEDIA.com Page | 18
 9. HTML Frame tag :

 HTML <frame> tag define the particular area within an HTML file where another
HTML web page can be displayed.

 A <frame> tag is used with <frameset>, and it divides a webpage into multiple
sections or frames, and each frame can contain different web pages.

Example :

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Frame tag</title>
5. </head>
6. <frameset cols="25%,50%,25%">
7. <frame src="frame1.html" >
8. <frame src="frame2.html">
9. <frame src="frame3.html">
</frameset>
</html>

Output :

www.RNWMULTIMEDIA.com Page | 19
 Frame Tag attributes :

Attribute Description

Frameborder It specifies whether to display a border around the frame or not, and its
default value is 1

Marginheight It specifies the top and bottom margins of the frame.

Marginwidth It defines the height of the margin between frames.

Name It is used to assign the name to the frame.

Scrolling It specifies the existence of the scrollbar for overflowing content.

(value : yes , no, auto)

Src It specifies the URL of the document which we want to display in a frame.

10. HTML Links :

 HTML links are defined with the <a> tag.

 The link's destination is specified in the href attribute.

Example : Output :

<!DOCTYPE html> HTML Links

<html>
<body> HTML links are defined with the
<h2>HTML Links</h2> a tag:
<p>HTML links are defined with the a tag:</p>
This is a link
<a href="https://www.link.com">This is a
link</a>

</body>
</html>

www.RNWMULTIMEDIA.com Page | 20
11. HTML Bookmarks :

HTML links can be used to create bookmarks.

Example :

<html>
<body>
Bookmark example <br>
<a href="#bottom">GoTo Bottom</a>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>

<h2 id="bottom" >Bookmark come here <br>

Bottom</h2>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

12. HTML Images :

 HTML images are defined with the <img> tag.

 HTML Img tag Attributes :

Attribute Description

Src the url of an image

Align Deprecated− Specifies the alignment for the image.

Alt Specifies alternate text

Border Deprecated − Specifies the width of the image border.

Height Specifies the height of the image.

Width Sets the width of an image in pixels or in %.

Hspace white space to be inserted to the left and right of the object.

Vspace white space to be inserted to the top and bottom of the object.

www.RNWMULTIMEDIA.com Page | 21
 Example :

<!DOCTYPE html>
<html>
<head>
<title>HTML Tag</title>
</head>
<body>
<img src = https://www.tutorialspoint.com/images/html.gif alt = "HTML Tutorial"
height = "150" width = "140" />
</body>
</html>
Output :

 What is CSS ?

 CSS stands for Cascading Style Sheets.

 CSS describes how HTML elements are to be displayed on screen, paper, or in other
media.

 CSS saves a lot of work. It can control the layout of multiple web pages all at once.

 CSS is designed to enable the separation of presentation and content, including layout,
colors, and fonts.

 CSS Benefits :

 CSS saves a lot of time.

 Easy Formatting Changes.
 It improves the loading speed of the page.
 CSS has the ability to re-position.
 It has better device compatibility.
 It reduces the file transfer size.

www.RNWMULTIMEDIA.com Page | 22
 CSS Syntax :

 A CSS rule consists of a selector and a declaration block.

 The selector points to the HTML element you want to style.

 The declaration block contains one or more declarations separated by semicolons.

 Each declaration includes a CSS property name and a value, separated by a colon.

 Multiple CSS declarations are separated with semicolons, and declaration blocks are
surrounded by curly braces.

Example :
In this example all <p> elements will be center-aligned, with a red text color:
p{
color: red;
text-align: center;
}

 CSS Selectors types:

 CSS selectors are used to "find" (or select) the HTML elements you want to style.

1) The element selector selects HTML elements based on the element name.

Example :
In this example all <p> elements will be center-aligned, with a red text color:
p{
color: red;
text-align: center;
}

www.RNWMULTIMEDIA.com Page | 23
2) The element selector selects HTML elements based on the id.

 The id selector uses the id attribute of an HTML element to select a specific

element.

 The id of an element is unique within a page, so the id selector is used to select

one unique element!

 To select an element with a specific id, write a hash (#) character, followedby
the id of the element.

 An id name cannot start with a number.

Example :

The CSS rule below will be applied to the HTML element with id="pa1":
#pa1 {
text-align: center;
color: red;
}

3) The element selector selects HTML elements based on the class.

 The class selector selects HTML elements with a specific class attribute.

 To select elements with a specific class, write a period (.) character, followed by
the class name.

 An class name cannot start with a number.

Example :

The CSS rule below will be applied to the HTML element with class="pa1":
.pa1 {
text-align: center;
color: red;
}

4) Universal Selector [*] :- selects all HTML elements on the page.

Example :

The CSS rule below will affect every HTML element on the page:
*{
text-align: center;
color: blue;
}

www.RNWMULTIMEDIA.com Page | 24
5) Grouping Selector :-

 The grouping selector selects all the HTML elements with the Same style
definitions.

 To group selectors, separate each selector with a comma.

Example :

In this example we have grouped the selectors from the code above:

h1, h2, p {
text-align: center;
color: red;
}

6) The Attribute Selectors :-

 You can also apply styles to HTML elements with particular attributes.

Example :

This style rule will match all the input elements having a type attribute with a value
of text color.

input[type = "text"] {
color: #000000;
}

 Types to Insert CSS:

 There are three ways of inserting a stylesheet:

1. Inline CSS

2. External CSS

3. Internal CSS

1) Inline CSS :

 An inline style may be used to apply a unique style for a single element.

 To use inline styles, add the style attribute to the relevant element.

 The style attribute can contain any CSS property.

www.RNWMULTIMEDIA.com Page | 25
 Example :
Inline styles are defined within the "style" attribute of the relevant element:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue; text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>

2) External CSS:

 With an external style sheet, you can change the look of an entire
website by changing just one file!
 Each HTML page must include a reference to the external style sheet file inside
the <link> element, inside the head section.
 An external style sheet can be written in any text editor, and must be saved with a
.css extension.
 The external .css file should not contain any HTML tags.

Example :
External styles are defined within the <link> element, inside the <head> section
of an HTML page:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is aheading</h1>
<p>This is aparagraph.</p>
</body>
</html>

"mystyle.css"
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}

www.RNWMULTIMEDIA.com Page | 26
3) Internal CSS:

 An internal style sheet may be used if one single HTML page has a unique style.

 The internal style is defined inside the <style> element, inside the head section.

Example :
Internal styles are defined within the <style> element, inside the <head> section
of an HTML page:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}

h1 {
color:
maroon;
margin-left:
40px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

www.RNWMULTIMEDIA.com Page | 27
 Cascading Order :

 All the styles in a page will "cascade" into a new "virtual" style sheet by the
following rules, where number one has the highest priority:

1. Inline style (inside an HTML element).

2. External and internal style sheets (in the head section).

3. Browser default.

Example :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
body {background-color: yellow;}
</style>
</head>
<body style="background-color: lavender">
<h1>Multiple Styles Will Cascade into One</h1>
<p>Here, the background color of the page is set with inline CSS, and also with an
internal CSS, and also with an external CSS. </p>
<p>Try experimenting by removing styles to see how the cascading styles heets work
(try removing the inline CSS first, then the internal, then the external). </p>
</body>
</html>

www.RNWMULTIMEDIA.com Page | 28
  CSS property :

1) CSS Color :

 CSS uses color values to specify a color.

 You can specify your color values in various formats.

Format Syntax Example

Hex Code #RRGGBB p{color:#FF0000;}

Short Hex Code #RGB p{color:#6A7;}
RGB % rgb(rrr%,ggg%,bbb%) p{color:rgb(50%,50%,50%);}
RGB Absolute rgb(rrr,ggg,bbb) p{color:rgb(0,0,255);}
Keyword aqua, black, etc. p{color:teal;}

1.1 CSS Background Color : Thisproperty is used to set the background color of
anelement.

Example :

<html>
<head>
</head>

<body>
<pstyle="background-color:yellow;">
This text has a yellow background color.
</p>
</body>
</html>

Output :

This text has a yellow background color.

www.RNWMULTIMEDIA.com Page | 29
 1.2 CSS Text Color : The color property is used to set the color of a text.

Example :

<html>
<head>
</head>

<body>
<pstyle="color:red;">
This text will be written in red.
</p>
</body>
</html>

Output :

This text will be written in red.

2) CSS Background :

 The CSS background properties are used to add background effects for
elements.

 The following CSS background properties:

 background-color :used to set the background color of an element.

 background-image :used to set the background image of an element.
 background-repeat : used to control the repetition of an image in the background.
 background-attachment : used to control the scrolling of an image in the background.
 background-position :used to control the position of an image in the background.

www.RNWMULTIMEDIA.com Page | 30
Example :

<html>

<head>
<style>
body {
background-image: url("img_tree.png");
background-repeat: no-repeat; //value : repeat,repeat-x,repeat-y
background-position: right top;
background-attachment: fixed;//scroll
}
</style>
</head>

<body>
<p>Tutorials point</p>
</body>
</html>

3) CSS Border :

 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 you can change :

I. The border-color: specifies the color of a border.

II. The border-style : specifies the style of a border.

III. The border width : width specifies the width of a border.

IV. The Rounded border : border-radius property is used to add rounded

borders to an element.

The border-color:

The border-color property allows you to change the color of the border surrounding
an element.

 border-bottom-color : changes the color of bottom border.

 border-top-color: changes the color of top border.
 border-left-color : changes the color of left border.
 border-right-color : changes the color of right border.

www.RNWMULTIMEDIA.com Page | 31
Example :
<html>
<head>
<styletype="text/css">
p.e1 {
border:1px solid;
border-bottom-color: green;
border-top-color: red;
border-left-color: black;
border-right-color: blue;
}
p.e2 {
border:1px solid;
border-color: green;
}
</style>
</head>
<body>
<pclass="e1">
This example is showing all borders in different colors.
</p>
<pclass="e2">
This example is showing all borders in green color only.
</p>
</body>
</html>
Output :

This exmple is showing all borders in different colors.

This example is showing all borders in green color only.

The border-style : The border-style property specifies what kind of border to display.

 none : No border.
 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.

www.RNWMULTIMEDIA.com Page | 32
Example :

<html>

<body>
<p style="border-width:4px; border-style:none;">
This is a border with none width.
</p>
<p style="border-width:4px; border-style:solid;">
This is a solid border.
</p>
<p style="border-width:4px; border-style:dashed;">
This is a dashed border.
</p>
<p style="border-width:4px; border-style : double;">
This is a double border.
</p>
<p style="border-width:4px; border-style : groove;">
This is a groove border.
</p>
<p style="border-width:4px; border-style : ridge">
This is a ridge border.
</p>
<p style="border-width:4px; border-style : inset;">
This is a inset border.
</p>
<p style="border-width:4px; border-style : outset;">
This is a outset border.
</p>
<p style="border-width:4px; border-style : hidden;">
This is a hidden border.
</p>

<p style="border-width:4px;
border-top-style : solid;
border-bottom-style : dashed;
border-left-style : groove;
border-right-style : double; ">
This is a a border with four different styles.
</p>
</body>
</html>

www.RNWMULTIMEDIA.com Page | 33
Output :

This is a border with none width.

This is a solid border.

This is a dahsed border.

This is a double border.

This is a groove border.

This is aridge border.

This is a inset border.

This is a outset border.

This is a hidden border.

This is a a border with four different styles.

The border width :

 The border-width property allows you to set the width of an element borders.
 The value of this property could be either a length in px, pt or cm or it should be
set to thin, medium or thick.
 You can individually change the width of the bottom, top, left, and right borders
of an element using the following properties −

 border-bottom-width : changes the width of bottom border.

 border-top-width : changes the width of top border.
 border-left-width : changes the width of left border.
 border-right-width : changes the width of right border.

www.RNWMULTIMEDIA.com Page | 34
Example :
<html>
<body>
<p style="border-width:4px; border-style:solid;">
This is a solid border whose width is 4px.
</p>
<p style="border-width:4pt; border-style:solid;">
This is a solid border whose width is 4pt.
</p>
<p style="border-width:thin; border-style:solid;">
This is a solid border whose width is thin.
</p>
<p style="border-width:medium; border-style:solid;">
This is a solid border whose width is medium;
</p>
<p style="border-width:thick; border-style:solid;">
This is a solid border whose width is thick.
</p>

<p style="border-bottom-width:4px;
border-top-width:10px;
border-left-width:2px;
border-right-width:15px;
border-style:solid;">
This is a border with four different width.
</p>
</body>
</html>

Output :

This is a solid border whose width is 4px.

This is a solid border whose width is 4pt.

This is a solid border whose width is thin.

This is a solid border whose width is medium;

This is a solid border whose width is thick.

This is a a border with four different width.

www.RNWMULTIMEDIA.com Page | 35
 The Rounded border :

Example :
<html>
<head>
<style>
p.n {
border: 2px solid red;
padding: 5px;
}
p.r1 {
border: 2px solid red;
border-radius: 5px;
padding: 5px;
}
p.r2 {
border: 2px solid red;
border-radius: 8px;
padding: 5px;
}
p.r3 {
border: 2px solid red;
border-radius: 12px;
padding: 5px;
}
</style>
</head>
<body>
<h2>The border-radius Property</h2>
<p>This property is used to add rounded borders to an element:</p>

<p class="n">Normal border</p>

<p class="r1">Round border</p>
<p class="r2">Rounder border</p>
<p class="r3">Roundest border</p>
</body>
</html>

Output :

www.RNWMULTIMEDIA.com Page | 36
4) CSS Margin :

 Margins are used to create space around elements, outside of any defined borders.
 We can set the different sizes of margins for individual sides(top, right, bottom,
left).

 CSS Margin Properties :

Property Description

margin This property is used to set all the properties in one declaration.
margin-left it is used to set left margin of an element.
margin-right It is used to set right margin of an element.
margin-top It is used to set top margin of an element.
margin-bottom It is used to set bottom margin of an element.

 CSS Margin Values :

Value Description

auto This is used to let the browser calculate a margin.

length It is used to specify a margin pt, px, cm, etc. its default value is 0px.
% It is used to define a margin in percent of the width of containing
element.
inherit It is used to inherit margin from parent element.

 Margin : Shorthand Property :

o CSS shorthand property is used to shorten the code. It specifies all the margin
properties in one property.

o There are four types to specify the margin property. You can use one of them.

 margin: 50px 100px 150px 200px;

 margin: 50px 100px 150px;
 margin: 50px 100px;
 margin 50px;
 It identifies that :
top margin value is 50px
right margin value is 100px
bottom margin value is 150px
left margin value is 200px

www.RNWMULTIMEDIA.com Page | 37
1. Example :
2.
3. <!DOCTYPE html>
4. <html>
5. <head>
6. <style>
7. p{
8. background-color: pink;
9. }
p.ex {
margin: 50px 100px 150px 200px;
}
</style>
</head>
<body>
<p>This paragraph is not displayed with specified margin. </p>
<p class="ex">This paragraph is displayed with specified margin.</p>
</body>
</html>

Output :

This paragraph is not displayed with specified margin.

This paragraph is displayed with specified margin.

5) CSS Box Model :

 The CSS box model is a container that contains multiple properties including
borders, margin, padding, and the content itself.
 It is used to create the design and layout of web pages.
 It can be used as a toolkit for customizing the layout of different elements.

www.RNWMULTIMEDIA.com Page | 38
  Explanation of the different parts:

 Content : This property is used to displays the text, images, etc, that can be
sized using the width & height property.
 Padding : This property is used to create space around the element, inside
any defined border.
 Border : This property is used to cover the content & any padding, & also
allows to set the style, color, and width of the border.
 Margin : This property is used to create space around the element.

Example :

<!DOCTYPE html>
<head>
<title>CSS Box Model</title>
<style>
.c1 {
margin-left: 60px;
border: 50px solid red;
width: 300px;
height: 200px;
text-align: center;
padding: 50px;
}
.c2 {
font-size: 42px;
font-weight: bold;
color: burlywood;
margin-top: 60px;
background-color: #2a2a5a;
}
.c3 {
font-size: 20px;
font-weight: bold;
background-color: #c5c5db;
}
</style>
</head>

<body>
<div><h1>CSS Box-Model Property</h1></div>
<div class="c1">
<div class="c2">Red & White college</div>
<div class="c3">
A computer IT Department
</div>
</div>
</body>
</html>

www.RNWMULTIMEDIA.com Page | 39
6) CSS Text :

 CSS text formatting properties is used to format text and style text.

 CSS text formatting include following properties:

Text-color Text-direction
Text-alignment Text-shadow
Text-decoration Letter spacing
Text-transformation Line height
Text-indentation Word spacing

Text-color :

o Text-color property is used to set the color of the text.

Text-alignment :

o Text alignment property is used to set the horizontal alignment of the text.
o Text alignment property include value : left , center , right , justify

Example : Output :

<!DOCTYPE html>
<html> This is heading 1
<head>
<style> This is an ordinary paragraph.
body {
color: blue;
}
h1 {
color: green;
text-align: center;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<p>This is an ordinary paragraph. </p>
</body>
</html>

www.RNWMULTIMEDIA.com Page | 40
 Text-decoration :

o The text-decoration-style CSS property sets the style of the lines.

o CSS text-decoration-style include following properties:

Property Description

text-decoration Sets all the text-decoration properties in one declaration.

text-decoration-color Specifies the color of the text-decoration.
text-decoration-line Specifies the kind of text decoration to be used.
(value : overline, line-through, underline, overline underline)
text-decoration-style Specifies the style of the text decoration.
(value : solid, dotted, double, dashed, wavy)
text-decoration-thickness Specifies the thickness of the text decoration line.
(default value : auto)

Example :

<html>
<head>
<style>
h1 {
text-decoration: overline;
text-decoration-color: red;
text-decoration-style: double;
text-decoration-thickness: 5px;
}
h3 {
text-decoration: underline red double 5px;
}
</style>
</head>
<body>

<h1>text decoration</h1>
<h2>text decoration</h2>
<h3>text decoration</h3>
<p><strong>Note:</strong> It is not recommended to underline text that is not a link, as this
often confuses
the reader.</p>

</body>
</html>

www.RNWMULTIMEDIA.com Page | 41
 Text-transformation :

o The text-transform property is used to specify uppercase and lowercase letters in a

text.
o text-transform properties value is uppercase , lowercase , capitalize .

Text-indentation :

o The text-indent property specifies the indentation of the first line in a text-block.

Example :

<!DOCTYPE html>
<html>
<head>
<style>
h2 {
text-transform: uppercase;
}
h3 {
text-transform: lowercase;
}
h4 {
text-transform: capitalize;
}
p{
text-indent: 50px;
}

</style>
</head>
<body>

<h1>Using the text-transform property</h1>

<h2>This text is transformed to uppercase.</h2>

<h3>This text is transformed to lowercase.</h3>
<h4>This text is capitalized.</h4>

<p>The text-indent property in CSS is used to define the indentation of the first line in each block
of text. It also take negative values. It means if the value is negative then the first line will be
indented to the left. length: It is used to set fixed indentation in terms of px, pt, cm, em etc.</p>

</body>
</html>

www.RNWMULTIMEDIA.com Page | 42
 Text-direction :

o The direction property specifies the text direction/writing direction within a block -
level element.(value : ltr , rtl).

Text-shadow :

o Text shadow property is used to add shadow to the text.

o It specify the horizontal size, vertical size and shadow color for the text.

Letter spacing :

o This property is used to specify the space between the characters of the text.

Line height :

o This property is used to set the space between the lines.

Word spacing :

o Word spacing is used to specify the space between the words of the line.

Example :

<html>
<head>
<style>

h1 { text-shadow: 2px 2px red; } h2 { text-shadow: 2px 2px 5px red; }

p.a { direction: rtl; } p.b { letter-spacing: 5px; } p.c { word-spacing: 10px; } p.d { line-height: 0.7;
}

</style>
</head>
<body>

<h1>The direction Property</h1>

<h2>The direction Property</h2>

<p>This text goes from left to right. This is default.</p>

<p class="a">This text goes from right to left.</p>
<p class="b">This text is Letter Spacing</p>
<p class="c">This text is word Spacing</p>
<p class="d">This text is Line Height Spacing<br>This text is Line Height Spacing</p>
</body>

</html>

www.RNWMULTIMEDIA.com Page | 43
7) CSS Fonts :

 CSS Font property is used to control the look of texts.

 These are some important font attributes:

Property Description

CSS Font color This property is used to change the color of the text.
CSS Font family This property is used to change the face of the font.
CSS Font size This property is used to increase or decrease the size of the
font.
CSS Font style This property is used to make the font bold, italic or oblique.
CSS Font variant This property creates a small-caps effect.
CSS Font weight This property is used to increase or decrease the boldness and
lightness of the font.

CSS Font family :

o CSS font family can be divided in two types:

1. Generic family : It includes Serif, Sans-serif, Cursive, Fantasy and

Monospace.
2. Font family : It specifies the font family name like Arial, New Times
Roman etc.

CSS Font size :

o CSS font size property is used to change the size of the font.

www.RNWMULTIMEDIA.com Page | 44
 CSS Font style :

o CSS Font style property defines what type of font you want to display.
o It may be italic, oblique, or normal.

CSS Font variant :

o CSS font variant property specifies how to set font variant of an element.
o It may be normal and small-caps.

CSS Font weight :

o CSS font weight property defines the weight of the font and specify that how
bold a font is.
o The possible values of font weight may be normal, bold or number (100,
200..... upto 900).

Example :
<html>
<head>
<style>

h1 { font-family: sans-serif; font-style: italic; }

h2 { font-family: serif; font-style: oblique; }
p { font-family: 'Times New Roman'; font-weight:bold;}
h3 { font-variant: normal; }
p.a { font-variant: small-caps; font-weight:500;}

</style>
</head>
<body>
<h1>This heading is shown in sans-serif.</h1>
<h2>This heading is shown in serif.</h2>
<p>This paragraph is written in Times new roman.</p>
<h3>This heading is shown in normal font.</h3>
<p class="a">This paragraph is shown in small font.</p>
<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:20px;"> This font size is 20 pixels. </p>
</body>
</html>

www.RNWMULTIMEDIA.com Page | 45