HTML & Css Chapter Notes

WEB DESIGN COURSE
By
Upendra sir
Topics:
HTML
CSS
JAVASCRIPT
XML
Topics In HTML:
1. Web terminology [website, webpage]
2. Types of webpages [static, dynamic and server webpage]
3. Html [Hypertext markup language]
4. Languages Types [Programming languages and scripting]
5. Markup Language and types of markup languages
6. What is tag? how to represent tag? Types of tags?
7. Structure of html program
8. Example of first html program
9. Heading level tags
10. Paragraph tag
11. Horizontal tag
12. Line break or break tag
13. Pre tag [pre formatted text tag]
14. Style attribute [background-color, color, font-family, font-size and text-align]
15. Formatting tags
16. Anchor tag

HTML: HYPER TEXT MARKUP LANGUAGE
LANGUAGES:
1. Programming Languages : To generate software’s [we use a single programming language]

Examples : C,Cpp,Java.Net....etc
2. Scripting Languages : To create webpages [We use multiple scripting languages]

Examples : Html,Css,Javascript
Types of Webpages:
1. Static webpage : Content is not changed always [facebook or gmail registration form]
2. Dynamic webpage : Content is changed [After login gmail or facebook]
3. Server webpage : if the data is stored in database or loaded from database
Note:
A normal lang contains variables and functions where as html contains only tags
MARKUP LANGUAGE :
The Language which contains only tags
Tag is represented as angular brackets < >
Ex:
<x> : x tag
<upendra> : upendra tag
<aaigen> : aaigen tag
Types of markup languages:
1. HTML[Hyper Text Markup Language] : To create webpages[websites]
2. XML[Extensible Markup Language] : To store the data and forward
HTML :
To create webpages and web applications
It is tag based language [Internet language] or browser under stable language
Every tag contains opening and closing tag
Html was introduced by Tim berner's lee in 1991 and published in 1995.
Hyper text means it is a text which navigates to another document
Types of tags:
1. Container tag/pair tags : Having both opening and closing tags <html> </html>
2. Empty tag/single tags : Having only opening tags <br> <hr> <img>
Structure Of Html Program:
<!DOCTYPE html> #standard tag
<html>
<head>
Title information, CSS, SCRIPT TAGS..etc
</head>
<body>
Body of the webpage
</body>
</html>
How to save html program:
we can save html programs either .html or .htm extension
<!DOCTYPE html>
<html>
<head>
<title>welcome to html program</title>
</head>
<body>
welcome to web design course
</body>
</html>
Heading Level Tags:
1. HTML headings are titles or subtitles that you want to display on a webpage.
2. headings are defined with the <h1> to <h6> tags
3. <h1> defines the most important heading. <h6> defines the least important heading.
4. It is important to use headings to show the document structure.
5. <h1> headings should be used for main headings, followed by <h2> headings, then the less important <h3>, and so on.
Headings.html
<!DOCTYPE html>
<html>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
Note: Browsers automatically add some white space (a margin) before and after a heading.
Bigger Headings:
Each HTML heading has a default size. However, you can specify the size for any heading with the style attribute, using the CSS
font-size property:
<h1 style="font-size:60px;">Heading 1</h1>
Paragraphs:
 The HTML <p> element defines a paragraph.
 A paragraph always starts on a new line, and browsers
automatically add some white space (a margin) before and after a
paragraph.
Paragraph1.html
<html>
<head>
<title>Paragraph Tag</title>
</head>
<body>
<p>This is first paragraph</p>
<p>This is second paragraph</p>
<p>This is third paragraph</p>
</body>
</html>
NOTE: The browser will automatically remove any extra spaces and lines when the
page is displayed:
Paragraph2.html
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
Horizontal tag:
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:
Horizontal.html
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<p>This is some other text.</p>
<hr>
<p>This is some other text.</p>
</body>
</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:
Breaktag.html:
<p>This is<br>a paragraph<br>with line breaks.</p>

Note: The <br> tag is an empty tag, which means that it has no end tag.
The Poem Problem
This poem will display on a single line:
<p>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
Oh, bring back my Bonnie to me.

</p>
Solutions:
1. Using <br> tag
2. Using <pre> tag
<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:
Pre.html:
<html>
<body>
<p>The pre tag preserves both spaces and line breaks:</p>
<pre>
My Bonnie lies over the sea.
Oh, bring back my Bonnie to me.
</pre>
</body>
</html>
Styles attribute:
The HTML style attribute is used to add styles to an element, such as color, font, size, and more.
 Use the style attribute for styling HTML elements

 Use background-color for background color
 Use color for text colors
 Use font-family for text fonts
 Use font-size for text sizes
 Use text-align for text alignment
The HTML style attribute has the following syntax:
<tagname style="property:value;">
Background Color:
CSS background-color property defines the background color for an HTML element.
1. Set the background color for a page to powderblue:
Backgroundcolor.html:
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
2. Set background color for two different elements:

Backgroundcolor2.html:
<h1 style="background-color:powderblue;">This is a heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>
Text Color:
The color property defines the text color for an HTML element:
Textcolor.html:
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
Fonts:
The CSS font-family property defines the font to be used for an HTML element:
Fonts.html
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
Text Size:
The CSS font-size property defines the text size for an HTML element:
Fontsize.html:
<h1 style="font-size:30px;">This is a heading</h1>
<p style="font-size:16px;">This is a paragraph.</p>
Text Alignment:
The CSS text-align property defines the horizontal text alignment for an HTML element:
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
Text Formatting tags:
HTML contains several elements for defining text with a special meaning.
Tag Description:
<b>
Defines bold text
<i>
Defines a part of text in an alternate voice or mood
<sub>
Defines subscripted text
<sup>
Defines superscripted text
<b> Tag:
Make some text bold (without marking it as important):
Bold.html:
<p>This is normal text - <b>and this is bold text</b>.</p>
<p>This is normal text - <span style="font-weight:bold;">and this is bold text</span>.</p>
<i> tag:
The content inside is typically displayed in italic.
Italic.html:
<p><i>Lorem ipsum</i> is the most popular filler text in history.</p>
<p>The <i>RMS Titanic</i>, a luxury steamship, sank on April 15, 1912 after striking an iceberg.</p>
<sub> Element
The HTML <sub> element defines subscript text. Subscript text appears half a character below the normal line, and
is sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like H2O:
Sub.html
<p>This is <sub>subscripted</sub> text.</p>
<sup> Element
The HTML <sup> element defines superscript text. Superscript text appears half a character above the normal line,
and is sometimes rendered in a smaller font. Superscript text can be used for footnotes, like WWW[1]:
Sup.html
<p>This is <sup>superscripted</sup> text.</p>
HTML - Hypertext Reference (href) or Hyperlinks or Anchors
HTML Anchor
 The HTML anchor tag defines a hyperlink that links one page to another page. The "href"
attribute is the most important attribute of the HTML a tag.
href attribute of HTML anchor tag

 The href attribute is used to define the address of the file to be linked. In other words, it
points out the destination page
The syntax of HTML anchor tag is given below.

 <a href = "..........."> Link Text </a>
 Note: Hypertext references can be Internal, Local, or Global.

 Internal - Links to anchors on the current page
 Local - Links to other pages within your domain
 Global - Links to other domains outside of your site
Internal: href="#anchorname" ->Use the #id selector
Internal.html
<p id="top">Hyperlinks are utilized by a web browser to move from one page to another...</p>
<! -- placeany paragraph text here -- >
<a href="#top">Take me to the top of the page.</a>
Local.html
<a href="first.html" target="_blank">click here</a><br>
<a href="first.html" target="_self">click here</a>
External.html
<body>
<a href="https://www.google.com/" target="_blank">click here</a>
</body>
Images:
The <img> tag is used to embed an image in an HTML page.
 The <img> tag has two required attributes:
 src - Specifies the path to the image
 alt - Specifies an alternate text for the image, if the image for some reason cannot be
displayed
Note: Also, always specify the width and height of an image. If width and height are not
specified, the page might flicker while the image loads.
Images1.html:
<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="border:5px solid
black">
Images2. html:
<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:bottom">
<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-
align:middle">
<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:top">
<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="float:right">
<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="float:left">
How to add a hyperlink to an image:
Image with hyper link.html
<h1>Add a hyperlink to an image</h1>
<p><a href="https://aaigen.com/">
<img src="https://aaigen.com/wp-content/uploads/2019/10/Aaigen-Technologies-Logo.png" alt="Aaigen.com" width="100"
height="132">
</a></p>
How to add background-image:
Note: For beautiful back ground images visit unsplash.com
Css code:
body{
color: red;
text-align :center;
background:url(https://images.unsplash.com/photo-1551209028-
8bbf88d0044f?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-
1.2.1&auto=format&fit=crop&w=751&q=80);
background-repeat: no-repeat;
background-size: cover;
}
img{
border : 10px solid green;
width: 25%;
height: 250px;
margin: 10px;
}
HTML Lists:
HTML Lists are used to specify lists of information. All lists may contain one or more list elements.
List is one of the most effective ways of structuring a Website or its contents are to use lists.
HTML provides three types of lists:
Ordered List or Numbered List (ol)
Unordered List or Bulleted List (ul)
Description List or Definition List (dl)
Ordered list (or )Numbered List:
In Ordered list, all the list items are marked with numbers.
It is known as numbered list also.
The ordered list starts with <ol> tag and ends with </ol> and the list items start with <li> tag and
</li>
Different numbering schemes can be specified depending upon preference.
A list can number from any value. The starting value is given by the “start” attribute.
Elements of a list may be formatted with any of the usual text formatting tags and may be images or
hyperlinks.
Syntax:
<ol [ type=”1” | “a” | “A” | “I” | “i” ] [ start = “number” ] > … </ol>
Note: <li>…</li>
Unordered list (or) Bulleted List:
• In Unordered list, all the list items are marked with bullets.
• It is also known as bulleted list also.
• The Unordered list starts with <ul> tag and ends with </ul>
• List items start with the <li> tag and </li>.
• Different types of bullet symbols can be specified by using the “type” attribute in
<ul>tag
Attribute Value Symbol Description
Disc • Black filled circle

Square ▪ Black filled Square
Circle o Empty circle

Syntax:
<ul [ type = “disc” | “square” | “circle” ] > … </ul>
Description List or Definition List:

Description list is also a list style which is supported by HTML and XHTML.
It is also known as definition list where entries are listed like a dictionary.
The definition list is very appropriate when you want to present glossary, list of terms or other name-value list.
Definition List makes use of following three tags.
<dl> − Defines the start of the list
<dt> − Definition term
<dd> − Defining definition
</dl> − Defines the end of the list
Example for List:
<html>
<head><title>Lists Example</title></head>
<body>
<h1>UN ordered list</h1>
<ul type="disc">
<li>C-LANGUAGE</li>
<li>JAVA</li>
<li>.NET</li>
</ul>
<h4>ordered list :< /h4>
<ol type=”1” start=”1”>
<li>Dennis Ritchie</li>
<li>JAMES GOSLING </li>
<li>MICROSOFT</li>
</ol>
<dl>
<dt>HTML</dt>
<dd>Hyper text mark up langauge </dd>
</dl>
</body>
</html>
<ul type="desc">
<li>Fruit</li>
<ul type="circle">
<li>Bananas</li>
<li>Apples</li>
<ul type="square">
<li>Green</li>
<li>Red</li>
</ul>
<li>Pears</li>
</ul>
<li>Vegetables</li>
<li>Meat</li>
</ul>
Tables: HTML tables allow web developers to arrange data into rows and columns.
Define an HTML Table:
➢ The <table> tag defines an HTML table.
➢ Each table row is defined with a <tr> tag. Each table header is defined with a <th> tag. Each table data/cell is defined with a <td> tag
➢ By default, the text in <th> elements are bold and centered.
➢ By default, the text in <td> elements are regular and left-aligned.
Tables.html
<body>
<h2>Basic HTML Table</h2>
<table>
<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>
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 - Add a Border

To add a border to a table, use the CSS border property:
Example
table, th, td {
border: 1px solid black;
}
HTML Table - Collapsed Borders
To let the borders collapse into one border, add the CSS border-
collapse property:
Example
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
HTML Table - Add 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:
th, td {
padding: 15px;
}
Table - Left-align Headings
By default, table headings are bold and centered.
To left-align the table headings, use the CSS text-align
property:
th {
text-align: left;
}
Table - Add Border Spacing
Border spacing specifies the space between the cells.
To set the border spacing for a table, use the CSS border-
spacing property:
table {
border-spacing: 5px;
}
Note: If the table has collapsed borders, border-spacing
has no effect.
Table - Add a Caption
To add a caption to a table, use the <caption> tag:
Note: The <caption> tag must be inserted immediately after the <table> tag.
<caption>Monthly savings</caption>
Colspan:
To make a cell span more than one column, use the colspan attribute:
<table border=1>
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>
Forms
An HTML form is used to collect user input. The user input is most often sent to a server for processing.
The <form> Element
The HTML <form> element is used to create an HTML form for user input:
<form>
form elements
</form>
The <form> element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit
buttons, etc.
Attribute describes the way to send it.
Following are attributes of <form>:
1. Name:
The name attribute specifies the name of a form which is used to reference elements in a JavaScript.
<form name=“Form name">
2. Action:
The required action attribute specifies where to send the form‐data when a form is submitted.
<form action="URL"> Value: URL
3. Method:
The method attribute specifies how to send form‐data (the form‐data is sent to the page specified in the
action attribute).
<form method="get|post">
Available Controls:
Controls are created using <INPUT> tag & TYPE attribute.
1. Form:
<form> … </form> creates an HTML form, used to enclose HTML controls. The attributes are:
Action: Gives the URL which will handle the form data.
Method: Indicates a method or protocol for sending data to the target URL. The Get method is the default.
2. Text Fields:
<input type=”text”> creates a text field that the user can enter or edit text inside it. The
attributes are:
a) size: Sets the size of the control.
b) value: The value entered in the text field.
c) maxlength: sets the maximum number of characters enter in the text field.
3. Password:
<input type=”password”> creates a password text field, which shows asterisks on the text field. The attributes
are:
maxlength: sets the maximum length of the data in the control.
Name: gives the name of the control.
Value: represents the value entered in the text field.
4. Checkbox:
<input type=”checkbox”> creates a checkbox in a form. The attributes are:
Checked: Indicates if the checkbox should appear checked initially or not.
Size: sets the size of the checkbox.
Value: represents the result of the checkbox when clicked, which is passed to the forms action URL.
5. Radio buttons:
<input type=”radio”> creates a radio button in the form. The attributes are:
Checked: Indicates if the checkbox should appear checked initially or not.
Value: represents the result of the checkbox when clicked, which is passed to the forms action URL.
6. Selection lists:
<select> … </select> Creates a drop-down lists, where the user can select choice from the list of elements.
And <option>…..</option> tag is used to provide values . The attributes are:
a) name: represents the name of the control.
b) value: the value of selected item.
7. Submit button:
<input type=”submit”> creates a submit button that the user can click to send data in the form back to web
server. The attributes are:
Name: sets the name of the control.
Value: Text to be displayed on the button.
8. Reset button:
<input type=”reset”> creates a reset button in a form that resets all fields to their original values.
The attributes are:
a) Name: sets the name of the control.
b) Value: Text to be displayed on the button.
9. <Textarea> tag
It is used to specify a text are or multi line text box. In a text area you can write an unlimited characters. It is
mostly use in users feedback, home address etc.
Example:
<textarea cols="5 rows="5" name="Feedback" >
a) cols: It is an attribute which specifies the number of columns in text area
b) rows: It is an attribute which specifies the number of rows in text area
c) name: It Specifies unique name for the input element
10. Image type: Define an image as a submit button:
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

Marquee Tag
<Marquee> tag:
The marquee tag is a non-standard HTML element which causes text to scroll up, down, left or right automatically.
Attributes
Marquee's element contains several attributes that are used to control and adjust the appearance of the marquee.
Attribute Description
behavior It facilitates user to set the behavior
of the marquee to one of the three
different types: scroll, slide and
alternate.
direction Defines direction for scrolling
content. It may be left, right, up and
down.
width Defines width of marquee in pixels or
%.
height Defines height of marquee in pixels or
%.
scrollamount provides value for speeding the
marquee feature
Scroll Marquee:
It is a by default property. It is used to scroll the text from right to left, and restarts at the right side of the marquee when it is
reached to the end of left side. After the completion of loop text disappears.
<marquee width="100%" behavior="scroll" bgcolor="pink">

This is an example of a scroll marquee...
</marquee>
Slide Marquee:
In slide marquee, all the contents to be scrolled will slide the entire length of marquee but stops at the end to display
the content permanently.
<marquee width="100%" behavior="slide" bgcolor="pink">

This is an example of a slide marquee...
</marquee>
Alternate Marquee:
It scrolls the text from right to left and goes back left to right.
<marquee width="100%" behavior="alternate" bgcolor="pink">

This is an example of a alternate marquee...
</marquee>
Direction attribute:
Syntax:
<marquee direction=”up/down/left/right” >
Scroll up:
<marquee width="60%" direction="up" height="100px">
This is a sample scrolling text that has scrolls in the upper direction.
</marquee>
Scroll Down:
<marquee width="60%" direction="down" height="100px">
This is a sample scrolling text that has scrolls texts to down.
</marquee>
Scroll Left to Right:
<marquee width="60%" direction="right" height="100px">
This is a sample scrolling text that has scrolls texts to right.
</marquee>
Scroll Right to left:
<marquee width="60%" direction="left" height="100px">
This is a sample scrolling text that has scrolls texts to left.
</marquee>
Scrolling speed:
Marquee speed can be changed using the "scrollmount" attribute. For example, if you are using scrollmount = "1" then
it sets the marque to scroll very slowly, and as you increase the "scrollmount," the scrolling speed will also increase.
<marquee behavior="scroll" direction="up" scrollamount="1">Slow Scrolling</marquee>
<marquee behavior="scroll" direction="right" scrollamount="12">Little Fast Scrolling</marquee>
<marquee behavior="scroll" direction="left" scrollamount="20">Fast Scrolling</marquee>
<marquee behavior="scroll" direction="right" scrollamount="50">Very Fast Scrolling</marquee>
HTML AUDIO AND VIDEO FILES
HTML Audio Tag Example

<!DOCTYPE>
<html>
<body>
<audio controls>
<source src="koyal.mp3" type="audio/mpeg">
Your browser does not support the html audio tag.
</audio>
</body>
</html>
NOTE: <source src="koyal.ogg" type="audio/ogg">
controls It defines the audio controls

which are displayed with
play/pause buttons.
autoplay It specifies that the audio will
start playing as soon as it is
ready.
src It specifies the source URL of
the audio file.
loop It specifies that the audio file
will start over again, every
time when it is completed.
HTML Audio Tag Attribute Example
Here we are going to use controls, autoplay, loop and src attributes of HTML audio tag.
<!DOCTYPE>
<html>
<body>
<audio controls autoplay loop>
<source src="koyal.mp3" type="audio/mpeg"></audio>
</body>
</html>
HTML Video Tag
HTML 5 supports <video> tag also. The HTML video tag is used for streaming video files
such as a movie clip, song clip on the web page.
Currently, there are three video formats supported for HTML video tag:
mp4
webM
ogg
Let's see the table that defines which web browser supports video file format.
HTML Video Tag Example
Let's see the code to play mp4 file using HTML video tag.
<!DOCTYPE>
<html>
<body>
<video controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the html video tag.
</video>
</body>
</html>
NOTE: <source src="movie.ogg" type="video/ogg">
Attributes of HTML Video Tag
Let's see the list of HTML 5 video tag attributes.
controls It defines the video controls which is

displayed with play/pause buttons.
height It is used to set the height of the video
player.
width It is used to set the width of the video
player.
autoplay It specifies that the video will start
playing as soon as it is ready.
loop It specifies that the video file will start
over again, every time when it is
completed.
muted It is used to mute the video output.
src It specifies the source URL of the video

file.
CSS
• CSS stands for Cascading Style Sheets

• Styles define how to display HTML elements
• CSS adds new look to html tags
• External Style Sheets can save a lot of work
• Styles are normally saved in external .css files.
CSS Syntax
A CSS rule has two main parts: a selector, and one or more declaration
• The selector is normally the HTML element you

want to style
• Each declaration consists of a property and a
value.
• The property is the style attribute you want to
change.
• Each property has a value.
CSS Selectors:
CSS selectors are used to select the content
you want to style. Selectors are the part of CSS rule
set.
There are several different types of selectors in CSS.
1. CSS Element Selector
2. CSS Id Selector
3. CSS Class Selector

CSS Element Selector
The element selector selects the HTML element by name.
The id Selector
• The id selector is used to specify a style for a single, unique element.
• The id selector uses the id attribute of the HTML element, and is defined
with a "#".
The class Selector
• The class selector is used to specify a style for a group of elements. Unlike
the id selector, the class
• Selector is most often used on several elements.
• This allows you to set a particular style for many HTML elements with the
same class.
• The class selector uses the HTML class attribute, and is defined with a ".“
Note:
“id” is unique in a page and can only apply to at most one element, while
“class” selector can apply to multiple elements.
Types of CSS
• Inline CSS - Style Attribute
• Internal/Embedded CSS - <STYLE> tag
• External CSS - <LINK> tag
Inline CSS:
An inline style can be used to apply a unique style to one single
occurrence of an element. And the style can be defined within the basic HTML
tag.
To use inline styles, use the style attribute in the relevant tag. The
style attribute can contain any CSS property.
Internal/Embedded CSS
This type of CSS is only for Single Page.
When using internal CSS, we must add a new tag, <style>, inside the <head>
tag.
External Style Sheet

• When using CSS it is preferable to keep the CSS separate from your HTML.
• Placing CSS in a separate file allows the web designer to completely
differentiate between content (HTML) and design (CSS).
• External CSS is a file that contains only CSS code and is saved with a ".css"
file extension.
• This CSS file is then referenced in your HTML using the <link> instead of
Division tag:
The <div> tag defines a division or a section in
an HTML document. The <div> tag is used as a container
for HTML elements - which is then styled with CSS or
manipulated with JavaScript.
The <div> tag is easily styled by using the class or id
attribute. Any sort of content can be put inside the <div> tag!
What’s the difference between margin and padding in CSS?
In CSS, a margin is the space around an element’s border,
while padding is the space between an element’s border and the
element’s content. Put another way, the margin property controls
the space outside an element, and the padding property controls
the space inside an element.
<Span> tag:
A <span> element used to color a part of a text:
The <span> tag is used to group inline-elements in a document
Example:
<p>My mother has <span style="color:blue;font-weight:bold">blue</span> eyes and my father has
<span style="color:darkolivegreen;font-weight:bold">dark green</span> eyes.</p>
Output:
With CSS, links can be styled in many different ways .

The four links states are:
a:link - a normal, unvisited link

a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked
<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
color: green;
}
/* visited link */
a:visited {
color: orange;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}
</style>
</head>
<body>
<h2>CSS Links</h2>
<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>
</body>
</html>
When setting the style for several link states, there are some order rules:
a:hover MUST come after a:link and a:visited
a:active MUST come after a:hover
Text decoration : It is used to remove the hyper link
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
text-decoration: none;
}
a:visited {
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
</style>
</head>
<body>
<h2>CSS Links</h2>
<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>
</body>
</html>
Link Buttons: This example demonstrates a more advanced example where we combine several CSS properties to display links as boxes/buttons:
<html>
<head>
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
display: inline-block;
}
a:hover, a:active {
background-color: green;
}
</style>
</head>
<body>
<h2>Link Button</h2>
<p>A link styled as a button:</p>
<a href="default.asp" target="_blank">This is a link</a>
</body>
</html>
<style>
tr:nth-child(odd) {
background-color: #f2f2f2;
}
</style>
Text Transform
• The text-transform property is used to specify uppercase and
lowercase letters in a text.
h5{ text-transform: uppercase; }
h5{ text-transform: lowercase; }
Word Spacing
• With the CSS attribute word-spacing you are able to specify the
exact value of the spacing
Between your words. Word-spacing should be defined with exact values.
p { word-spacing: 10px; }
CSS Letter Spacing
• With the CSS attribute letter-spacing you are able to specify
the exact value of the spacing
Between your letters. Letter-spacing should be defined with exact
values.
p { letter-spacing: 3px; }

HTML & Css Chapter Notes

Uploaded by

Copyright:

Available Formats

HTML & Css Chapter Notes

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML & Css Chapter Notes

Uploaded by

Copyright:

Available Formats

WEB DESIGN COURSE

2. Types of webpages [static, dynamic and server webpage]

3. Html [Hypertext markup language]

4. Languages Types [Programming languages and scripting]

5. Markup Language and types of markup languages

6. What is tag? how to represent tag? Types of tags?

7. Structure of html program

8. Example of first html program

9. Heading level tags

10. Paragraph tag

11. Horizontal tag

12. Line break or break tag

13. Pre tag [pre formatted text tag]

14. Style attribute [background-color, color, font-family, font-size and text-align]

15. Formatting tags

16. Anchor tag

1. Programming Languages : To generate software’s [we use a single programming language]

2. Scripting Languages : To create webpages [We use multiple scripting languages]

The HTML <br> element defines a line break.

<p>This is<br>a paragraph<br>with line breaks.</p>

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

 Use the style attribute for styling HTML elements

2. Set background color for two different elements:

href attribute of HTML anchor tag

The syntax of HTML anchor tag is given below.

 Note: Hypertext references can be Internal, Local, or Global.

Attribute Value Symbol Description

Disc • Black filled circle

Circle o Empty circle

Description List or Definition List:

HTML Table - Add a Border

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

<marquee width="100%" behavior="scroll" bgcolor="pink">

<marquee width="100%" behavior="slide" bgcolor="pink">

<marquee width="100%" behavior="alternate" bgcolor="pink">

HTML Audio Tag Example

controls It defines the audio controls

controls It defines the video controls which is

src It specifies the source URL of the video

• CSS stands for Cascading Style Sheets

• The selector is normally the HTML element you

3. CSS Class Selector

External Style Sheet

With CSS, links can be styled in many different ways .

a:link - a normal, unvisited link

You might also like