UNIT 1

Web - Basic Concepts

What is Internet?

The Internet is essentially a global network of computing resources. You can think of the Internet as
a physical collection of routers and circuits as a set of shared resources.
Some common definitions given in the past include −

 A network of networks based on the TCP/IP communications protocol.

 A community of people who use and develop those networks.

Internet-Based Services

Some of the basic services available to Internet users are −

 Email − A fast, easy, and inexpensive way to communicate with other Internet users around
the world.
 Telnet − Allows a user to log into a remote computer as though it were a local system.
 FTP − Allows a user to transfer virtually every kind of file that can be stored on a computer
from one Internet-connected computer to another.
 UseNet news − A distributed bulletin board that offers a combination news and discussion
service on thousands of topics.
 World Wide Web (WWW) − A hypertext interface to Internet information resources.

What is WWW?

WWW stands for World Wide Web. A technical definition of the World Wide Web is − All the
resources and users on the Internet that are using the Hypertext Transfer Protocol (HTTP).
A broader definition comes from the organization that Web inventor Tim Berners-Lee helped found,
the World Wide Web Consortium (W3C): The World Wide Web is the universe of network-accessible
information, an embodiment of human knowledge.
In simple terms, The World Wide Web is a way of exchanging information between computers on the
Internet, tying them together into a vast collection of interactive multimedia resources.

What is HTTP?

HTTP stands for Hypertext Transfer Protocol. This is the protocol being used to transfer hypertext
documents that makes the World Wide Web possible.
A standard web address such as Yahoo.com is called a URL and here the prefix http indicates its
protocol

What is URL?
URL stands for Uniform Resource Locator, and is used to specify addresses on the World Wide
Web. A URL is the fundamental network identification for any resource connected to the web (e.g.,
hypertext pages, images, and sound files).
A URL will have the following format −
protocol://hostname/other_information
The protocol specifies how information is transferred from a link. The protocol used for web
resources is HyperText Transfer Protocol (HTTP). Other protocols compatible with most web
browsers include FTP, telnet, newsgroups, and Gopher.
The protocol is followed by a colon, two slashes, and then the domain name. The domain name is
the computer on which the resource is located.
Links to particular files or subdirectories may be further specified after the domain name. The
directory names are separated by single forward slashes.

What is Website?

Currently you are on our website Tutorialspoint.com which is a collection of various pages written in

HTML markup language. This is a location on the web where people can find tutorials on latest
technologies. Similarly, there are millions of websites available on the web.
Each page available on the website is called a web page and first page of any website is
called home page for that site.

What is Web Server?

Every Website sits on a computer known as a Web server. This server is always connected to the
internet. Every Web server that is connected to the Internet is given a unique address made up of a
series of four numbers between 0 and 256 separated by periods. For example, 68.178.157.132 or
68.122.35.127.
When you register a Web address, also known as a domain name, such as tutorialspoint.com you
have to specify the IP address of the Web server that will host the site.
We will see different type of Web servers in a separate chapter.

What is Web Browser?

Web Browsers are software installed on your PC. To access the Web you need a web browsers,
such as Netscape Navigator, Microsoft Internet Explorer or Mozilla Firefox.
Currently you must be using any sort of Web browser while you are navigating through my site
tutorialspoint.com. On the Web, when you navigate through pages of information this is commonly
known as browsing or surfing.
We will see different type of Web browsers in a separate chapter.

What is SMTP Server?

SMTP stands for Simple Mail Transfer Protocol Server. This server takes care of delivering emails
from one server to another server. When you send an email to an email address, it is delivered to its
recipient by a SMTP Server.
What is ISP?

ISP stands for Internet Service Provider. They are the companies who provide you service in terms
of internet connection to connect to the internet.
You will buy space on a Web Server from any Internet Service Provider. This space will be used to
host your Website.

What is HTML?

HTML stands for Hyper Text Markup Language. This is the language in which we write web pages
for any Website. Even the page you are reading right now is written in HTML.
This is a subset of Standard Generalized Mark-Up Language (SGML) for electronic publishing, the
specific standard used for the World Wide Web.

What is Hyperlink?

A hyperlink or simply a link is a selectable element in an electronic document that serves as an

access point to other electronic resources. Typically, you click the hyperlink to access the linked
resource. Familiar hyperlinks include buttons, icons, image maps, and clickable text links.

What is DNS?

DNS stands for Domain Name System. When someone types in your domain name,

www.example.com, your browser will ask the Domain Name System to find the IP that hosts your
site. When you register your domain name, your IP address should be put in a DNS along with your
domain name. Without doing it your domain name will not be functioning properly.

What is W3C?

W3C stands for World Wide Web Consortium which is an international consortium of companies

involved with the Internet and the Web.
The W3C was founded in 1994 by Tim Berners-Lee, the original architect of the World Wide Web.
The organization's purpose is to develop open standards so that the Web evolves in a single
direction rather than being splintered among competing factions. The W3C is the chief standards
body for HTTP and HTML.

Web - How it Works ?

On the simplest level, the Web physically consists of the following components −
 Your personal computer − This is the PC at which you sit to see the web.
 A Web browser − A software installed on your PC which helps you to browse the Web.
 An internet connection − This is provided by an ISP and connects you to the internet to
reach to any Website.
 A Web server − This is the computer on which a website is hosted.
 Routers & Switches − They are the combination of software and hardware who take your
request and pass to appropriate Web server.
The Web is known as a client-server system. Your computer is the client and the remote computers
that store electronic files are the servers.

How the Web Works

When you enter something like Google.com the request goes to one of many special computers on
the Internet known as Domain Name Servers (DNS). All these requests are routed through various
routers and switches. The domain name servers keep tables of machine names and their IP
addresses, so when you type in Google.com it gets translated into a number, which identifies the
computers that serve the Google Website to you.
When you want to view any page on the Web, you must initiate the activity by requesting a page
using your browser. The browser asks a domain name server to translate the domain name you
requested into an IP address. The browser then sends a request to that server for the page you
want, using a standard called Hypertext Transfer Protocol or HTTP.
The server should constantly be connected to the Internet, ready to serve pages to visitors. When it
receives a request, it looks for the requested document and returns it to the Web browser. When a
request is made, the server usually logs the client's IP address, the document requested, and the
date and time it was requested. This information varies server to server.
An average Web page actually requires the Web browser to request more than one file from the
Web server and not just the HTML / XHTML page, but also any images, style sheets, and other
resources used in the web page. Each of these files including the main page needs a URL to identify
each item. Then each item is sent by the Web server to the Web browser and Web browser collects
all this information and displays them in the form of Web page.

In Short

We have seen how a Web client - server interaction happens. We can summarize these steps as
follows −
A user enters a URL into a browser (for example, Google.com. This request is passed to a domain
name server.
The domain name server returns an IP address for the server that hosts the Website (for example,
68.178.157.132).
The browser requests the page from the Web server using the IP address specified by the domain
name server.
The Web server returns the page to the IP address specified by the browser requesting the page.
The page may also contain links to other files on the same server, such as images, which the
browser will also request.
The browser collects all the information and displays to your computer in the form of Web page.

Web - Browser Types

Web Browsers are software installed on your PC. To access the Web, you need a web browser,
such as Netscape Navigator, Microsoft Internet Explorer or Mozilla Firefox.
Currently you must be using any sort of Web browser while you are navigating through our site
tutorialspoint.com. On the Web, when you navigate through pages of information, this is commonly
known as web browsing or web surfing.
There are four leading web browsers − Explorer, Firefox, Netscape, and Safari, but there are many
others browsers available. You might be interested in knowing Complete Browser Statistics. Now we
will see these browsers in bit more detail.
While developing a site, we should try to make it compatible to as many browsers as possible.
Especially sites should be compatible to major browsers like Explorer, Firefox, Chrome, Netscape,
Opera, and Safari.

Internet Explorer

Internet Explorer (IE) is a product from software giant Microsoft. This is the most commonly used
browser in the universe. This was introduced in 1995 along with Windows 95 launch and it has
passed Netscape popularity in 1998.
You can download a latest version of this browser by clicking here → Download Internet Explorer

Google Chrome

This web browser is developed by Google and its beta version was first released on September 2,
2008 for Microsoft Windows. Today, chrome is known to be one of the most popular web browser
with its global share of more than 50%.
You can download a latest version of this browser by clicking here → Download Google Chrome

Mozilla Firefox

Firefox is a new browser derived from Mozilla. It was released in 2004 and has grown to be the
second most popular browser on the Internet.
You can download a latest version of this browser by clicking here → Download Firefox

Safari

Safari is a web browser developed by Apple Inc. and included in Mac OS X. It was first released as a
public beta in January 2003. Safari has very good support for latest technologies like XHTML, CSS2
etc.
You can download a latest version of this browser by clicking here → Download Safari

Opera

Opera is smaller and faster than most other browsers, yet it is full- featured. Fast, user-friendly, with
keyboard interface, multiple windows, zoom functions, and more. Java and non Java-enabled
versions available. Ideal for newcomers to the Internet, school children, handicap and as a front-end
for CD-Rom and kiosks.
You can download a latest version of this browser by clicking here → Download Opera
 Konqueror

Konqueror is an Open Source web browser with HTML 4.01 compliance, supporting Java applets,
JavaScript, CSS 1, CSS 2.1, as well as Netscape plugins. This works as a file manager as well as it
supports basic file management on local UNIX filesystems, from simple cut/copy and paste
operations to advanced remote and local network file browsing.
You can download a latest version of this browser by clicking here → Download Konqueror

Lynx

Lynx is a fully-featured World Wide Web browser for users on Unix, VMS, and other platforms
running cursor-addressable, character-cell terminals or emulators.
You can download a latest version of this browser by clicking here → Download Lynx

Web - Server Types

Every Website sits on a computer known as a Web server. This server is always connected to the
internet. Every Web server that is connected to the Internet is given a unique address made up of a
series of four numbers between 0 and 255 separated by periods. For example, 68.178.157.132 or
68.122.35.127.
When you register a web address, also known as a domain name, such as tutorialspoint.com you
have to specify the IP address of the Web server that will host the site. You can load up with
Dedicated Servers that can support your web-based operations.
There are four leading web servers − Apache, IIS, lighttpd and Jagsaw. Now we will see these
servers in bit more detail.
Apart from these Web Servers, there are other Web Servers also available in the market but they are
very expensive. Major ones are Netscape's iPlanet, Bea's Web Logic and IBM's WebSphere.

Apache HTTP Server

This is the most popular web server in the world developed by the Apache Software Foundation.
Apache web server is an open source software and can be installed on almost all operating systems
including Linux, Unix, Windows, FreeBSD, Mac OS X and more. About 60% of the web server
machines run the Apache Web Server.
You can have Apache with tomcat module to have JSP and J2EE related support.
You can have detailed information about this server at Apache HTTP Server

Internet Information Services

The Internet Information Server (IIS) is a high performance Web Server from Microsoft. This web
server runs on Windows NT/2000 and 2003 platforms ( and may be on upcoming new Windows
version also). IIS comes bundled with Windows NT/2000 and 2003; Because IIS is tightly integrated
with the operating system so it is relatively easy to administer it.
You can have detailed information about this server at Miscrosoft IIS

lighttpd

The lighttpd, pronounced lighty is also a free web server that is distributed with the FreeBSD
operating system. This open source web server is fast, secure and consumes much less CPU power.
Lighttpd can also run on Windows, Mac OS X, Linux and Solaris operating systems.
You can have detailed information about this server at lighttpd

Sun Java System Web Server

This web server from Sun Microsystems is suited for medium and large websites. Though the server
is free it is not open source. It however, runs on Windows, Linux and Unix platforms. The Sun Java
System web server supports various languages, scripts and technologies required for Web 2.0 such
as JSP, Java Servlets, PHP, Perl, Python, Ruby on Rails, ASP and Coldfusion etc.
You can have detailed information about this server at Sun Java System Web Server

Jigsaw Server

Jigsaw (W3C's Server) comes from the World Wide Web Consortium. It is open source and free and
can run on various platforms like Linux, Unix, Windows, Mac OS X Free BSD etc. Jigsaw has been
written in Java and can run CGI scripts and PHP programs.
You can have detailed information about this server at Jigsaw Server

HTML Basic Examples
In this chapter we will show some basic HTML examples.

Don't worry if we use tags you have not learned about yet.

HTML Documents
All HTML documents must start with a document type declaration: <!DOCTYPE html>.

The HTML document itself begins with <html> and ends with </html>.

The visible part of the HTML document is between <body> and </body>.

Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

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>

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

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

Example
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

HTML Paragraphs

HTML paragraphs are defined with the <p> tag:

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

Try it Yourself »

HTML Links

HTML links are defined with the <a> tag:

Example
<a href="https://www.w3schools.com">This is a link</a>

Try it Yourself »
The link's destination is specified in the href attribute. 

Attributes are used to provide additional information about HTML elements.

You will learn more about attributes in a later chapter.

HTML Images

HTML images are defined with the <img> tag.

The source file (src), alternative text (alt), width, and height are provided as

attributes:

Example
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

Try it Yourself »

HTML Elements

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

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

Examples of some HTML elements:

<h1>My First Heading</h1>

<p>My first paragraph.</p>

HTML Attributes

HTML attributes provide additional information about HTML elements.

HTML Attributes

 All HTML elements can have attributes

 Attributes provide additional information about elements
 Attributes are always specified in the start tag
 Attributes usually come in name/value pairs like: name="value"

The href Attribute

The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link
goes to:

Example
<a href="https://www.w3schools.com">Visit W3Schools</a>
Try it Yourself »

You will learn more about links in our HTML Links chapter.

The src Attribute

The <img> tag is used to embed an image in an HTML page. The src attribute specifies

the path to the image to be displayed:

Example
<img src="img_girl.jpg">

Try it Yourself »

There are two ways to specify the URL in the src attribute:

1. Absolute URL - Links to an external image that is hosted on another website.

Example: src="https://www.w3schools.com/images/img_girl.jpg".

Notes: External images might be under copyright. If you do not get permission to use
it, you may be in violation of copyright laws. In addition, you cannot control external
images; it can suddenly be removed or changed.

2. Relative URL - Links to an image that is hosted within the website. Here, the URL
does not include the domain name. If the URL begins without a slash, it will be relative
to the current page. Example: src="img_girl.jpg". If the URL begins with a slash, it will
be relative to the domain. Example: src="/images/img_girl.jpg".

Tip: It is almost always best to use relative URLs. They will not break if you change
domain.

The width and height Attributes

The <img> tag should also contain the width and height attributes, which specifies the

width and height of the image (in pixels):

Example
<img src="img_girl.jpg" width="500" height="600">

Try it Yourself »

The alt Attribute

The required alt attribute for the <img> tag specifies an alternate text for an image, if

the image for some reason cannot be displayed. This can be due to slow connection, or
an error in the src attribute, or if the user uses a screen reader.
Example
<img src="img_girl.jpg" alt="Girl with a jacket">

Try it Yourself »

Example

See what happens if we try to display an image that does not exist:

<img src="img_typo.jpg" alt="Girl with a jacket">

Try it Yourself »

You will learn more about images in our HTML Images chapter.

The style Attribute

The style attribute is used to add styles to an element, such as color, font, size, and
more.

Example
<p style="color:red;">This is a red paragraph.</p>

Try it Yourself »

HTML Form Attributes
This chapter describes the different attributes for the HTML <form> element.

The Action Attribute

The action attribute defines the action to be performed when the form is submitted.

Usually, the form data is sent to a file on the server when the user clicks on the submit
button.

In the example below, the form data is sent to a file called "action_page.php". This file
contains a server-side script that handles the form data:

Example

On submit, send form data to "action_page.php":

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>

Try it Yourself »

The Method Attribute

The method attribute specifies the HTTP method to be used when submitting the form
data.

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

transaction (with method="post").

The default HTTP method when submitting form data is GET. 

Example

This example uses the GET method when submitting the form data:

<form action="/action_page.php" method="get">

Try it Yourself »

Example

This example uses the POST method when submitting the form data:

<form action="/action_page.php" method="post">

Try it Yourself »

HTML Comments
HTML comments are not displayed in the browser, but they can help document your
HTML source code.

HTML Comment Tags

You can add comments to your HTML source by using the following syntax:

<!-- Write your comments here -->

Notice that there is an exclamation point (!) in the start tag, but not in the end tag.

Note: Comments are not displayed by the browser, but they can help document your HTML
source code.

With comments you can place notifications and reminders in your HTML code:

Example
<!-- This is a comment -->

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

<!-- Remember to add more information here -->

HTML Form Elements

HTML form elements are used to capture user input. There are many different types of form elements
such as the text box, check box, drop down, submit button, and much more.

The form elements above are the most common used form elements. We will go into further detail on
each of these form elements:

1. Text Box Input

2. Password Input
3. Text Area
4. Select Drop Down
5. Check Box
6. Radio Input
 7. File Input
8. Submit Button

1. Text Box Input

The text box input is used to capture text such as a name, email, address, or any other type of text.
To create an HTML text box we will use the input tag and specify that the type attribute to be text.

Take a look at how to create a text box in HTML:

<input type="text" name="first_name">

Notice the  name  attribute. This is the name that will be sent to the server when the form is submitted, so
our server side code would get this text box value by referencing the  first_name  form element.

Let's take another quick example of how a text box looks in HTML:

Notice we have text above the text box which says First Name, this is referred to as a label and is a
way of describing what the user should input in the form element. A basic HTML label will look like
the following:

<label for="first_name">First Name</label>

<label> tags are very common when using HTML forms. Notice the for attribute contains the
value first_name this matches the name of your input. So since our input has a name
of name="first_name" our label will have an attribute of for="first_name". Easy Peasy, right. Let's
move on to the password input.
Password Input

The password input is essentially the same thing as the Text Box input; however, it does not show the
text as the user types. Try it out in the example below:

And this is how you will create a password input:

<input type="password" name="password">

Text Area

To create a Text Area where a large amount of text can be entered by the user we can use
the <textarea> tag. Take a look at an example of how to create a Text Area in HTML:

<textarea name="comment"></textarea>

Select Drop Down

A Drop Down is a specific list of options that a user can choose when selecting a Drop Down menu.
To create a Select Dropdown in HTML you would represent this inside of <select></select> tags,
then each option that you want to allow your user, you will specify with an <option></option> tag
inside the select tags. Take a look at the following example:

<select name="weapon">

<option value="throwing_stars">Throwing Stars</option>

<option value="sword">Sword</option>

<option value="staff">Staff</option>

</select>

Check Box

A check box is exactly what it sounds like, it's a box that you can click and it can be checked or
unchecked. When the check box is checked you are setting the check box to true. Otherwise if it is
unchecked you are saying that it is false. Take a look at how we can create an HTML check box below:

<input type="checkbox" name="valid_ninja"> Are You a Ninja?

If we wanted to specify that the check box is checked we can use the checked attribute and set it to
checked:

<input type="checkbox" name="valid_ninja" checked="

Radio Input

A radio select input allows a user a specific amount of options to select from. You can think of this like
a multiple choice select. The user can only select one of the options. Take a look at how to create
Radio Select Inputs in HTML:

<input type="radio" name="weapon" value="throwing_stars"> Throwing Stars<br>

<input type="radio" name="weapon" value="sword"> Sword<br>

<input type="radio" name="weapon" value="staff"> Staff<br>

If you wish to have one of your radio buttons selected by default you can add a checked attribute to
the element like so:

<input type="radio" name="weapon" value="sword" checked> Sword<br>

File Input

A File input is used to allow users to upload images or files. To create a File input element we will use
the input element and give it a type of file like the following:

<input type="file" name="image">

When clicking on the Choose File button above the user will then be prompted with a window to
specify which file they would like to upload.

Submit Button

Lastly we are going to need a way to submit our form with all the data. This is what the submit button
is used for. In order to use the submit button we will use another input element with
a type of submit:

<input type="submit" value="Submit The Form">

HTML Validations
HTML <input> pattern Attribute
❮ HTML <input> tag

Example
An HTML form with an input field that can contain only three letters (no numbers or special
characters):

<form action="/action_page.php">
  <label for="country_code">Country code:</label>
  <input type="text" id="country_code" name="country_code"
  pattern="[A-Za-z]{3}" title="Three letter country code"><br><br>
  <input type="submit">
</form>

Try it Yourself »

MORE EXAMPLES
CSS Introduction
CSS is the language we use to style a Web page.

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
 External stylesheets are stored in CSS files

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

CSS Syntax

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
A CSS selector selects the HTML element(s) you want to style.

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:

 Simple selectors (select elements based on name, id, class)

 Combinator selectors (select elements based on a specific relationship between them)
 Pseudo-class selectors (select elements based on a certain state)
 Pseudo-elements selectors (select and style a part of an element)
 Attribute selectors (select elements based on an attribute or attribute value)

This page will explain the most basic CSS selectors.

The CSS element Selector

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

Example
Here, all <p> elements on the page will be center-aligned, with a red text color: 

p {
  text-align: center;
  color: red;
}
The 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.

Example
The CSS rule below will be applied to the HTML element with id="para1": 

#para1 {
  text-align: center;
  color: red;
}

Try it Yourself »

Note: An id name cannot start with a number!

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

Example
In this example all HTML elements with class="center" will be red and center-aligned: 

.center {
  text-align: center;
  color: red;
}

Try it Yourself »

You can also specify that only specific HTML elements should be affected by a class.

Example
In this example only <p> elements with class="center" will be red and center-aligned: 
p.center {
  text-align: center;
  color: red;
}

Try it Yourself »

HTML elements can also refer to more than one class.

Example
In this example the <p> element will be styled according to class="center" and to
class="large": 

<p class="center large">This paragraph refers to two classes.</p>

Try it Yourself »

Note: A class name cannot start with a number!

The CSS Universal Selector

The 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;
}

Try it Yourself »

The CSS Grouping Selector

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

Look at the following CSS code (the h1, h2, and p elements have the same style
definitions):

h1 {
  text-align: center;
  color: red;
}

h2 {
  text-align: center;
  color: red;
}

p {
  text-align: center;
  color: red;
}

It will be better to group the selectors, to minimize the code.

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;
}

HTML Styles - CSS
CSS stands for Cascading Style Sheets.

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

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

What is CSS?
Cascading Style Sheets (CSS) is used to format the layout of a webpage.

With CSS, you can control the color, font, the size of text, the spacing between elements,
how elements are positioned and laid out, what background images or background colors
are to be used, different displays for different devices and screen sizes, and much more!

Tip: The word cascading means that a style applied to a parent element will also apply to
all children elements within the parent. So, if you set the color of the body text to "blue", all
headings, paragraphs, and other text elements within the body will also get the same color
(unless you specify something else)!
Using CSS
CSS can be added to HTML documents in 3 ways:

 Inline - by using the style attribute inside HTML elements

 Internal - by using a <style> element in the <head> section
 External - by using a <link> element to link to an external CSS file

The most common way to add CSS, is to keep the styles in external CSS files. However, in
this tutorial we will use inline and internal styles, because this is easier to demonstrate, and
easier for you to try it yourself.

Inline CSS
An inline CSS is used to apply a unique style to a single HTML element.

An inline CSS uses the style attribute of an HTML element.

The following example sets the text color of the <h1> element to blue, and the text color of
the <p> element to red:

Example
<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>

Try it Yourself »

Internal CSS
An internal CSS is used to define a style for a single HTML page.

An internal CSS is defined in the <head> section of an HTML page, within a <style> element.

The following example sets the text color of ALL the <h1> elements (on that page) to blue,
and the text color of ALL the <p> elements to red. In addition, the page will be displayed
with a "powderblue" background color: 

Example
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

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

</body>
</html>

External CSS
An external style sheet is used to define the style for many HTML pages.

To use an external style sheet, add a link to it in the <head> section of each HTML page:

Example
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

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

</body>
</html>

Try it Yourself »

The external style sheet can be written in any text editor. The file must not contain any
HTML code, and must be saved with a .css extension.

Here is what the "styles.css" file looks like:

"styles.css":
body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}

Tip: With an external style sheet, you can change the look of an entire web site, by
changing one file!

CSS Colors, Fonts and Sizes

Here, we will demonstrate some commonly used CSS properties. You will learn more about
them later.

The CSS color property defines the text color to be used.

The CSS font-family property defines the font to be used.

The CSS font-size property defines the text size to be used.

Example
Use of CSS color, font-family and font-size properties:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: blue;
  font-family: verdana;
  font-size: 300%;
}
p {
  color: red;
  font-family: courier;
  font-size: 160%;
}
</style>
</head>
<body>

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

</body>
</html>

Try it Yourself »

CSS Border
The CSS border property defines a border around an HTML element.

Tip: You can define a border for nearly all HTML elements.

Example
Use of CSS border property: 

p {
  border: 2px solid powderblue;
}
Try it Yourself »

CSS Padding
The CSS padding property defines a padding (space) between the text and the border.

Example
Use of CSS border and padding properties:

p {
  border: 2px solid powderblue;
  padding: 30px;
}

Try it Yourself »

CSS Margin
The CSS margin property defines a margin (space) outside the border.

Example
Use of CSS border and margin properties:

p {
  border: 2px solid powderblue;
  margin: 50px;
}

Try it Yourself »

Link to External CSS

External style sheets can be referenced with a full URL or with a path relative to the current
web page.

Example
This example uses a full URL to link to a style sheet:

<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">

Try it Yourself »
Example
This example links to a style sheet located in the html folder on the current web site: 

<link rel="stylesheet" href="/html/styles.css">

Try it Yourself »

Example
This example links to a style sheet located in the same folder as the current page:

<link rel="stylesheet" href="styles.css">

CSS Box Model
All HTML elements can be considered as boxes.

The CSS Box Model

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 every HTML element. It consists
of: margins, borders, padding, and the actual content. The image below illustrates the box
model:

Explanation of the different parts:

 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

The box model allows us to add a border around elements, and to define space between
elements. 

Example
Demonstration of the box model:

div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}

Try it Yourself »

Width and Height of an Element

In order to set the width and height of an element correctly in all browsers, you need to
know how the box model works.

Important: When you set the width and height properties of an element with CSS, you just
set the width and height of the content area. To calculate the full size of an element, you
must also add padding, borders and margins.

Example
This <div> element will have a total width of 350px: 

div {
  width: 320px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0;
}

Try it Yourself »

Here is the calculation:

320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px

The total width of an element should be calculated like this:

Total element width = width + left padding + right padding + left border + right border +
left margin + right margin

The total height of an element should be calculated like this:

Total element height = height + top padding + bottom padding + top border + bottom
border + top margin + bottom margin

position
The position CSS property sets how an element is positioned in a document. The top, right, bottom,
and left properties determine the final location of positioned elements.
Syntax

The position property is specified as a single keyword chosen from the list of values below.

static

The element is positioned according to the normal flow of the document.

The top, right, bottom, left, and z-index properties have no effect. This is the default value.

relative
The element is positioned according to the normal flow of the document, and then offset relative to
itself based on the values of top, right, bottom, and left. The offset does not affect the position of
any other elements; thus, the space given for the element in the page layout is the same as if
position were static.

This value creates a new stacking context when the value of z-index is not auto. Its effect on table-
*-group, table-row, table-column, table-cell, and table-caption elements is undefined.

absolute
The element is removed from the normal document flow, and no space is created for the element in
the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is
placed relative to the initial containing block. Its final position is determined by the values
of top, right, bottom, and left.

This value creates a new stacking context when the value of z-index is not auto. The margins of
absolutely positioned boxes do not collapse with other margins.

fixed
The element is removed from the normal document flow, and no space is created for the element in
the page layout. It is positioned relative to the initial containing block established by the viewport,
except when one of its ancestors has a transform, perspective, or filter property set to something
other than none (see the CSS Transforms Spec), in which case that ancestor behaves as the
containing block. (Note that there are browser inconsistencies
with perspective and filter contributing to containing block formation.) Its final position is
determined by the values of top, right, bottom, and left.

This value always creates a new stacking context. In printed documents, the element is placed in the
same position on every page.

sticky
The element is positioned according to the normal flow of the document, and then offset relative to
its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-
related elements, based on the values of top, right, bottom, and left. The offset does not affect the
position of any other elements.