HTML, CSS - 2

HTML CSS Continuation
HTML class Attribute

The class attribute is often used to point to a class name in a style sheet. It can also
be used by a JavaScript to access and manipulate elements with the specific class
name.
In the following example we have three <div> elements with a class attribute with the
value of "city". All of the three <div> elements will be styled equally according to
the .city style definition in the head section:
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>My <span class="note">Important</span> Heading</h1>

<p>This is some <span class="note">important</span> text.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
.main {
text-align: center;
</style>
</head>
<body>
<h2>Multiple Classes</h2>
<p>Here, all three h2 elements belongs to the "city" class. In addition, London also
belongs to the "main" class, which center-aligns the text.</p>
<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>
</body>
</html>
HTML Meta Data
Metadata is used by browsers (how to display content or reload page), search

engines (keywords), and other web services.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Lesson">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>All meta information goes in the head section...</p>
</body>
</html>
HTML Versions
1. HTML 1.0
The basic version of HTML has support for basic elements like text controls and
images. This was the very basic version of HTML with less support for a wide
range of HTML elements.
2. HTML 2
HTML version 2.0 was developed in 1995 with basic intention of improving HTML
version 1.0
Now a standard got started to develop so as to maintain common rules and

regulations across different browsers. HTML 2.0 has improved a lot in terms of
the markup tags. In HTML 2.0 version concept of form came into force. Forms
were developed but still, it was having basic tags like text boxes, buttons, etc.
3. HTML 3.2
It was developed in 1997. After HTML 2.0 was developed, the next version of
HTML was 3.2
With version 3.2 of HTML, HTML tags were further improved. It is worth noting
that because of W3C standard maintenance, the newer version of HTML was 3.2
instead of 3.
4. HTML 4.01
It was developed in 1999 It extended the support of cascading styling sheets. In

version 3.2, CSS were embedded in HTML page itself. Therefore, if the website
has various web pages to apply to the style of each page, we must place CSS
on each web page. Hence there was a repetition of the same block of CSS.
5. HTML5
This is the latest version of HTML. For a developer, it could be used in 2014. It
came up with lots of HTML tags support. HTML5 provided support for new form
elements like input element s of different types, geolocations support tags, etc.
Let us look at few of the tags which were added to HTML5
Email – New HTML5 tag which was added is the input element of type email.
This is a form tag although it could be used outside of a form tag also. This tag
checks the validation of the input value. It checks whether the value inserted is
a valid email.
Password – This is another form tag that was added to receive a password
from the user. Being the password type field, what user types in the field is not
visible directly to the user but is represented by special symbols.
Audio tag – This is a new audio tag that was implemented in HTML5. This tag
helps to add audio to our web page.
Semantic tags – Semantic tags are also known as structural tags. Structural
tags are the tags that provide structure to the HTML page. It helps it divide the
HTML page into different structures. These structures get combined into an
HTML page itself to form an HTML web page. Few of the important HTML
semantic tags are <header>, <footer>.
Section tag – This tag is used to semantic a section in an HTML page.

A section tag represents a section in a web page.
HTML Multimedia
Multimedia comes in many different formats. It can be almost anything you can
hear or see, like images, music, sound, videos, records, films, animations, and
more.
HTML Video
The numbers in the table specify the first browser version that fully supports
the <video> element.
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
HTML Audio
There are three supported audio formats: MP3, WAV, and OGG. The browser
support for the different formats is:
<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
External CSS Codes
With an external style sheet, you can change the look of an entire website by
changing just one file!
External styles are defined within the <link> element, inside the <head>
section of an HTML page:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Save the above code as mystyle.css
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Save the above code as mystle.html (in the same folder)
Run the above HTML coding.

Internal CSS
An internal style sheet may be used if one single HTML page has a unique style.
Internal styles are defined within the <style> element, inside the <head>
section of an HTML page:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Inline CSS
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.
Inline styles are defined within the "style" attribute of the relevant element:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>

<p style="color:red;">This is a paragraph.</p>
</body>
</html>

HTML, CSS - 2

Uploaded by

Copyright:

Available Formats

HTML, CSS - 2

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 - 2

Uploaded by

Copyright:

Available Formats

HTML CSS Continuation

HTML class Attribute

<h1>My <span class="note">Important</span> Heading</h1>

<h2 class="city main">London</h2>

Metadata is used by browsers (how to display content or reload page), search

<meta name="description" content="Lesson">

<meta name="keywords" content="HTML,CSS,XML,JavaScript">

<meta name="author" content="John Doe">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<p>All meta information goes in the head section...</p>

Now a standard got started to develop so as to maintain common rules and

It was developed in 1999 It extended the support of cascading styling sheets. In

Let us look at few of the tags which were added to HTML5

Section tag – This tag is used to semantic a section in an HTML page.

<video width="320" height="240" controls>

<source src="movie.mp4" type="video/mp4">

<source src="movie.ogg" type="video/ogg">

Your browser does not support the video tag.

<source src="horse.ogg" type="audio/ogg">

<source src="horse.mp3" type="audio/mpeg">

Your browser does not support the audio element.

External CSS Codes

Save the above code as mystyle.css

Save the above code as mystle.html (in the same folder)

Run the above HTML coding.

<h1 style="color:blue;text-align:center;">This is a heading</h1>

You might also like