1. Representing By: Aamir Sohail
Html and cssHtml and css
Department Of Computer ScienceDepartment Of Computer Science
Govt Post Graduate College Dargai MalakandGovt Post Graduate College Dargai Malakand
2. Page 2
Hypertext Markup Language
HTML is a markup language for describing web documents (web pages).
HTML stands for Hyper Text Markup Language
A markup language is a set of markup tags
HTML documents are described by HTML tags
Each HTML tag describes different document content
3. Page 3
Markup LanguageMarkup Language
Markup languages are designed for the
processing, definition and presentation of text.
The language specifies code for formatting, both the layout
and style, within a text file.
The code used to specify the formatting are called tags.
HTML is an example of a widely known and used markup language.
5. Page 5
A small HTML document:A small HTML document:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
6. Page 6
The DOCTYPE declaration defines the document type to be
The text between <html> and </html> describes an HTML
The text between <head> and </head> provides information
about the document
The text between <title> and </title> provides a title for the
The text between <body> and </body> describes the visible
The text between <h1> and </h1> describes a heading
The text between <p> and </p> describes a paragraph
7. Page 7
HTML tags are keywords (tag names) surrounded by angle
<tag name>content</tag name>
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 slash before the tag name
12. Page 12
Save the HTML PageSave the HTML Page
Save the file on your computer.
Name the file "index.html" or any other name ending with html
You can use either .htm or .html as file extension. There is no
difference, it is up to you.
13. Page 13
View HTML Page in Your BrowserView HTML Page in Your Browser
Open the saved HTML file in your favorite browser.
To open a file in a browser, double click on the file, or right-
click, and choose open with.
The result will look much like this:
17. Page 17
Using CSS, you can control the color of the text,
the style of fonts,
the spacing between paragraphs,
how columns are sized and laid out,
what background images or colors are used,
variations in display for different devices and screen sizes as
well as a variety of other effects.
18. Page 18
CSS is easy to learn and understand but it provides
powerful control over the presentation of an HTML
Most commonly, CSS is combined with the markup
languages HTML or XHTML.
19. Page 19
Types of Cascading Style SheetTypes of Cascading Style Sheet
There are three ways of inserting a style sheet:
i. Inline style
ii. Internal style sheet
iii.External style sheet
20. Page 20
Inline Styles/Inline CSSInline Styles/Inline CSS
An inline style may be used to apply a unique style for a single
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:
<h1 style="color:blue;margin-left:30px;">This is
21. Page 21
Internal Style SheetInternal Style Sheet
An internal style sheet may be used if one single page has a
Internal styles are defined within the <style> element, inside
the <head> section of an HTML page:
Example of Internal Style sheet is on the next slide
23. Page 23
External Style SheetExternal Style Sheet
With an external style sheet, you can change the look of an
entire website by changing just one file!
Each page must include a reference to the external style
sheet file inside the <link> element. The <link> element goes
inside the <head> section:
<link rel=“stylesheet” type=“text/css href=“style.css />