Está en la página 1de 5

Jadhav Mayur P.

176120316022
Practical-6

Aim: Apply Style Sheets in Web Pages.

Styling HTML with CSS


 CSS stands for Cascading Style Sheets.
 CSS describes how HTML elements are to be displayed on screen, paper, or in other
media.
 CSS saves a lot of work. It can control the layout of multiple web pages all at once.
 CSS can be added to HTML elements in 3 ways:

 Inline - by using the style attribute in HTML elements


 Internal - by using a <style> element in the <head> section
 External - by using an external CSS file

1. Inline CSS:-
 An inline CSS is used to apply a unique style to a single HTML element.
 An inline CSS uses the style attribute of an HTML element.
 We used Inline CSS in our last practices.
2. Internal CSS:-
 An internal CSS is used to define a style for a single HTML page.
 An internal CSS is defined in the <head> section of an HTML page, within
a <style> element:

Now See the following example of HTML Internal CSS. After writing following code
in any text editor Save it with .HTML and Run it one any Browser.

HTML File:-
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {color: black;
text-align: center;
font-family: monospace;
font-size: 40px;
}
h1
Internet Technology
Jadhav Mayur P. 176120316022
{
color: red;
background:yellow;
font-family: monospace;
font-size: 30px;
}
h2
{
color:blue;
background:yellow;
font-family:monospace;
font-size: 30px;
}
h3
{
color:yellow;
background: red;
font-family: monospace;
font-size: 35px;
}
h4
{
color:powderblue;
background: green;
font-size: 40px;
}
</style>
<title>CSS STYLE TAGS</title>
</head>
<body>
<marquee> <p><b><u> CSS STYLE TAGS</u></b> </marquee><br>
<h3> HTML page using <u>Internal</u> css style </h3>
<h1>There are <u>three</u> types of CSS document<BR> </h1>
<h2><u>1.Inline CSS <br>2.Internal CSS <br> 3.External CSS </u> </h2>
<h4>Internal CSS document is also referred as<u> EMBEDED CSS Document
</u></h4>
</body>
</html>

Database Management System


Jadhav Mayur P. 176120316022
3. External CSS:-
 An external style sheet is used to define the style for many HTML pages.
 With an external style sheet, you can change the look of an entire web site, by
changing one file.
 To use an external style sheet, add a link to it in the <head> section of the
HTML page:

Here one example is shown of HTML document.

Write following code it any Text Editor and Save it using .HTML extension.

<html>

<head>

<title>LINKED STYLE SHEETS</title>

<link rel="stylesheet" type="text/css" href="link.css">

</head>

<body>

<marquee> <p><b><u> CSS STYLE TAGS</u></b> </marquee><br>

<h3> HTML page using <u>External</u> CSS STYLE </h3>

<h1>There are <u>three</u> types of CSS document<BR> </h1>

<h2><u>1.Inline CSS <br>2.Internal CSS <br> 3.External CSS </u> </h2>

<h4>External CSS is also referred as<u> LINKED STYLE-SHEETs</u></h4>

</body>

</html>

There is no effect of this file because in External CSS we have to make one External
file with .CSS extension.

Database Management System


Jadhav Mayur P. 176120316022
CSS File:
p{

color: black;

text-align: center;

font-family: monospace;

font-size: 40px;

h1

color: red;

background:yellow;

font-family: monospace;

font-size: 30px;

h2

color:blue;

background:yellow;

font-family:monospace;

font-size: 30px;

h3

Database Management System


Jadhav Mayur P. 176120316022
color:yellow;

background: red;

font-family: monospace;

font-size: 35px;

h4

color:powderblue;

background: green;

font-size: 40px;

In CSS file description of tags which we are using are written.

OUTPUT:-

Database Management System