Scribd
Upload
22 views

HTML5_and_CSS_Notes (1)

Uploaded by

akshaya.mylapuram
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
22 views

HTML5_and_CSS_Notes (1)

Uploaded by

akshaya.mylapuram
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 29

Introduction to

HTML and CSS


Contents

Introduction to HTML

1.1 Welcome to the Web ................................................................................................ 3


1.2 HTML Basics ............................................................................................................ 4
1.3 HTML Tags ............................................................................................................... 4
1.4 Creating and Viewing a Webpage ............................................................................ 5
1.4 HTML Lists ................................................................................................................ 8
1.5 HTML Images ......................................................................................................... 10

Introduction to CSS

2.1 CSS Basics ............................................................................................................. 12


2.2 Styling using CSS Selectors ................................................................................... 13

HTML – Links, Tables and Comments

3.1 HTML Links ............................................................................................................ 18


3.2 HTML Table ............................................................................................................ 21
3.3 HTML Comments.................................................................................................... 22

CSS Text Properties

4.1 CSS Zen Garden .................................................................................................... 23


4.2 CSS Family Property .............................................................................................. 23
4.3 Font Size Property ................................................................................................. 26
4.4 Other CSS Text Properties ..................................................................................... 27

2
Introduction to HTML
Welcome to the Web!
Internet is a worldwide web of computer networks which has revolutionised the way people
communicate, exchange views, search for information, shop and so on. One of the most popular services
on the internet is the World Wide Web or WWW. WWW is a collection of interconnected webpages
that are identified by an address called the URL( Uniform Resource Locator). A web page is a page
containing texts, images, audio, videos and links to other webpages. These pages are written using a
special language called Hyper Text Markup Language (HTML). We use Cascading Style Sheets
(CSS) for styling a website. A software application called the web browser is used to view the HTML
pages.

Web – Computers connected together that have websites

Web server is a program or the computer that provides web services.

Web Browser is an Application or program that displays a World Wide Web document. It usually uses
the internet service to access the document. E.g. Chrome, Mozilla Firefox, Internet Explorer, Safari etc.

Clients – Device on which the web browser is being used to access a website. E.g. Phone, Desktop,
Tablet, Laptop, Gaming Console.

3
HTML Basics
HTML is widely used language to write Web pages. It is used to format web pages with the help of
different tags available in HTML language.

 Hypertext refers to the way in which Web pages (HTML documents) are linked together. Thus,
the link available on a webpage is called Hypertext.

 As its name suggests, HTML is a Markup Language which means you use HTML to simply
"mark-up" a text document with tags that tell a Web browser how to structure it to display.

The basic structure of HTML Document

HTML Tags
Commands in HTML are known as tags. A tag defines the manner in which the content should be
formatted and displayed in a web browser. All HTML tags are enclosed within angle brackets (< >)
Examples of tags - <body>, <h1>, <title>

A tag can be a container tag or an empty tag.

Container Tag – is a tag that needs to be closed. These tags are always used in pairs.
Eg. Header<h1>Hello World</h1> Header, body etc.

Empty Tag – A tag that does not require a closing tag.


Eg. <hr> and <br> Horizontal and break tags.

ATTRIBUTE- An attribute is a special keyword used inside a tag to specify additional information about
the tag to customise it.
Eg. <h1 align =”centre”>
‘align’ is an attribute of header 1 that indicates the <h1> to be displayed in the centre

Tag Description
<!DOCTYPE...> This tag defines the document type and HTML
version.
<html> This tag encloses the complete HTML document and

4
mainly comprises of document header which is
represented by <head>...</head> and document
body which is represented by <body>...</body>
tags.
<head> This tag represents the document's header which
can keep other HTML tags like <title>, <link> etc.
<title> The <title> tag is used inside the <head> tag to
mention the document title.
<body> This tag represents the document's body which
keeps other HTML tags like <h1>, <div>, <p> etc.
<h1> This tag represents the heading.
<p> This tag represents a paragraph

HTML Editors
To create an HTML document you require an HTML editor. This is a software program that enables you
to easily create HTML document.

There are two types of HTML Editors:

1. WYSIWYG – stands for What You See Is What You Get.


These editors provide an in-built interface wherein you can quickly design webpages.
Example – Adobe Dreamweaver, Microsoft Expression Web, Google Sites, Kompozer etc.

2. Text Editors – such as NotePad, Notepad ++, WordPad


These let us create HTML documents by writing HTML commands.

Creating and Viewing Webpages


My First Webpage
Creating and Saving HTML documents using Text Editor- Notepad.

Step 1 – Using Cortana, Open Notepad.


Step 2 – Type the HTML Code in the Notepad Window

Step 3 – Go to File menu and Save As – myfirstpage.html

5
Viewing HTML Documents
To view a HTML document you can use a web browser like Internet Explorer, Chrome, Mozilla Firefox,
Safari etc.

Step 1- Open Google Chrome and press Ctlr+O.

Step 2 – Choose the folder and file – myfirstpage.html

Step 3 – Click Open button. The webpage opens on Google Chrome.

6
Create a Webpage – “All About Cats”

Create a webpage that is “All About Cats”

Step 1 – Using Cortana, Open Notepad. Type the HTML code below.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>All about cats !!!</title>
</head>
<body>
<h1>All about cats </h1>
<h2>Basic info</h2>

<p>Cats, also called domestic cats, are small, carnivorous mammals. Domestic cats are often called
<em>house</em> cats when kept as indoor pets. Cats were probably first kept because they ate mice, and
this is still their main 'job' in farms throughout the world. Later they were kept because they are friendly
and good companions.<strong> A cat is sometimes called a <em>kitty</em>. A young cat is called a
kitten</strong>.</p>

<h2>Songs</h2>

<p>Three little kittens,


They lost their mittens,<br>
And they began to cry,<br>
Oh, mother dear,<br>
We sadly fear our mittens we have lost.</p>
</body>
</html>

NOTE
 <title> - The HTML has a title
 <body> body consists of headings and paragraphs.
 <h1> An HTML document can have up to 6 headings <h1> to <h6>. The h1 is most important
heading in the page and the largest font, h6 is the least important and the smallest font.

 The above document has 2 headings h1 and h2. Same heading can be used multiple times, here h2
is used twice.

7
 <p> The document has 2 paragraphs
 <br> is used to create a line break. It doesn’t contain an end tag. This tells the browser to shift too
next line.
 <em> - emphasizes the text, any text within this tag changes the text to italics
 <strong> - any text within this tag changes the text to bold.
 <hr>- is used to create a horizontal rule or a thematic break in an HTML to divide or separate
document sections.

Step 2 - Now go to File menu and Save As – All About Cats.

Step 3 - Goto Google, press Ctrl+O, Open from folder the file “All About Cats”.

HTML Lists
Lists are a great way of organising a lot of information in webpages. The two most commonly used lists
are:
 Ordered List
 Unordered List
Ordered List(<ol> Tag)
Also called numbered lists, used when list items have a specific numeric order or ranking.
The ordered list is enclosed within the <ol> and </ol>
Each list item is marked using <li>
Example of an ordered list – Top 3 most famous cats
<h3>Top 3 most famous Cats</h3>
<ol>
<li>Tom</li>
<li>Garfield</li>

8
<li>Top Cat</li>
</ol>

Unordered List(<ol> Tag)


Also called bulleted lists, used when list items that do not have any specific order.
The ordered list is enclosed within the <ul> and </ul>.
Each list item is marked using <li>

Example of an unordered list – Why Cats makes great pets


<h2>Why cats make great pets</h2>
<ul>
<li>They're playful</li>
<li>They're furry</li>
<li>They are very friendly!</li>
</ul>

Exercise - Add these lists to your file –“All About Cats.html” after h1 and observe the output of the lists.

9
HTML Images
Images enhance the overall appearance of a webpage. Images make the websites look interesting. While
designing the webpages, you should maintain a balance between the use of text and images. However,
excessive use of images may slow down the download of a webpage. The image file formats that are
supported by most web browsers – GIF,JPEG,PNG

Images are inserted in a webpage using the <img> tag.

Attribute is additional information given to a tag.

Attribute Description Example


Scr Specify the URL or oath of the <img src = “Sunflower.jpg”>
image to be displayed
height, width Specify the height and width of <img height =”100”, width
the image in pixels =”100”>
Align Used to align the image with <img align = “right”>
respect to margins
left, right, top, middle, bottom
Alt Used to specify an alternate text <img alt=”Picture of flower”>
that a browser will display if the
image cannot be loaded
Border Specifies the width of the border < img border = “6”>
around the image

Example of image code and output given below:

<img src= “Lotus.jpg” height = “100” width= “100” border = “6”>

<img src = “sunflower.jpg” height =”100” width =”100” border =”6” alt – “Sunflower Image”
align=”left”>

10
Exercise - add an Image after h1 to your file “All About Cats.html”. Use the code below as reference and
observe the output.

<h1>All about cats!</h1>

<img src="https://www.kasandbox.org/programming-images/animals/cat.png" alt="grey fluffy cat with


green eyes" width="203">

Go to Chrome, Ctrl+O, Open file

Practice
Fill in the blanks:

1. _____________________ is a collection of interconnected webpages identified by an address


called URL.
2. HTML stands for ______________________________________.
3. _________________________ is a HTML command that defines the manner in which the content
should be formatted and displayed by the browser.
4. ___________________________ is a computer that provides the web services.

11
5. The _____________________ tag is used to define the content of a webpage that is displayed in
the browser.
6. ________________________ tags have a starting as well as an ending tag.

Identify the following HTML tags:

1 Create a line break

2 Italicize text

3 Bold text

4 Add an image to the webpage

5 Create an Ordered List

6 Create an Unordered List

Answer the following:

1. What is Web browser? Give examples.


2. What are the two types of tags in HTML? Give one example for each.
3. List the tags that form the basic structure of an HTML document.
4. Explain briefly the two types of HTML editors?

Lab Zone:

A.Open Notepad and write the HTML code for creating a webpage “All Good Digital Citizens”

1. Heading 1 – “All Good Digital Citizen.


2. Heading 2 – “What is Digital Citizenship?”
3. Paragraph for heading 2 - A digital citizen is a person utilizing information technology (IT) in
order to engage in society, politics, and government. Karen Mossberger and others define digital
citizens as "those who use the Internet regularly and effectively".
4. Image - Add any relevant image that defines digital citizenship.
5. Heading 2 – “Roles and Responsibilities of Digital Citizens.
6. List – Create an unordered list with at least 6 roles and responsibilities of Digital Citizens.

B. Save the file with DigitalCitizen.html.

C. Open and view it in a web browser.

12
Introduction to CSS
Cascading Style Sheets, fondly referred to as CSS, is a simply designed language intended to simplify
the process of making web pages presentable. CSS allows you to apply styles to web pages. More
importantly, CSS enables you to do this independent of the HTML that makes up each web page.
CSS is easy to learn and understood but it provides powerful control over the presentation of an HTML
document.

CSS is maintained by The World Wide Web Consortium or W3C is a group that makes
recommendations about how the Internet works and how it should evolve.

Advantages of using CSS:

 CSS saves time: You can write CSS once and reuse same sheet in multiple HTML pages.
 Easy Maintenance: To make a global change simply change the style, and all elements in all the
webpages will be updated automatically.
 Search Engines: CSS is considered as clean coding technique, which means search engines won’t
have to struggle to “read” its content.
 Superior styles to HTML: CSS has a much wider array of attributes than HTML, so you can give a
far better look to your HTML page in comparison to HTML attributes.
 Offline Browsing: CSS can store web applications locally by this we can view offline websites.

CSS Basics
CSS Syntax

You can put your CSS rules into an HTML document using the <style> element. This tag is placed inside
the <head>...</head> tags. Rules defined using this syntax will be applied to all the elements available in
the document. Here is the generic syntax:

<head>
<style>
Style Rules
............
</style>
</head>

Example -
<head>
<style>
h1 {
color: white;
}
</style>
</head>

13
Styling using CSS Selectors
CSS: The element selector
The element selector is a way to select all the elements with a given tag name in a document, and apply
the same styles to each element with the tag name.

Note that you should only write the tag name, and not write brackets around the tag name — h1,
not <h1>.

Exercise – Change the color of headings h2 to green and background to blue in your “All About
Cats.html” using CSS.

<head>
<meta charset="utf-8">
<title>All About Cats !!!</title>
<style>

h2 {
color: green;
}

body {
background-color: yellow;
}
</style>
</head>

14
CSS: The ID selector
The id selector is a way to select only the element with the specified id, and apply styles to that element.
The selector must start with a pound sign (#) and then the id. The browser will then look for a tag in the
page that has an id attribute equal to that id.

The spelling and the casing must be exactly the same - #sun-descrip is different from #Sun-Descrip. The
page should not have multiple tags with the same id- every ID should be unique.

Example – here the same headings (h2) are given different id names. CSS ID selector is used to style the
headings differently.

Exercise – In your “All About Cats.html” Highlight the “Songs” paragraph to green, highlight the h2 –
“Basic Info” to purple, change entire body back ground to “white”
<head>
<meta charset="utf-8">
<title>All about cats !!!</title>
<style>

15
h2 {
color: green;
}
body {
background-color: white;
}
#cat-song {
background-color: green;
}
#cat-info-heading {
background-color: purple;
}
</style>
</head>

Change the following HTML tags to add IDs:


1. <h2 id = "cat-info-heading">Basic info</h2>
2. <p id ="cat-song">Three little kittens,

CSS: The Class Selector


The class selector is a way to select all of the elements with the specified class name, and apply styles to
each of the matching elements. The selector must start with a period (.) and then the class name. The
browser will look for all tags in the page that have a class attribute containing that class name.

The spelling and casing must be exactly the same - .cold-city is different from Cold-City. The class name
can't contain a space, but it can contain hyphens or underscores. Any tag can have multiple space-
separated class names.

16
Example – In the HTML below, all the words Apple are given a class name – “apples”, and all the words
banana are given the class name – “bananas”. Using CSS class selector the class “apples” color is changed
to red, and class “bananas” color is changed to yellow.

Exercise: Make the following changes in your “All About Cats.html”. to understand the use of class
selector.

1. add the below paragraphs to your “Song” and assign each <p> to a class = “song-lyrics”
<p class = “song-lyrics”Three little kittens,
They lost their mittens,<br>
And they began to cry,<br>
Oh, mother dear,<br>
We sadly fear our mittens we have lost.</p>

<p class = “song-lyrics”> Oh, mother dear,<br>


We sadly fear<br>
Our mittens we have lost.</p>

<p class = “song-lyrics”>What! Lost your mittens,<br>


You naughty kittens!<br>
Then you shall have no pie.<br>
Mee-ow, mee-ow,<br>
You shall have no pie.</p>

2. Now use class selector “songs-lyrics” to highlight the entire song “yellow” and use element
selector to highlight h2 “green”
<style>
h2 {
color: green;
}
.song-lyrics{

17
background-color: yellow;
}
</style>

Practice
Fill in the blanks:

1. CSS stands for ______________________________________________________.


2. _____________________is a group that makes recommendations about how the Internet works
and how it should evolve.
3. The _______________ selector is a way to select all the elements with a given tag name in a
document, and apply the same styles to each element with the tag name.
4. ___________ symbol is used to refer to an ID selector in CSS.
5. ___________ symbol is used to select a s CLASS selector in CSS.
6. ___________________ CSS property is used to change the text color.
7. ___________________ CSS property is used to highlight text.

Answer the following:


1. What is CSS? Give advantages of using CSS in HTML.
2. What is the syntax for styling in CSS? Give an example.
3. Explain the three CSS selectors with an example with syntax for changing text color.

Lab Zone:
A. Open Notepad and Open DigitalCitizen.html

1. Body – use CSS element selector and style the color of the entire background to yellow
2. Heading 1 – use CSS element selector to style text color to red.

18
3. Heading 2 – “What is Digital Citizenship?”- add id name “h2-one”
4. Paragraph – add class name – “para1”
5. Heading 2 – “Roles and Responsibilities of Digital Citizens” – add id name “h2-two”
6. List – add class name –“list-roles”
7. Use CSS class selector to style (a) para1 text color to blue (b) list-roles text color to pink
8. Use CSS id selector to style (a) h2-one highlighted in white (b) h2-two highlighted to cyan

B. Save the file.

C. Open and view your CSS styled HTML document it in a web browser.

19
HTML – Links, Comments and Tables
HTML Links
While surfing the internet, you come across several text strings or images which, when clicked open a
different webpage. These strings or images are called hyperlinks. Hyperlinks interconnect webpages.

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

Hyperlinks are defined with the HTML <a> tag:


<a href="url">link text</a>

The href attribute specifies the destination address (https://www.w3.org/People/Berners-Lee/ ) of the link.

The <a> stands for anchor, its anchoring a link to a webpage or a certain location on the same page. href
stands for hyper reference.

HTML Links – External Pages and Images

This allows you to connect one webpage to another webpage. You can add links for text and images from
external webpages to your HTML webpage using <a> tag and href.

Exercise: Create HTML below, we are creating a Webpage about Tim Berners-Lee called “Tim Berners-
Lee.html”

Note – the links to External website –

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML links</title>
</head>
<body>

<h1>HTML: HyperText Markup Language</h1>

<p>Tim Berners-Lee invented the first browser at CERN, to enable researchers to share their
research with each other.</p>
<br><a href = "https://en.wikipedia.org/wiki/Tim_Berners-Lee"> Read more about Tim
Berners-Lee on Wikepedia</a>
<p>

20
<a href="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f8/Tim_Berners-Lee.jpg/220px-
Tim_Berners-Lee.jpg"><img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f8/Tim_Berners-Lee.jpg/220px-
Tim_Berners-Lee.jpg" width="300">
<br>Image courtesy Wikepedia</a>
</p>

</body>
</html>

Note : When u move the mouse near the image and click on the pointer it takes you to the website that
gives the reference to the image.

HTML Links – Internal

HTML links can be used to connect one part of webpage to another part of the same webpage. Especially
for really long webpages.

Exercise – To your “Tim Berners-Lee.html” add a list of Videos of Tim Berners-Lee and a header h3.

<h3>Videos of Tim Berners-Lee: </h3>


<ul>
<li>The Next Web, TED talk, 2009</li>
<li>The Year Open Data Went Worldwide, TED talk, 2010</li>
<li>A Magna Carta for the Web, TED talk, 2014</li>
</ul>

Under the first link “Read more about Tim Berner-Lee on Wikipedia” add a link that will refer to the list
of the videos you created given at the end of the webpage.
To do this create a unique ID for h3 –
<h3 id = "list-of-videos"> Videos of Tim Berners-Lee: </h3>

21
<br><a href = "https://en.wikipedia.org/wiki/Tim_Berners-Lee"> Read more about Tim
Berners-Lee on Wikepedia</a>
<br><a href = "#list-of-videos"> Here are some videos of Tim Berners-Lee</a>

Note – “Here are some videos of Tim Berners-Lee” is now a link that takes you to the list at the end of the
Webpage.

HTML Tables
Tables let us present data in a row and column format. The basic HTML structure of a table consists of
the following tags

<th></th> <th></th>
<td></td> <td></td>

1. <table> tag : marks the beginning of a table and end tag - </table>

2. <tr> tag – defines a row in the table.

3. <th> tag – defines the header cell in the table.

4. <td> tag – defines a cell in the table..

5. <caption> tag – defines the title of the table.

6. <thead> tag – Groups a set of rows that describes the column labels of a table.

22
7. <tbody> tag - Groups a set of rows defining the main body of the table data.

NOTE – You can include text, images, lists, or even a hyperlink in a data cell.

Example – The HTML below creates a table for Books and Authors

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Tables</title>
</head>
<body>
<table>
<caption>Books and Authors details</caption>
<tr>
<th> Books</th>
<th> Authors</th>
</tr>
<tr>
<td> Life of Pi</td>
<td>Yann Martel</td>
</tr>
<tr>
<td>The Alchemist</td>
<td>Paulo Coelho</td>
</tr>
</body>
</html>

HTML Comments
The comment tag is used to insert comments in the source code. Comments are not displayed in the
browsers.

23
You can use comments to explain your code, which can help you when you edit the source code at a later
date. This is especially useful if you have a lot of code.

Example of an HTML comment:

<!--This is a comment. Comments are not displayed in the browser-->

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

Practice
Identify the HTML tags for the following:

1. Anchors a link to a webpage


2. Used for comments in HTML
3. Defines a row in a table
4. Defines a cell in a table
5. Used to add a caption to the table
6. Defines the header cell in the table.

State whether the statement below is True or False:

1. Hyperlinks interconnect webpages.


2. A link does not have to be text. It can be an image or any other HTML element.
3. href stands for high reference.
4. Hyperlink are only external.
5. HTML links can be used to send emails.

Lab Zone:
A. Open Notepad and Open DigitalCitizen.html

1. Remove all CSS style tags for body, h1, h2, list, paragraphs.
2. Add an external link reference, Text- Read more on Wikipedia, URL –
https://en.wikipedia.org/wiki/Digital_citizen
3. Add another external link reference to the image
4. Add an internal reference after h1, to refer to the list- “Role and Responsibilities of a Digital
Citizen”

B. Save the file.

C. Open and view your CSS styled HTML document it in a web browser.

24
CSS Text Properties
CSS Zen Garden
CSS Zen Garden - http://www.csszengarden.com/ is a website that is a demonstration of what can be what
accomplished using CSS based design. CSS allows complete and total control over the style of a hypertext
document.

CSS Zen Garden uses the exact same HTML and different CSS and shows how much a difference styling can make
to a webpage.

CSS font-family Property


The font-family property specifies the font family of the text, which changes how the letters look.
A specific font name can be specified, like font-family: "Arial", but that will only work if viewers also have "Arial"
on their computer. It's better to specify a generic family name (serif, sans-serif, monospace, cursive), because
then browsers will look for that sort of font on the viewer's computer.

p{
color: red;
font-family: sans-serif;
}

The best option is to give a comma separated list of font families, as then the browser will prefer the first but use
the others as backup options.

Look at the example HTML below to understand font family.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Challenge: Fancy font families</title>
<style>
#flinstones {
font-family: san-serif;
}
p{
font-family: cursive;
}
h4{
font-family: "Helvetica", monospace;
}
</style>
</head>
<body>
<p>Some fun theme songs of well known TV family...</p>
<h4>The Flinstones</h4>
<p id="flinstones">

25
Meet the Flintstones<br>
They're the modern stone age family<br>
From the town of Bedrock<br>
They're a page right of history</p>
</body>
</html>

CSS font-size Property


The font-size property specifies the size of the text. It can be specified as a fixed size in various units, a
percentage, or as a predefined keyword.

The "px" unit lets you size font in terms of pixels, which is the unit also used to size images and other elements.
The default font-size for body text is typically 12px.

There are several options for relative sizing: percentage (120%) and ems (1.2em) that will size the font relative to
the body size. There are also two relative keywords, that will size the font relative to its inherited size: smaller,
larger.
body {
font-size: 12px;
}
h2 {
font-size: 2em;
}

In the example above if your specify the body font size as 12px and set a relative sizing for h2 as font-size -2em
then the font size is 2*12= 24px. Twice as big as the body font size.

Look at the example HTML below to understand more about font size.

26
CSS Text Property
You can format the text in your HTML using more CSS Text Properties.

CSS Text Property Description Syntax

text-align This property is used to set the h1 {


horizontal alignment of a text. text-align: center;
}
A text can be left, right or
center aligned.
text-decoration The text-decoration property is h2 {
text-decoration: underline;
used to set or remove decorations
}
from text.
font-weight This property sets how thick or p {
thin characters in text should be font-weight: bold;
}
displayed.
font-style This property specifies the font h3 {
style for a text. font-style: italic;
}

Exercise: Try the below HTML to understand more about Text Properties using CSS.

<!DOCTYPE html>
<html>
<body>
<style>
h1 {
text-align: center;

27
}
h2 {
text-decoration: underline;
}
h3 {
font-size: 48px;
}
#p1{
font-weight: bold;
}
#p2{
font-style: italic;
}
#p3{
font-family: monospace;
}
</style>
<h1>This is heading 1.</h1>
<p id="p1">This is a paragraph1.</p>
<h2>This is heading 1.</h2>
<p id="p2">This is a paragraph2.</p>
<h3>This is heading 1.</h3>
<p id="p3">This is a paragraph3.</p>
</body>
</html>

28
Write the CSS property and the syntax used to style the following:

Tag Text Style CSS Property Syntax


<h1> Bold

<h2> Italics

<h3> Underline

<h4> Right align

<h5> Monospace font

29

You might also like