Scribd
Upload
73 views

Aim: Apply Style Sheets in Web Pages.: Styling HTML With CSS

This document discusses three methods for styling HTML documents with CSS: inline, internal, and external CSS. Inline CSS uses the style attribute, internal CSS defines styles within <style> tags in the <head>, and external CSS links to a separate .css file. Examples are given of each method where various HTML elements are styled with properties like color, font, and text alignment. The document demonstrates how to write and link the CSS code to an HTML file to style the text.

Uploaded by

Harsh Dudhat
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
73 views

Aim: Apply Style Sheets in Web Pages.: Styling HTML With CSS

This document discusses three methods for styling HTML documents with CSS: inline, internal, and external CSS. Inline CSS uses the style attribute, internal CSS defines styles within <style> tags in the <head>, and external CSS links to a separate .css file. Examples are given of each method where various HTML elements are styled with properties like color, font, and text alignment. The document demonstrates how to write and link the CSS code to an HTML file to style the text.

Uploaded by

Harsh Dudhat
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 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

You might also like