HTML
HTML
HTML Introduction
HTML is the standard markup language for creating Web pages.
HTML stands for Hyper Text Markup Language
HTML describes the structure of Web pages using markup
HTML elements are the building blocks of HTML pages
HTML elements are represented by tags
HTML tags label pieces of content such as
"heading", "paragraph", "table", and so on A Simple
HTML Document
Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Example Explained
The <!DOCTYPE html> declaration defines this document to be HTML5
The <html> element is the root element of an HTML page
The <head> element contains meta information about the document
The <title> element specifies a title for the document
The <body> element contains the visible page content
The <h1> element defines a large heading
The <p> element defines a paragraph
HTML Tags
HTML tags are element names surrounded by angle brackets:
<tagname>content goes here...</tagname>
HTML tags normally come in pairs like <p> and </p>
The first tag in a pair is the start tag, the second tag is the end tag
The end tag is written like the start tag, but with a forward slash inserted before the tag
name
HTML Versions
Since the early days of the web, there have been many versions of HTML:
Version Year
HTML 1991
XHTML 2000
HTML5 2014
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>
</body>
</html>
The link's destination is specified in the href attribute.
Attributes are used to provide additional information about HTML elements.
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">
HTML Elements
An HTML element usually consists of a start tag and end tag, with the content inserted in between:
<tagname>Content goes here...</tagname>
The HTML element is everything from the start tag to the end tag:
<p>My first paragraph.</p>
Empty HTML Elements
HTML elements with no content are called empty elements.
<br> is an empty element without a closing tag (the <br> tag defines a line break).
Empty elements can be "closed" in the opening tag like this: <br />.
HTML5 does not require empty elements to be closed. But if you want stricter validation, or if you
need to make your document readable by XML parsers, you must close all HTML elements
properly.
HTML Attributes
All HTML elements can have attributes
Attributes provide additional information about an element
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like: name="value"
The width and height Attributes
Images in HTML have a set of size attributes, which specifies the width and height of the image:
Example
<img src="img_girl.jpg" width="500" height="600">
The style Attribute
The style attribute is used to specify the styling of an element, like color, font, size etc.
Example
<p style="color:red">I am a paragraph</p>
HTML Headings
Headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.
Example
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Bigger Headings
Each HTML heading has a default size. However, you can specify the size for any heading with the
style attribute:
Example
<h1 style="font-size:60px;">Heading 1</h1>
HTML Horizontal Rules
The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a
horizontal rule.
The <hr> element is used to separate content (or define a change) in an HTML page:
Example
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
View HTML Source Code:
To find out, right-click in the page and select "View Page Source" (in Chrome) or "View Source"
(in IE), or similar in other browsers. This will open a window containing the HTML source code of
the page.
Inspect an HTML Element:
Right-click on an element (or a blank area), and choose "Inspect" or "Inspect Element" to see what
elements are made up of (you will see both the HTML and the CSS). You can also edit the HTML
or CSS on-the-fly in the Elements or Styles panel that opens.
HTML Line Breaks
The HTML <br> element defines a line break.
Use <br> if you want a line break (a new line) without starting a new paragraph:
Example
<p>This is<br>a paragraph<br>with line breaks.</p>
The HTML <pre> Element
The HTML <pre> element defines preformatted text.
The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves
both spaces and line breaks:
Example
<pre>
My Bonnie lies over the ocean.
<p>This is a paragraph.</p>
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.
This example sets the text color of the <h1> element to blue:
Example
<h1 style="color:blue;">This is a Blue Heading</h1>
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:
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.
With an external style sheet, you can change the look of an entire web site, by changing one
file!
To use an external style sheet, add a link to it in the <head> section of the HTML page:
Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
Page 29
Dr.B.Nagaraja Naik, Assistant Professor Department of CSE
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
An 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 how the "styles.css" looks:
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p{
color: red;
}
CSS Fonts
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
<!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>
CSS Border
Page 30
Dr.B.Nagaraja Naik, Assistant Professor Department of CSE
The CSS border property defines a border around an HTML element:
Page 31
Dr.B.Nagaraja Naik, Assistant Professor Department of CSE
Example
p{
border: 1px solid powderblue;
}
CSS Margin
The CSS margin property defines a margin (space) outside the border:
Example
p{
border: 1px solid powderblue;
margin: 50px;
}
The id Attribute
To define a specific style for one special element, add an id attribute to the element:
<!DOCTYPE html>
<html>
<head>
<style>
#p01 {
color: blue;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p id="p01">I am different.</p>
</body>
</html>
The class Attribute
To define a style for a special type of elements, add a class attribute to the element:
<p class="error">I am different</p>
then define a style for the elements with the specific class:
Example
p.error {
color: red;
}
External References
External style sheets can be referenced with a full URL or with a path relative to the current web
page.
This example uses a full URL to link to a style sheet:
Example
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
This example links to a style sheet located in the html folder on the current web site:
Example
<link rel="stylesheet" href="/html/styles.css">
This example links to a style sheet located in the same folder as the current page:
Example
Page 32
Dr.B.Nagaraja Naik, Assistant Professor Department of CSE
<link rel="stylesheet" href="styles.css">
HTML Links - Hyperlinks
HTML links are hyperlinks.
You can click on a link and jump to another document.
When you move the mouse over a link, the mouse arrow will turn into a little hand.
Note: A link does not have to be text. It can be an image or any other HTML element.
HTML Links - Syntax
In HTML, links are defined with the <a> tag:
<a href="url">link text</a>
Example
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
The href attribute specifies the destination address (https://www.w3schools.com/html/) of the link.
The link text is the visible part (Visit our HTML tutorial).
Clicking on the link text will send you to the specified address.
Note: Without a forward slash on subfolder addresses, you might generate two requests to the
server. Many servers will automatically add a forward slash to the address, and then create a new
request.
HTML Images
Images can improve the design and the appearance of a web page.
Example
<img src="pulpitrock.jpg" alt="Mountain View">
Image Maps
Use the <map> tag to define an image-map. An image-map is an image with clickable areas.
In the image below, click on the computer, the phone, or the cup of coffee:
<!DOCTYPE html>
<html>
<body>
<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about
the topic:</p>
Page 33
Dr.B.Nagaraja Naik, Assistant Professor Department of CSE
<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>
</body>
</html>
HTML Tables
Defining an HTML Table
An HTML table is defined with the <table> tag.
Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default,
table headings are bold and centered. A table data/cell is defined with the <td> tag.
Example
<!DOCTYPE html>
<html>
<body>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Note: The <td> elements are the data containers of the table. They can contain all sorts of HTML
elements; text, images, lists, other tables, etc.
HTML Table - Adding a Border
If you do not specify a border for the table, it will be displayed without borders.
Page 34
Dr.B.Nagaraja Naik, Assistant Professor Department of CSE
A border is set using the CSS border property:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Output:
Page 35
Dr.B.Nagaraja Naik, Assistant Professor Department of CSE
table, th, td {
border: 1px solid black;
border-collapse:
collapse;
}
HTML Table - Adding Cell Padding
Cell padding specifies the space between the cell content and its borders.
If you do not specify a padding, the table cells will be displayed without padding.
To set the padding, use the CSS padding property:
Example
th, td {
padding: 15px;
}
HTML Table - Left-align Headings
By default, table headings are bold and centered.
To left-align the table headings, use the CSS text-align property:
Example
th {
text-align: left;
}
Adding a Caption
To add a caption to a table, use the <caption> tag:
Example
<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
A Special Style for One Table
To define a special style for a special table, add an id attribute to the table:
Example
<table id="t01">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
Page 36
Dr.B.Nagaraja Naik, Assistant Professor Department of CSE
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Now you can define a special style for this table:
table#t01 {
width: 100%;
background-color: #f1f1c1;
}
HTML Lists
HTML List
Example An
Unordered List:
Item
Item
Item
Item
An Ordered List:
1. First item
2. Second item
3. Third item
4. Fourth item
Unordered HTML List
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles) by default:
Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
nordered HTML List - Choose List Item Marker
The CSS list-style-type property is used to define the style of the list item marker:
Value Description
Page 37
Dr.B.Nagaraja Naik, Assistant Professor Department of CSE
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:
Example
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Ordered HTML List - The Type Attribute
The type attribute of the <ol> tag, defines the type of the list item marker:
Type Description
Block-level Elements
A block-level element always starts on a new line and takes up the full width available (stretches
out to the left and right as far as it can).
The <div> element is a block-level element.
Example
<div>Hello</div>
<div>World</div>
Page 38
Dr.B.Nagaraja Naik, Assistant Professor Department of CSE
Block level elements in HTML:
<address>
<article>
<aside>
<blockquote>
<canvas>
<dd>
<div>
<dl>
<dt>
<fieldset>
<figcaption>
<figure>
<footer>
<form>
<h1>-<h6>
<header>
<hr>
<li>
<main>
<nav>
<noscript>
<ol>
<output>
<p>
<pre>
<section>
<table>
<tfoot>
<ul>
<video>
Inline Elements
An inline element does not start on a new line and only takes up as much width as necessary.
This is an inline <span> element inside a paragraph.
Example
<span>Hello</span>
<span>World</span>
Page 39
Dr.B.Nagaraja Naik, Assistant Professor Department of CSE
<em>
<i>
<img>
<input>
<kbd>
<label>
<map>
<object>
<q>
<samp>
<script>
<select>
<small>
<span>
<strong>
<sub>
<sup>
<textarea>
<time>
<tt>
<var>
Page 40
Dr.B.Nagaraja Naik, Assistant Professor Department of CSE
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
HTML Iframes
An iframe is used to display a web page within a web page.
Iframe - Set Height and Width
Use the height and width attributes to specify the size of the iframe.
The attribute values are specified in pixels by default, but they can also be in percent (like "80%").
Syntax
An HTML iframe is defined with the <iframe> tag:
<iframe src="URL"></iframe>
The src attribute specifies the URL (web address) of the inline frame page.
<!DOCTYPE html>
<html>
<body>
<iframe src="demo_iframe.htm" height="200" width="300"></iframe>
</body>
</html>
Iframe - Remove the Border
By default, an iframe has a border around it.
To remove the border, add the style attribute and use the CSS border property:
Example
<iframe src="demo_iframe.htm" style="border:none;"></iframe>
HTML Layouts
Websites often display content in multiple columns (like a magazine or newspaper).
HTML5 offers new semantic elements that define the different parts of a web page:
Page 41
Dr.B.Nagaraja Naik, Assistant Professor Department of CSE
<header> - Defines a header for a document or a
section
<nav> - Defines a container for navigation links
<section> - Defines a section in a document
<article> - Defines an independent self-contained
article
<aside> - Defines content aside from the content
(like a sidebar)
<footer> - Defines a footer for a document or a
section
<details> - Defines additional details
<summary> - Defines a heading for the <details>
element
CSS Floats
It is common to do entire web layouts using the CSS float property. Float is easy to learn - you just
need to remember how the float and clear properties work. Disadvantages: Floating elements are
tied to the document flow, which may harm the flexibility.
Float Example
City Gallery
London
Paris
Tokyo
London
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area
of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia, its history going back to
its founding by the Romans, who named it Londinium.
Copyright © W3Schools.com
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div.container {
width: 100%;
border: 1px solid gray;
}
header, footer
{ padding:
1em; color:
white;
background-color: black;
clear: left;
text-align: center;
Page 42
Dr.B.Nagaraja Naik, Assistant Professor Department of CSE
}
nav {
float: left;
max-width: 160px;
margin: 0;
padding: 1em;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul a {
text-decoration: none;
}
article {
margin-left: 170px;
border-left: 1px solid gray;
padding: 1em;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>City Gallery</h1>
</header>
<nav>
<ul>
<li><a href="#">London</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Tokyo</a></li>
</ul>
</nav>
<article>
<h1>London</h1>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
Page 43
Dr.B.Nagaraja Naik, Assistant Professor Department of CSE
<p>Standing on the River Thames, London has been a major settlement for two millennia, its
history going back to its founding by the Romans, who named it Londinium.</p>
</article>
</div>
</body>
</html>
HTML Forms
The HTML <form> element defines a form that is used to collect user input:
<form>
.
form elements
.
</form>
an HTML form contains form elements.
Form elements are different types of input elements, like text fields, checkboxes, radio buttons,
submit buttons, and more.
Example:
<!DOCTYPE html>
<html>
<body>
<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
Page 44
Dr.B.Nagaraja Naik, Assistant Professor Department of CSE
<p>Note that the form itself is not visible.</p>
<p>Also note that the default width of a text input field is 20 characters.</p>
</body>
</html>
This is how it will look like in a browser:
First name:
Last name:
Note: The form itself is not visible. Also note that the default width of a text field is 20 characters.
Radio Button Input
<input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of choices:
Example
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
This is how the HTML code above will be displayed in a browser:
Male
Female
Other
The Submit Button
<input type="submit"> defines a button for submitting the form data to a form-handler.
The form-handler is typically a server page with a script for processing input data.
The form-handler is specified in the form's action attribute:
Example
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
This is how the HTML code above will be displayed in a browser:
First name:
Mickey
Last name:
Mouse
Submit
Page 45
Dr.B.Nagaraja Naik, Assistant Professor Department of CSE
Input Type Reset
<input type="reset"> defines a reset button that will reset all form values to their default values:
Example
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
<input type="reset">
</form>
input Type Checkbox
<input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of choices.
Example
<form>
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car
</form>
This is how the HTML code above will be displayed in a browser:
I have a bike
I have a car
Example
<form>
Select your favorite color:
Page 46
Dr.B.Nagaraja Naik, Assistant Professor Department of CSE
<input type="color" name="favcolor">
</form>
Input Type Date
The <input type="date"> is used for input fields that should contain a date.
Depending on browser support, a date picker can show up in the input field.
Example
<form>
Birthday:
<input type="date" name="bday">
</form>
You can also add restrictions to dates:
Example
<form>
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31"><br>
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02"><br>
</form>
Example
<form>
Birthday (date and time):
<input type="datetime-local" name="bdaytime">
</form>
Example
<form>
E-mail:
<input type="email" name="email">
</form>
Example
Page 47
Dr.B.Nagaraja Naik, Assistant Professor Department of CSE
<form>
Birthday (month and year):
<input type="month" name="bdaymonth">
</form>
Example
<form>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
</form>
Page 48
Dr.B.Nagaraja Naik, Assistant Professor Department of CSE
Example
<textarea name="message" style="width:200px; height:600px">
The cat was playing in the garden.
</textarea>
The <button> Element
The <button> element defines a clickable button:
Example
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
HTML5 Form Elements
HTML5 added the following form elements:
<datalist>
<output>
Note: Browsers do not display unknown elements. New elements that are not supported in older
browsers will not "destroy" your web page.
Example
<form action="/action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
Page 49
Dr.B.Nagaraja Naik, Assistant Professor Department of CSE
HTML <frame> Tag.
Example
A simple three-framed page:
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
Frameset tag is not supported by html5.
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
Why Use CSS?
CSS is used to define styles for your web pages, including the design, layout and variations in
display for different devices and screen sizes.
CSS Syntax
A CSS rule-set consists of a selector and a declaration block:
CSS Selectors
CSS selectors are used to "find" (or select) HTML elements based on their element name, id, class,
attribute, and more.
Page 50
Dr.B.Nagaraja Naik, Assistant Professor Department of CSE
Example
p{
text-align: center;
color: red;
}
The id Selector
The id selector uses the id attribute of an HTML element to select a specific element.
The id of an element should be 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.
The style rule below will be applied to the HTML element with id="para1":
Example
#para1 {
text-align: center;
color: red;
}
The class Selector
The class selector selects elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the name of the
class.
In the example below, all HTML elements with class="center" will be red and center-aligned:
Example
.center {
text-align: center;
color: red;
}
You can also specify that only specific HTML elements should be affected by a class.
In the example below, only <p> elements with class="center" will be center-aligned:
Example
p.center {
text-align: center;
color: red;
}
Grouping Selectors
If you have elements with the same style definitions, like this:
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p{
text-align: center;
Page 51
Dr.B.Nagaraja Naik, Assistant Professor Department of CSE
color: red;
}
It will be better to group the selectors, to minimize the code.
To group selectors, separate each selector with a comma.
In the example below we have grouped the selectors from the code above:
Example
h1, h2, p {
text-align: center;
color: red;
}
CSS Comments
Comments are used to explain the code, and may help when you edit the source code at a later date.
Comments are ignored by browsers.
A CSS comment starts with /* and ends with */. Comments can also span multiple lines:
Example
p{
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is
a multi-line
comment */
Three Ways to Insert CSS
There are three ways of inserting a style sheet:
External style sheet
Internal style sheet
Inline style
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Page 52
Dr.B.Nagaraja Naik, Assistant Professor Department of CSE
An external style sheet can be written in any text editor. The file should not contain any html tags.
The style sheet file must be saved with a .css extension.
Here is how the "mystyle.css" looks:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left:
20px;
}
Note: Do not add a space between the property value and the unit (such as margin-left: 20 px;). The
correct way is: margin-left: 20px;
Internal Style Sheet
An internal style sheet may be used if one single page has a unique style.
Internal styles are defined within the <style> element, inside the <head> section of an HTML page:
Example
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left:
40px;
}
</style>
</head>
Inline Styles
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.
The example below shows how to change the color and the left margin of a <h1> element:
Example
<h1 style="color:blue;margin-left:30px;">This is a heading</h1>
Tip: An inline style loses many of the advantages of a style sheet (by mixing content with
presentation).
Cascading Order
What style will be used when there is more than one style specified for an HTML element?
Generally speaking we can say that all the styles 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
Page 53
Dr.B.Nagaraja Naik, Assistant Professor Department of CSE
So, an inline style (inside a specific HTML element) has the highest priority, which means that it
will override a style defined inside the <head> tag, or in an external style sheet, or a browser default
value.
CSS Colors
Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.
Color Names
In HTML, a color can be specified by using a color name:
Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray
Example
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>
Text Color
Example
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
Border Color
You can set the color of borders:
Example
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
Color Values
In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values,
and HSLA values:
Same as color name "Tomato":
Example
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
Page 54
Dr.B.Nagaraja Naik, Assistant Professor Department of CSE
To display the color black, all color parameters must be set to 0, like this: rgb(0, 0, 0).
To display the color white, all color parameters must be set to 255, like this: rgb(255, 255, 255).
HEX Value
In HTML, a color can be specified using a hexadecimal value in the form:
#rrggbb
Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as decimal
0-255).
For example, #ff0000 is displayed as red, because red is set to its highest value (ff) and the others
are set to the lowest value (00).
Example
#ff0000
#0000ff
#3cb371
#ee82ee
#ffa500
#6a5acd
HSL Value
In HTML, a color can be specified using hue, saturation, and lightness (HSL) in the form:
hsl(hue, saturation, lightness)
Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.
Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color.
Lightness is also a percentage, 0% is black, 50% is neither light or dark, 100% is white
Example
hsl(0, 100%, 50%)
hsl(240, 100%, 50%)
hsl(147, 50%, 47%)
hsl(300, 76%, 72%)
hsl(39, 100%, 50%)
hsl(248, 53%, 58%)
Saturation
Saturation can be describe as the intensity of a color.
100% is pure color, no shades of gray
50% is 50% gray, but you can still see the color.
0% is completely gray, you can no longer see the color.
Example
hsl(0, 100%, 50%)
hsl(0, 80%, 50%)
hsl(0, 60%, 50%)
hsl(0, 40%, 50%)
hsl(0, 20%, 50%)
hsl(0, 0%, 50%)
RGBA Value
RGBA color values are an extension of RGB color values with an alpha channel - which specifies
the opacity for a color.
An RGBA color value is specified with:
rgba(red, green, blue, alpha)
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):
Page 55
Dr.B.Nagaraja Naik, Assistant Professor Department of CSE
Example
rgba(255, 99, 71, 0)
rgba(255, 99, 71, 0.2)
rgba(255, 99, 71, 0.4)
rgba(255, 99, 71, 0.6)
rgba(255, 99, 71, 0.8)
rgba(255, 99, 71, 1)
HSLA Value
HSLA color values are an extension of HSL color values with an alpha channel - which specifies
the opacity for a color.
An HSLA color value is specified with:
hsla(hue, saturation, lightness, alpha)
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):
Example
hsla(9, 100%, 64%, 0)
hsla(9, 100%, 64%, 0.2)
hsla(9, 100%, 64%, 0.4)
hsla(9, 100%, 64%, 0.6)
hsla(9, 100%, 64%, 0.8)
hsla(9, 100%, 64%, 1)
CSS Backgrounds
The CSS background properties are used to define the background effects for elements.
CSS background properties:
background-color
background-image
background-repeat
background-attachment
background-position
Background Color
The background-color property specifies the background color of an element.
The background color of a page is set like this:
Example
body {
background-color: lightblue;
}
Background Image
The background-image property specifies an image to use as the background of an element.
By default, the image is repeated so it covers the entire element.
The background image for a page can be set like this:
Example
body {
background-image: url("paper.gif");
}
Background Image - Repeat Horizontally or Vertically
By default, the background-image property repeats an image both horizontally and vertically.
Page 56
Dr.B.Nagaraja Naik, Assistant Professor Department of CSE
Some images should be repeated only horizontally or vertically, or they will look strange, like this:
Example
body {
background-image: url("gradient_bg.png");
}
If the image above is repeated only horizontally (background-repeat: repeat-x;), the background will
look better:
Example
body {
background-image:
url("gradient_bg.png"); background-
repeat: repeat-x;
}
Tip: To repeat an image vertically, set background-repeat: repeat-y;
Background Image - Set position and no-repeat
Showing the background image only once is also specified by the background-repeat property:
Example
body {
background-image:
url("img_tree.png"); background-
repeat: no-repeat;
}
in the example above, the background image is shown in the same place as the text. We want to
change the position of the image, so that it does not disturb the text too much.
The position of the image is specified by the background-position property:
Example
body {
background-image:
url("img_tree.png"); background-
repeat: no-repeat; background-position:
right top;
}
Background Image - Fixed position
To specify that the background image should be fixed (will not scroll with the rest of the page), use
the background-attachment property:
Example
body {
background-image:
url("img_tree.png"); background-
repeat: no-repeat; background-position:
right top; background-attachment:
fixed;
}
Border Style
The border-style property specifies what kind of border to display.
The following values are allowed:
dotted - Defines a dotted border
Page 57
Dr.B.Nagaraja Naik, Assistant Professor Department of CSE
dashed - Defines a dashed border
soli - Defines a solid border
d
double - Defines a double border
groove - Defines a 3D grooved border. The effect depends on the border-color value
Page 58
Dr.B.Nagaraja Naik, Assistant Professor Department of CSE
ridge - Defines a 3D ridged border. The effect depends on the border-color value
ins - Defines a 3D inset border. The effect depends on the border-color value
etoutset - Defines a 3D outset border. The effect depends on the border-color value
non - Defines no border
e hidden - Defines a hidden border
The border-style property can have from one to four values (for the top border, right border, bottom
border, and the left border).
Example
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
Result:
A dotted border.
A dashed border.
A solid border.
A double border.
A groove border. The effect depends on the border-color value.
A ridge border. The effect depends on the border-color value.
An inset border. The effect depends on the border-color value.
An outset border. The effect depends on the border-color value.
No border.
A hidden border.
A mixed border.
Border Width
The border-width property specifies the width of the four borders.
The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-
defined values: thin, medium, or thick.
The border-width property can have from one to four values (for the top border, right border,
bottom border, and the left border).
5px border-width
Example
p.one {
border-style:
solid; border-
width: 5px;
}
p.two {
border-style: solid;
Page 59
Dr.B.Nagaraja Naik, Assistant Professor Department of CSE
border-width: medium;
}
p.three {
border-style: solid;
border-width: 2px 10px 4px 20px;
}
Border Color
The border-color property is used to set the color of the four borders.
The color can be set by:
name - specify a color name, like "red"
Hex - specify a hex value, like "#ff0000"
RGB - specify a RGB value, like "rgb(255,0,0)"
transparent
The border-color property can have from one to four values (for the top border, right border, bottom
border, and the left border).
If border-color is not set, it inherits the color of the element.
Red border
Example
p.one {
border-style:
solid; border-
color: red;
}
p.two {
border-style: solid;
border-color:
green;
}
p.three {
border-style: solid;
border-color: red green blue yellow;
}
Border - Individual Sides
From the examples above you have seen that it is possible to specify a different border for each
side.
In CSS, there are also properties for specifying each of the borders (top, right, bottom, and left):
Different Border Styles
Example
p{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
Border - Shorthand Property
Page 60
Dr.B.Nagaraja Naik, Assistant Professor Department of CSE
As you can see from the examples above, there are many properties to consider when dealing with
borders.
To shorten the code, it is also possible to specify all the individual border properties in one
property.
The border property is a shorthand property for the following individual border properties:
border-width
border-style (required)
border-color
Example
p{
border: 5px solid red;
}
Rounded Borders
The border-radius property is used to add rounded borders to an element:
Example
p{
border: 2px solid
red; border-radius:
5px;
}
CSS Margins
This element has a margin of 70px.
The CSS margin properties are used to create space around elements, outside of any defined
borders.
With CSS, you have full control over the margins. There are properties for setting the margin for
each side of an element (top, right, bottom, and left).
Page 62
Dr.B.Nagaraja Naik, Assistant Professor Department of CSE
Margin - Shorthand Property
margin: 25px 50px 75px 100px;
o top margin is 25px
o right margin is 50px
o bottom margin is 75px
o left margin is 100px
Example
p{
margin: 25px 50px 75px 100px;
}
The auto Value
You can set the margin property to auto to horizontally center the element within its container.
The element will then take up the specified width, and the remaining space will be split
equally between the left and right margins:
Example
div {
width: 300px;
margin: auto;
border: 1px solid red;
}
The inherit Value
This example lets the left margin of the <p class="ex1"> element be inherited from the parent
element (<div>):
Example
div {
border: 1px solid
red; margin-left:
100px;
}
p.ex1 {
margin-left: inherit;
}
CSS Padding
The CSS padding properties are used to generate space around an element's content, inside of any
defined borders.
With CSS, you have full control over the padding. There are properties for setting the padding for
each side of an element (top, right, bottom, and left).
Page 63
Dr.B.Nagaraja Naik, Assistant Professor Department of CSE
% - specifies a padding in % of the width of the containing element
Page 64
Dr.B.Nagaraja Naik, Assistant Professor Department of CSE
inherit - specifies that the padding should be inherited from the parent element
Note: Negative values are not allowed.
The following example sets different padding for all four sides of a <div> element:
Example
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
Padding - Shorthand Property
padding: 25px 50px 75px 100px;
o top padding is 25px
o right padding is 50px
o bottom padding is 75px
o left padding is 100px
Example
div {
padding: 25px 50px 75px 100px;
}
Setting height and width
The height and width properties are used to set the height and width of an element.
The height and width can be set to auto (this is default. Means that the browser calculates the height
and width), or be specified in length values, like px, cm, etc., or in percent (%) of the containing
block.
This element has a height of 200 pixels and a width of 50%
Example
div {
height: 200px;
width: 50%;
background-color: powderblue;
}
The CSS Box Model
All HTML elements can be considered as boxes. In CSS, the term "box model" is used when
talking about design and layout.
The CSS box model is essentially a box that wraps around every HTML element. It consists of:
margins, borders, padding, and the actual content. The image below illustrates the box model:
Page 65
Dr.B.Nagaraja Naik, Assistant Professor Department of CSE
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
div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
Text Transformation
The text-transform property is used to specify uppercase and lowercase letters in a text.
It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of
each word:
Example
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
Letter Spacing
The letter-spacing property is used to specify the space between the characters in a text.
The following example demonstrates how to increase or decrease the space between characters:
Example
h1 {
letter-spacing: 3px;
}
Page 66
Dr.B.Nagaraja Naik, Assistant Professor Department of CSE
h2 {
letter-spacing: -3px;
}
Line Height
The line-height property is used to specify the space between lines:
Example
p.small {
line-height: 0.8;
}
p.b ig {
line-height: 1.8;
}
Word Spacing
The word-spacing property is used to specify the space between the words in a text.
The following example demonstrates how to increase or decrease the space between words:
Example
h1 {
word-spacing: 10px;
}
h2 {
word-spacing: -5px;
}
Text Shadow
The text-shadow property adds shadow to text.
The following example specifies the position of the horizontal shadow (3px), the position of the
vertical shadow (2px) and the color of the shadow (red):
Example
h1 {
text-shadow: 3px 2px red;
}
Font Family
The font family of a text is set with the font-family property.
The font-family property should hold several font names as a "fallback" system. If the browser does
not support the first font, it tries the next font, and so on.
Start with the font you want, and end with a generic family, to let the browser pick a similar font in
the generic family, if no other fonts are available.
Note: If the name of a font family is more than one word, it must be in quotation marks, like:
"Times New Roman".
More than one font family is specified in a comma-separated list:
Example
p{
font-family: "Times New Roman", Times, serif;
}
Font Style
Page 67
Dr.B.Nagaraja Naik, Assistant Professor Department of CSE
The font-style property is mostly used to specify italic text.
This property has three values:
normal - The text is shown normally
italic - The text is shown in italics
oblique - The text is "leaning" (oblique is very similar to italic, but less supported)
Example
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
Set Font Size With Pixels
Setting the text size with pixels gives you full control over the text size:
Example
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p{
font-size: 14px;
}
CSS Icons
How To Add Icons
The simplest way to add an icon to your HTML page, is with an icon library, such as Font
Awesome.
Add the name of the specified icon class to any inline HTML element (like <i> or <span>).
All the icons in the icon libraries below, are scalable vectors that can be customized with CSS (size,
color, shadow, etc.)
Page 68
Dr.B.Nagaraja Naik, Assistant Professor Department of CSE
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-
awesome.min.css">
</head>
<body>
</body>
</html>
Bootstrap Icons
To use the Bootstrap glyphicons, add the following line inside the <head> section of your HTML
page:
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Note: No downloading or installation is required!
Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
>
</head>
<body>
</body>
</html>
Styling Links
Links can be styled with any CSS property (e.g. color, font-family, background, etc.).
In addition, links can be styled differently depending on what state they are in.
The four links states are:
a:link - a normal, unvisited link
a:visited - a link the user has visited
Page 69
Dr.B.Nagaraja Naik, Assistant Professor Department of CSE
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked
Example
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/* selected link */
a:active {
color: blue;
}
Background Color
The background-color property can be used to specify a background color for links:
Example
a:link {
background-color: yellow;
}
a:visited {
background-color: cyan;
}
a:hover {
background-color: lightgreen;
}
a:active {
background-color: hotpink;
}
CSS List Properties
The CSS list properties allow you to:
Set different list item markers for ordered lists
Set different list item markers for unordered lists
Set an image as the list item marker
Add background colors to lists and list items
Page 70
Dr.B.Nagaraja Naik, Assistant Professor Department of CSE
Different List Item Markers
The list-style-type property specifies the type of list item marker.
The following example shows some of the available list item markers:
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
</style>
</head>
<body>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
Page 71
Dr.B.Nagaraja Naik, Assistant Professor Department of CSE
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>
An Image as The List Item Marker
The list-style-image property specifies an image as the list item marker:
Example
ul {
list-style-image: url('sqpurple.gif');
}
Remove Default Settings
The list-style-type:none property can also be used to remove the markers/bullets. Note that the list
also has default margin and padding. To remove this, add margin:0 and padding:0 to <ul> or <ol>:
Example
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
Styling List With Colors
We can also style lists with colors, to make them look a little more interesting.
Anything added to the <ol> or <ul> tag, affects the entire list, while properties added to the <li> tag
will affect the individual list items:
Example
ol {
background: #ff9999;
padding: 20px;
}
ul {
background: #3399ff;
padding: 20px;
}
ol li {
background: #ffe5e5;
padding: 5px;
margin-left: 35px;
}
ul li {
background: #cce5ff;
Page 72
Dr.B.Nagaraja Naik, Assistant Professor Department of CSE
margin: 5px;
}
Table Borders
To specify table borders in CSS, use the border property.
The example below specifies a black border for <table>, <th>, and <td> elements:
Example
table, th, td {
border: 1px solid black;
}
Collapse Table Borders
The border-collapse property sets whether the table borders should be collapsed into a single
border:
Example
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
XHTML
What Is XHTML?
XHTML stands for EXtensible HyperText Markup Language
XHTML is almost identical to HTML
XHTML is stricter than HTML
XHTML is HTML defined as an XML application
XHTML is supported by all major browsers
Why XHTML?
Many pages on the internet contain "bad" HTML.
This HTML code works fine in most browsers (even if it does not follow the HTML rules):
<html>
<head>
<title>This is bad HTML</title>
<body>
<h1>Bad HTML
<p>This is a paragraph
</body>
Today's market consists of different browser technologies. Some browsers run on computers, and
some browsers run on mobile phones or other small devices. Smaller devices often lack the
resources or power to interpret "bad" markup.
XML is a markup language where documents must be marked up correctly (be "well-formed").
By combining the strengths of HTML and XML, XHTML was developed.
XHTML is HTML redesigned as XML.
Page 73
Dr.B.Nagaraja Naik, Assistant Professor Department of CSE
Document Structure
XHTML DOCTYPE is mandatory
The xmlns attribute in <html> is mandatory
<html>, <head>, <title>, and <body> are mandatory
XHTML Elements
XHTML elements must be properly nested
XHTML elements must always be closed
XHTML elements must be in lowercase
XHTML documents must have one root element
XHTML Attributes
Attribute names must be in lower case
Attribute values must be quoted
Attribute minimization is forbidden
<!DOCTYPE.....> Is Mandatory
An XHTML document must have an XHTML DOCTYPE declaration.
A complete list of all the XHTML Doctypes is found in our HTML Tags Reference.
The <html>, <head>, <title>, and <body> elements must also be present, and the xmlns attribute in
<html> must specify the xml namespace for the document.
This example shows an XHTML document with a minimum of required tags:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title of document</title>
</head>
<body>
some content
</body>
</html>
Page 74
Dr.B.Nagaraja Naik, Assistant Professor Department of CSE
Empty Elements Must Also Be Closed
This is wrong:
A break: <br>
A horizontal rule: <hr>
An image: <img src="happy.gif" alt="Happy
face"> This is correct:
A break: <br />
A horizontal rule: <hr />
An image: <img src="happy.gif" alt="Happy face" />
XHTML Elements Must Be In Lower Case
This is wrong:
<BODY>
<P>This is a paragraph</P>
</BODY>
This is correct:
<body>
<p>This is a paragraph</p>
</body>
XHTML Attribute Names Must Be In Lower Case
This is wrong:
<table WIDTH="100%">
This is correct:
<table width="100%">
Attribute Values Must Be Quoted
This is wrong:
<table
width=100%>
This is
correct:
<table width="100%">
Attribute Minimization Is Forbidden
Wrong:
<input type="checkbox" name="vehicle" value="car"
checked /> Correct:
<input type="checkbox" name="vehicle" value="car"
checked="checked" /> Wrong:
<input type="text" name="lastname"
disabled /> Correct:
<input type="text" name="lastname" disabled="disabled" />