1. HTML & CSS
Sukrit Gupta
sukritgupta91@gmail.com
2. • Invented in 1990 by a scientist called Tim
Berners-Lee.
• HTML stands for Hyper Text Markup Language.
• Hyper- Not simply Linear (ex- HyperLinking).
• Text- Collection of words.
• Markup- Is what we do with the text.(ex Bold, Bullets).
• Language- The system of linguistic signs or symbols.
• HTML is not a programming language.
• BUT it is a formatting language.
• Used in developing Web Pages.
3. • Web Page can be further divided into :-
• Structure-What the different part of content are and how
they are related.
• Presentation-How the content should be displayed and
formatted Visually.
• Behavior- How the content behaves on user Interaction.
• HTML is used to maintain STRUCTURE of the
document.
• CSS is used to maintain PRESENTATION of the
document.
• JAVASCRIPT is used to maintain BEHAVIOR of the
document.
• Each piece should be separate from the other and
only used for its intended purpose.
4. • HTML Tags<>
• HTML tags are keywords (tag names) surrounded by angle
brackets like <html>
• HTML tags normally come in pairs like <b> and </b>
• 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, with a forward slash
before the tag name
• Start and end tags are also called opening tags and closing
tags
• SYNTAX -> <tagname
attribute=“value”>content</tagname>
• Example-> <p id=“p1”> First
paragraph </p>
• HTML Elements
• HTML element is everything between the start tag and the end
tag, including the tags.
• HTML Element: <p>This is a paragraph.</p>
5. Sample Program OUTPUT:-
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
6. • <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML
4.01//en” http://www.w3.org/TR/html4/strict.dtd>
• The Identifier: indicates to the user-agent that the enclosed
information will define the type of document of the page.
• The TOP Element: Indicates the top level element type declared in
the DTD; for HTML it is <html>.
• The Availability: field indicates whether the identifier is a publicly
accessible object (PUBLIC) or a system resource (SYSTEM).
• The Formal Public Identifier: This entire string is what identifies the
Doctype.
• The Url: This is an optional URL indicating where then DTD for this
Doctype can be found.
• DTD: DTD stands for Document Type Definition.
• The text between <html> and </html> describes the web page.
• The text between <body> and </body> is the visible page
content.
7. • <head></head>: Do not contains any data to be
displayed in Content area of web page. Contains vital
info about page and other tags.
• <title></title>: Defines a title in the browser toolbar.
• <meta/>: Description and other information about page that is machine
parsable.
• <style></style>: To define style information for an HTML document.
• Heading Tag: It is used to give different headings in the
document.
• These are from <h1> to <h6>..
8. • <p> Paragraph </p> • <table border="1"> //To make a
• Unordered list: table
<tr> //table row
<th>Month</th> //column heading
<th>Savings</th>
• Ordered List: </tr>
<tr>
<td>January</td> // definition
• <a href=“ abc.com”>ABC</a> <td>$100</td>
• Used to create hyperlinks. </tr></table>
• <em>TEXT<em> Month Savings
• Emphasizes on text, Italics text, Text January $100
reader emphasizes more while
speaking this text.
February $80
• Width: Specifies the width of a table.
• Cellspacing: Specifies the space between
cells.
• Border: Specifies the width of the borders
around a table
9. • <form action="form_action.asp"
method="get">
// fielset and legend
• <form> tag is used to create an HTML
form for user input.
//<input type=“text”>
• Action: Specifies where to send the form-
data when a form is submitted //<input type=“text”>
• Method: Specifies the HTTP method to
use when sending form-data(get/post)
• <input type="text" name="fname" /> //<text area>
• To get input from the user.
• <label for="male">Male</label> //<select>
• To bind a Input field to some text.
• <textarea rows="2" cols="20"> Hey!! its //<input type=“submit”>
text Area </textarea>
• Provides a Large TextArea.
• <select ><option>Volvo</option>
• Provides a Drop down Menu.
10. • NEVER use HTML for visual formatting and appearance
purpose.
• For example:
• Do not use HEADING(<H1>……<H6>) tags just to increase or decrease
the size.
• Use these tags to differentiate logically between different kinds of
Headings like Main heading, Section heading, Sub-section heading.
• <Table> should not be used to manipulate LAYOUT.
• For example : Table should not be used to make header for pages just
because it can render data in a row smartly.
• HTML shoul be only used to make the Structure of the
page.
11. • CSS stands for Cascading Style Sheets.
• Styles define how to display HTML elements.
• CSS is used to manage the PRESENTATION part of the web
page.
• CSS separates HTML part from presentation part.
• External Style Sheets can save a lot of work.
• External Style Sheets are stored in CSS files.
• Pages download faster, sometimes by as much as 50%
• You have to type less code, and your pages are shorter and
neater.
• Updating your design and general site maintenance are made
much easier, and errors caused by editing multiple HTML
pages occur far less often.
12. • Three ways to implement CSS in a page are:-
• Internal Stylesheet
• An internal style sheet should be used when a single document has a unique
style. It is embedded generally inside the <head> tag
• Ex. <head><style type="text/css">
p {margin-left:20px;></style></head>
• External Style Sheet (BEST APPROACH)
• An external style sheet is ideal when the style is applied to many pages. With
an external style sheet, we can change the look of an entire Web site by
changing one file.
• An external style sheet can be written in any text editor. The file should not
contain any html tags. The style sheet should be saved with a .css extension.
• Ex. <head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head>
• Inline Style Sheet
• To use inline styles, use the style attribute in the relevant tag. The style
attribute can contain any CSS property.
• Ex. <p style="color:sienna;margin-left:20px">This is a paragraph.</p>
13. • CSS has three parts:-
• Selector: Element which is to be modified. Here h1 is
selector.
• Property: Element’s which property is to be modified. Ex
Color.
• Value: Change the property to what.
• SYNTAX: selector { property: value }
• Combining selectors:
• h1, h2, h3, h4, h5, h6 { color: #009900;font-family: Georgia, sans-serif;}
14. • 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 style rule below will be applied to the element with id="para1":
• Example
• 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 ".“
• EX. .centerclass {text-align:center;}
15. • Psuedo Selectors
• a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
• Values assigned to selectors(SPECIFICITY)
• Id SELECTOR - 100points
• Class SELECTOR – 10 points
• Other element – 1 point each.
• The style applied to a element depends upon
declaration has the max points.
• If more than one selector is applied to an element
in a declaration then their points are added.
16. • All HTML elements can be considered
as boxes. In CSS, the term "box
model" is used when talking about • Explanation of the different parts:
design and layout. • Margin - Clears an area
• The CSS box model is essentially a around the border. The
box that wraps around HTML
elements, and it consists of: margins, margin does not have a
borders, padding, and the actual background color, it is
content. completely transparent
• The box model allows us to place a
border around elements and space • Border - A border that goes
elements in relation to other around the padding and
elements. content. The border is
• The image below illustrates the box affected by the background
model: color of the box
• Padding - Clears an area
around the content. The
padding is affected by the
background color of the
box
• Content - The content of
the box, where text and
images appear
17. • BLOCK :A block element is an element that takes
up the full width available, and has a line break
before and after it.
• Examples of block elements:
• <h1>
• <p>
• <div>
• EX. Span {display:block;}
• INLINE: An inline element only takes up as much
width as necessary, and does not force line breaks.
• Examples of inline elements:
• <span>
• <a>
• EX. Span {display:inline;}
18. • FLOAT
• Elements are floated horizontally, this means that an element can only be
floated left or right, not up or down.
• A floated element will move as far to the left or right as it can. Usually this
means all the way to the left or right of the containing element.
• The elements after the floating element will flow around it.
• The elements before the floating element will not be affected.
• Ex {float: left}
• CLEAR
• The clear property specifies which sides of an element where other
floating elements are not allowed.
• EX. {clear:both;}
19. • Rules to check out if something gone wrong.
• Is the element IN THE FLOW or OUT OF THE FLOW?
• IN THE FLOW means below element respects the position of
above element.
• Is the element rendering in BLOCK display context or
INLINE display context.
• Always Remember the SPECIFICITY of the elements.
Find which declaration is effecting the element in
consideration.