CHP1:

Internet:
● It is the largest network in the world that connects hundreds of thousands of individual
networks all over the world.
● The popular term for the Internet is the “information highway”.
● Rather than moving through geographical space, it moves your ideas and information
through cyberspace – the space of electronic movement of ideas and information.
● No one owns it.
● It has no formal management organization.
● As it was originally developed by the Department of defense, this lack of centralization
made it less vulnerable to wartime or terrorist attacks.
● To access the Internet, an existing network need to pay a small registration fee and agree
to certain standards based on the TCP/IP (Transmission Control Protocol/Internet
Protocol .

The uses of the Internet:

● Send e-mail messages.
● Send (upload) or receive (down load) files between computers.
● Participate in discussion groups, such as mailing lists and newsgroups.
● Surfing the web.

How to access the Internet?

● Many schools and businesses have direct access to the Internet using special high- speed
communication lines and equipment.
● Students and employees can access through the organization’s local area networks (LAN)
or through their own personal computers.
● Another way to access the Internet is through Internet Service Provider (ISP).
● To access the Internet, an existing network need to pay a small registration fee and agree
to certain standards based on the TCP/IP (Transmission Control Protocol/Internet
Protocol) reference model.
● Each organization pays for its own networks and its own telephone bills, but those costs
usually exist independent of the internet.
● The regional Internet companies route and forward all traffic, and the cost is still only
that of a local telephone call.
 CHP1:

Internet Service Provider (ISP)

● A commercial organization with permanent connection to the Internet that sells
temporary connections to subscribers.
● An ISP has the equipment and the telecommunication line access required to have a point
of presence on the internet for the geographic area served.
● Examples: Hathway, Prodigy, America Online, Microsoft network, AT&T Networks.

What is the Web?

● The Web (World Wide Web) consists of information organized into Web pages containing
text and graphic images.
● It contains hypertext links, or highlighted keywords and images that lead to related
information.
● A collection of linked Web pages that has a common theme or focus is called a Web site.
● The main page that all of the pages on a particular Website are organized around and link
back to is called the site’s home page.

How to access the Web?

● Once you have your Internet connection, then you need special software called a browser
to access the Web.
● Web browsers are used to connect you to remote computers, open and transfer files,
display text and images.
● Web browsers are specialized programs.
● Examples of Web browser: Netscape Navigator (Navigator) and Internet Explorer.

Client/Server Structure of the Web

● Web is a collection of files that reside on computers, called Web servers, that are located
all over the world and are connected to each other through the Internet.
● When you use your Internet connection to become part of the Web, your computer
becomes a Web client in a worldwide client/server network.
● A Web browser is the software that you run on your computer to make it work as a web
client.

Web Essentials:
In the context of Internet Programming, Web Essentials refers to the foundational concepts, technologies,
and tools needed to build dynamic and interactive websites or web applications that communicate over the
internet.
 CHP1:

Client:
The software that resides on the remote machine, communicates with the server, fetches the
information, processes it, and then displays it on the remote machine is called the client.
● initiates contact with server (―speaks firstǁ)
● typically requests service from server
● Web: client implemented in browser

Server:
● Web server is a computer where the web content is stored.
● Basically a web server is used to host the web sites but there exists other web servers also
such as gaming, storage, FTP, email etc.
● A web server is software and hardware that uses HTTP (Hypertext Transfer Protocol) and
other protocols to respond to client requests made over the World Wide Web.
● The main job of a web server is to display website content through storing, processing
and delivering web pages to users.

Web Page: A web page is a document or resource of information that is suitable for the World
Wide Web and can be accessed through a web browser.
Website: A collection of pages on the World Wide Web that are accessible from the same URL
and typically residing on the same server.
URL: Uniform Resource Locator, the unique address which identifies a resource on the Internet
for routing purposes.

Client-Server paradigm:
 CHP1:

● The Client-Server paradigm is the most prevalent model for distributed computing
protocols.
● It is the basis of all distributed computing paradigms at a higher level of abstraction.
● It is service-oriented, and employs a request- response protocol.

● Client: When we talk about the word Client, it means to talk of a person or an
organization using a particular service. Similarly in the digital world a Client is a
computer (Host) i.e. capable of receiving information or using a particular service from
the service providers (Servers).

● Servers: Similarly, when we talk about the word Servers, It mean a person or medium
that serves something. Similarly in this digital world a Server is a remote computer
which provides information (data) or access to particular services.

Advantages of Client-Server model:

● Centralized system with all data in a single place.
● Cost efficiency requires less maintenance cost and Data recovery is possible.
● The capacity of the Client and Servers can be changed separately.

Disadvantages of Client-Server model:

● Clients are prone to viruses, Trojans and worms if present in the Server or uploaded into
the Server.
● Data packets may be spoofed or modified during transmission.
● Phishing or capturing login credentials or other useful information of the user are
common and MITM(Man in the Middle) attacks are common.

Protocols
● The Web uses certain protocols for transferring and representing data.
● Set of rules for proper and meaningful communication.
● Networks have to follow these rules to successfully transmit data.
1- HTTP:
The Hypertext Transfer Protocol(HTTP) is used by the browser to tell the host computer what
file it wants to retrieve.
2- IP:
The Internet Protocol (IP) is used for routing IP packets between logan's computer and the server
based on IP addresses.
3- TCP:
The Transmission Control Protocol(TCP) is used for making sure the IP packets all arrive
correctly and in order.
 CHP1:

HTTP:
● HTTP stands for HyperText Transfer Protocol.
● It is a protocol used to access the data on the World Wide Web (www).
● The HTTP protocol can be used to transfer the data in the form of plain text, hypertext,
audio, video, and so on.
● This protocol is known as HyperText Transfer Protocol because of its efficiency that
allows us to use it in a hypertext environment where there are rapid jumps from one
document to another document.
● HTTP is similar to the FTP as it also transfers the files from one host to another host.
● But, HTTP is simpler than FTP as HTTP uses only one connection, i.e., no control
connection to transfer the files.
● HTTP is used to carry the data in the form of MIME-like format.
● HTTP is similar to SMTP as the data is transferred between client and server.
● The HTTP differs from the SMTP in the way the messages are sent from the client to the
server and from server to the client.
● SMTP messages are stored and forwarded while HTTP messages are delivered
immediately.

Features of HTTP
● Connectionless protocol
● Media independent
● Stateless

Messages:
HTTP messages are of two types: request and response. Both the message types follow the same
message format.
 CHP1:

Request Message: The request message is sent by the client that consists of a request line,
headers, and sometimes a body.
Response Message: The response message is sent by the server to the client that consists of a
status line, headers, and sometimes a body.
 CHP1:

Uniform Resource Locator (URL)

● A client that wants to access the document in an internet needs an address and to facilitate
the access of documents, the HTTP uses the concept of Uniform
● Resource Locator (URL).
● The Uniform Resource Locator (URL) is a standard way of specifying any kind of
information on the internet.
● The URL defines four parts: method, host computer, port, and path.
 CHP1:

Static vs Dynamic Websites

HTML5:
● Hyper text markup language.
● Basic building block of the web.
● It defines the meaning and structure of the web.
● Hypertext: hyperlinks that an html page may contain or links that connect web pages to one
another.
● Markup language: refers to the way tags are used to define the page layout and elements
within the page or used to define structure of web pages.
● Html can be used for:
1.Web pages development
2. Internet navigation
3. Interactive GUI
4. Game development
 CHP1:

HTML STRUCTURE:
● The <!DOCTYPE html> declaration defines that this document is an HTML5 document.
● The <html> element is the root element of an HTML page.
● The <head> element contains meta information about the HTML page.
● The <title> element specifies a title for the HTML page (which is shown in the browser's
title bar or in the page's tab).
● The <body> element defines the document's body, and is a container for all the visible
contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
● The <h1> element defines a large heading.
● The <p> element defines a paragraph.

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>

HTML Page Structure

● Web pages can be created and modified by using professional HTML editors.
● However, for learning HTML we recommend a simple text editor like Notepad (PC) or
TextEdit (Mac).
● We believe that using a simple text editor is a good way to learn HTML.
● Follow the steps below to create your first web page with Notepad or TextEdit.
● Step 1: Open Notepad (PC)
● Windows 8 or later:
● Open the Start Screen (the window symbol at the bottom left on your screen).
 CHP1:

Type Notepad.
● Windows 7 or earlier:
● Open Start > Programs > Accessories > Notepad

● Step 1: Open TextEdit (Mac)

● Open Finder > Applications > TextEdit
● Also change some preferences to get the application to save files
correctly. In Preferences > Format > choose "Plain Text"
● Then under "Open and Save", check the box that says "Display HTML files as HTML
code instead of formatted text".
● Then open a new document to place the code.

● Step 2: Write Some HTML

● Write or copy the following HTML code into Notepad:

● Step 3: Save the HTML Page

● Save the file on your computer. Select File > Save as in the Notepad menu.
● Name the file "index.htm" and set the encoding to UTF-8 (which is the preferred
encoding for HTML files).
● You can use either .htm or .html as file extension.
 CHP1:

● Step 4: View the HTML Page in Your Browser

● Open the saved HTML file in your favorite browser (double click on the file, or
right-click - and choose "Open with").
● The result will look much like this:

The <!DOCTYPE> Declaration

● The <!DOCTYPE> declaration represents the document type, and helps browsers to
display web pages correctly.
● It must only appear once, at the top of the page (before any HTML tags).
● The <!DOCTYPE> declaration is not case sensitive.
● The <!DOCTYPE> declaration for HTML5 is:
<!DOCTYPE html>
 CHP1:

HTML Headings
● HTML headings are defined with the <h1> to <h6> tags.
● <h1> defines the most important heading. <h6> defines the least important heading:

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

HTML Paragraphs

● The HTML <p> element represents a paragraph.

● Paragraphs are usually represented in visual media as blocks of text separated from
adjacent blocks by blank lines and/or first-line indentation, but HTML paragraphs can be
any structural grouping of related content, such as images or form fields.
● Paragraphs are block-level elements, and notably will automatically close if another
block-level element is parsed before the closing </p> tag.
● We can use align attribute of the paragraph tag to specify the text alignment for the text
inside the paragraph, ex.< p align= “center”> our test </p>
HTML Colors
● We can use color values for mainly two attributes named bgcolor and color.
 CHP1:

● Possible values for the color are, many are predefined (red, blue, green, ...)
● All colors can be specified as a six character hexadecimal value: #RRGGBB
1. #FF0000 – red
2. #888888 – gray
3. #00FF00 –green
4. #000000 – black
● For example : <h1 style="background-color:#ff6347;">...</h1>
HTML Fonts
● The <font> tag specifies the font face, font size, and color of text.
<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
</body>
</html>

HTML List
● HTML lists allow web developers to group a set of related items in lists.
1. Unordered HTML List
● An unordered list starts with <ul> tag.
● Each list item starts with <li> tag.
● The list items will be marked with bullets (small black circles) by default.
CODE:
 CHP1:

OUTPUT:

2. Ordered HTML List

● An ordered list starts with the <ol> tag.
● Each list item starts with the <li> tag.
● The list items will be marked with numbers by default.

Code:
<!DOCTYPE html>
<html>
<body>
<h2>An ordered HTML list</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Output:

Anchor Tag (Hyperlinks)

● The <a> tag defines a hyperlink, which is used to link from one page to another.
● An Anchor tag have 3 important attributes:
1. the href attribute (hypertext reference) defines the target address of the document.
2. the name attribute of the anchor tag can be used to enable users to “jump” to a specific point
on a page.
3. the target attribute specifies how the destination page or the target document should be
 CHP1:

opened. target="_ blank" is used for opening of the target page in a new tab.
● Example, <a href="http://www.google.com"> Google </a>
● Example, <a href=“./index.php"> Home </a>.
● Example, <a href=“#reference"> Reference Section. </a>

HTML Images
● The HTML <img> element embeds an image into the document.
● Syntax: < img src = “ pathToImage” />
● Attributes:
1. the src attribute is required, and contains the path to the image we want to embed.
2. the alt attribute holds a text description of the image, which isn't mandatory but is
incredibly useful for accessibility (screen readers read this description out to their users
so they know what the image means). Alt text is also displayed on the page if the image
can't be loaded for some reason: for example, network errors, content blocking etc…
3. the width & height attribute can be in units of pixels or percentage of page or frame.
4. the align attribute (currently deprecated) will aligns the image with its surrounding
context (Use the float and/or vertical-align CSS properties instead of this attribute.

CODE:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Image</h2>
<img src="pic_trulli.jpg" alt="Trulli" width="500" height="333">
</body>
</html>

HTML Tables:
● HTML tables allow web developers to arrange data into rows and columns.
● A table in HTML consists of table cells inside rows and columns.
● Each table cell is defined by a <td> ta and </td> tag.
● <td> stands for table data.
● Each table row starts with a <tr> tag and ends with </tr>.
 CHP1:

● Sometimes you want your cells to be headers. In those cases use the <th> tag instead of
<td> tag.
Code:

OUTPUT:

HTML Forms
● HTML forms are used to create GUIs on Web pages
● Usually the purpose is to ask the user for information
 CHP1:

● The information is then sent back to the server

● A form is an area that can contain form elements
● <form>
.
form elements
.
</form>
● <form> element is a container for different types of input elements, such as: text fields,
checkboxes, radio buttons, submit buttons, etc.

The <input> Element:

Text field:
● The <input type=“text”> defines a single-line input field for text input.
● Code
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
● Output

The <label> Element:

● The <label> tag defines a label for many form elements.
● The <label> element is useful for screen-reader users, because the screen-reader will
 CHP1:

read out loud the label when the user focus on the input element.

Radio buttons:
● The <input type="radio"> defines a radio button.
● Radio buttons let a user select ONE of a limited number of choices.
● Code:

OUTPUT:

Checkboxes:
● The <input type=“checkbox”> defines a checkbox.
● Checkboxes let a user select ZERO or MORE options of a limited number of choices.
● Code:
 CHP1:

● OUTPUT:

The Submit Button:

● The <input type="submit"> defines a button for submitting the form data to a
form-handler.
● The form-handler is typically a file on the server with a script for processing input data.
● The form-handler is specified in the form’s action attribute.
● Code:
 CHP1:

● OUTPUT:
 CHP1:

HTML Control Elements

1. Audio element:
● The HTML <audio> element is used to play an audio file on a web page.
● Code:

● OUTPUT:

2. Video element:
● The <video> element is used to show a video on a web page.
● Code:
 CHP1:

Semantic Elements:
● A semantic element clearly describes its meaning to both the browser and the developer.
● Examples of non-semantic elements: <div> and <span> - Tells nothing about its
content.
● Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its
content.
● In HTML there are some semantic elements that can be used to define different parts of a
web page:
 CHP1:

Drag and Drop

● Drag and drop is a very common feature. It is when you "grab" an object and drag it to a
different location.

DRAG:
● Make an Element Draggable : Set the draggable attribute to true.
● < img draggable= “true”>
 CHP1:

● function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
● Function is called , drag(event), that specifies what data to be dragged.
● The dataTransfer.setData() method sets the data type and the value of the dragged data.
● In this case, the data type is "text" and the value is the id of the draggable element.

● By default, data/elements cannot be dropped in other elements. To allow a drop, we must

prevent the default handling of the element.
● This is done by calling the event.preventDefault() method for the ondragover event.

Drop:
● function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}

• Call preventDefault() to prevent the browser default handling of the data (default is open
as link on drop).
• Get the dragged data with the dataTransfer.getData() method. This method will return any
data that was set to the same type in the setData() method.
• The dragged data is the id of the dragged element.
• Append the dragged element into the drop element.

● Code:
 CHP1:

● Output:
 CHP1:

CSS 3
• 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
• External stylesheets are stored in CSS files
• CSS is used to define styles for your web pages, including the design, layout and variations
in display for different devices and screen sizes.
• 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 :
• p{
color: red;
text-align: center;
}
• P is a selector in css (it points to the html element you want to style: <p>).
• Color is a property, and red is the property value.
• Text-align is a property, and center is the property value.

CSS Selectors:
• CSS selectors are used to "find" (or select) the HTML elements you want to style.
• We can divide css selectors into five categories:
1. Simple selectors (select elements based on name, id, class)
2. Combinator selectors (select elements based on a specific relationship between them)
3. Pseudo-class selectors (select elements based on a certain state)
4. Pseudo-elements selectors (select and style a part of an element)
5. Attribute selectors (select elements based on an attribute or attribute value)

CSS Id selector:
• 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, followed by the id of the
element.
 CHP1:

• The css rule on next slide will be applied to the html element with id="para1":
• Code:

Output:

CSS class Selector

● 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.
● In this example all html elements with class="center" will be red and center-aligned:
Code:
 CHP1:

Output:

CSS universal selector

● The universal selector (*) selects all HTML elements on the page.
Code:

Output:
 CHP1:

3 ways to insert CSS

• External css:
❑ Each html page must include a reference to the external style sheet file inside the
<link> element, inside the head section. External styles are defined within the <link>
element, inside the <head> section of an HTML page.
• 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.
• 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.
● External CSS code:
 CHP1:

OUTPUT:
 CHP1:

● Internal CSS code:

CODE:
OUTPUT:
 CHP1:

● Inline CSS code:

Code:

Output:

Rule cascading
● A cascading style sheet rule tells the browser what the HTML looks like, and what it
should do.
● A rule can dictate what just one html tag should look like, or you can construct your
own rule to be applied as and where you want it.
● There are three parts to a rule: the selector, the property, and the value.
1. Selector: it is an html tag at which a style will be applied. This tag could be anything
like <h1> or <table>.
2. Property: it is a type of attribute of html tag. All html attributes are converted into CSS
properties.
3. Value: these are assigned to properties.
 CHP1:

Inheritance
● When you set inherit on a CSS property, the property takes the value from the
element’s parent. This applies not only to inheritable properties, but to all CSS

properties. Let’s say we have the following:

● The div1 has a height set to 100px and a color set to red. The color will be inherited by
the child elements. The height property is not inheritable, so the child elements won’t
inherit it.
● Div1child, on the other hand, has its height property set to inherit. This will make it
inherit the value of its height from its parent element, div1. So the height of the
div1child will be 100px.
● The inherit value enables inheritance on all css properties. With inherit, the specified
element will take the value of the specified property from its parent element.
● Only direct child elements can inherit a css property from its parent element using the
inherit value if the css property is set by the element’s parent element. This is to ensure
that the CSS property to be inherited is an inheritable property.
 CHP1:

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

Properties Description

background_color Specifies the background color to be used

background_image Specifies one or more background images to be used.

background_position Specifies position of background

background_size Specifies size of background

background_repeat Specifies how to repeat background images

background_origin Specifies the positioning area of background images

background_clip Specifies the painting area of background images

background_attachment Specifies whether the background images fixed or scrolls with the
rest of the page.

CSS Borders:
● The border-style property specifies what kind of border to display.
● The following values are allowed:
1. Dotted: defines a dotted border
2. Dashed:defines a dashed border
3. Solid: defines a solid border
4. Double: defines a double border
5. Groove: defines a 3D grooved border. The effect depends on the border-color value
6. Ridge: defines a 3D ridged border. The effect depends on the border-color value
7. Inset: defines a 3D inset border. The effect depends on the border-color value
8. Outset: defines a 3D outset border. The effect depends on the border-color value
9. None: defines no border
10. Hidden: defines a hidden border
 CHP1:

Border image property:

● The border-image property allows you to specify an image to be used as the border
around an element.

CSS Colors
● The color property specifies the color of text.
● Syntax :
Color: color name;
 CHP1:

● Property values:

Value Description

Color Specifies text color.

Initial Sets this property to its default value.

Inherit Inherits this property from its parent element.

● Colors in CSS can be specified by the following methods:

1. Hexadecimal colors
2. RGB colors
3. RGBA colors
4. HSL colors
5. HSLA colors

❑ Rgb:
❑ An RGB color value is specified with the rgb() function, which has the following
syntax: rgb(red, green, blue)
❑ Each parameter (red, green, and blue) defines the intensity of the color and can be an
integer between 0 and 255 or a percentage value (from 0% to 100%).
❑ For example, the rgb(0,0,255) value is rendered as blue, because the blue parameter is set to
its highest value (255) and the others are set to 0.

● Hexadecimal colors:
❑ A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and
BB (blue) hexadecimal integers specify the components of the color. All values must be
between 00 and FF.
❑ For example, the #0000ff value is rendered as blue, because the blue component is set to its
highest value (ff) and the others are set to 00.

● Hsl colors:
❑ HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate
representation of colors.
❑ An hsl color value is specified with the hsl() function, which has the following syntax:
❑ hsl(hue, saturation, lightness)
❑ Hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is
blue. Saturation is a percentage value; 0% means a shade of gray and 100% is the full color.
 CHP1:

Lightness is also a percentage; 0% is black, 100% is white.

● Rgba colors
❑ Rgba color values are an extension of rgb color values with an alpha channel - which specifies
the opacity of the object.
❑ An rgba color is specified with the rgba() function, which has the following syntax: rgba(red,
green, blue, alpha)
❑ The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
● Hsla colors
❑ Hsla color values are an extension of hsl color values with an alpha channel - which specifies the
opacity of the object.
❑ An hsla color value is specified with the hsla() function, which has the following syntax:
(Hue, saturation, lightness, alpha)
❑ The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

CSS shadow effects

• With CSS you can add shadow to text and to elements.
• The following are the properties:
• Text-shadow: Property applies shadow to text.
In its simplest use, you only specify the horizontal shadow (2px) and the vertical shadow (2px):
text-shadow: 2px 2px;

• Next, add a color to the shadow: text-shadow: 2px 2px red;

• Box-shadow: Property applies shadow like a box. You only specify a horizontal and a
vertical shadow. The default color of the shadow is the current text-color.
 CHP1:

• Box-shadow: Property applies shadow like a box. You only specify a horizontal and a
vertical shadow. The default color of the shadow is the current text-color.

• Specify a color for the shadow

 CHP1:

• Specify spread radius and color for the shadow:

Text formatting:
• CSS text formatting properties is used to format text and style text.
• CSS text formatting include following properties:
Property Description

letter_spacing Specify the space between the characters of the text.

line_break Used to break lines.

line_height Used for setting the height of line.

tab_size Used to specify the tab character length.

text_align Used to specify horizontal text alignment.

text_indent Used to indent the first line of the paragraph.
 CHP1:

text_justify Used to specify text_align is “justify”

text_transform Used in a text to control text capitalization
white_space Used to handle white space within an element
hyphens Used to separate words.
hanging_punctuation Used to specify whether punctuation character can be placed outer
of line box
word_spacing Used to specify whether to increase or decrease the space between
words in a text

Text decoration

Property Description

text_decoration Used to specify decoration applied on the text

Text_decoration_color Used to specify the color for decorating the text.

Text_decoration_line Used to specify the line_type in a text decoration.

Text_decoration_style Used to specify the style for decorating the text.

Text_sahadow Used to add shadow to text

Text_underline_position Used to specify the position of underline set by text decoration property.
 CHP1:

CSS Properties used to manipulate text

Property Description

Color Setting color of text

Direction Setting the text direction. Values- rtl-right to left or ltr-left to right
Letter-spacing Insert or remove spaces between letters of words

Word-spacing Insert or remove spaces between words of a sentence

Text-indent Indent the text of paragraph. Values- % or number specifying

indent space
Text-align Align the text of a document. Values- left, right, center, justify
Text-decoration Decorate the text using underline, overline and strike through.
Text-transform Set the text cases to uppercase or lower case
White-space Handling white space present inside an element. Values: normal,
pre, no wrap
Text-shadow Set text shadow around text

Code for Direction property

 CHP1:

Output:

CSS3 Transformations:
CSS 2D Transforms:
• CSS transforms allow you to move, rotate, scale, and skew elements.
• Example: Mouse over the element below to see a 2D transformation:

CSS 2D Transforms Methods:

CHP1:
CHP1:
CHP1:
CHP1:
CHP1:
CHP1:
CHP1:
CHP1:
CHP1:
CHP1:
CHP1:
CHP1:
CHP1:
CHP1: