Scribd
Upload
125 views

Applying CSS To HTML Documents: IP Lab Manual Three

The document describes different methods of applying CSS styling to HTML documents, including inline styling, internal and external style sheets. It provides examples of each method. It also gives examples of using various CSS properties to style text, fonts, and backgrounds, such as setting colors, images, spacing and other properties. External style sheets allow styling multiple pages simultaneously from one CSS file.

Uploaded by

Frekidus
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
125 views

Applying CSS To HTML Documents: IP Lab Manual Three

The document describes different methods of applying CSS styling to HTML documents, including inline styling, internal and external style sheets. It provides examples of each method. It also gives examples of using various CSS properties to style text, fonts, and backgrounds, such as setting colors, images, spacing and other properties. External style sheets allow styling multiple pages simultaneously from one CSS file.

Uploaded by

Frekidus
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

IP lab Manual Three 2017

Applying CSS to html documents


1. In line style sheet
In line style sheet apply only for single element
<HTML>
<HEAD>
<title>css lab</title>
</HEAD>
<body>
<h1 style="color:blue">blue heading </h1>
</body></HTML>
2. Internal (Embedded) style sheet
<HTML>
<HEAD>
<STYLE TYPE="text/css">
H1
{ Embedded style sheet in the head section
color:red;
}
</STYLE>
</HEAD>
<body>
<TITLE>title</TITLE>
<h1>red heading1</h1>
<h1>red heading 2</h1>
</body></HTML>
3. External Style Sheets
One external style sheet document can change the layout of multiple webpage
Save it with doc1.htm Save it with doc2.htm
<HTML> <HTML>
<HEAD> <HEAD>
<link rel="stylesheet" <link rel="stylesheet" href="styl1.css">
href="styl1.css"> <title>css lab</title>
</HEAD>
<title>css lab</title>
<body>
</HEAD> <h1>heading in second document</h1>
<body> <p>paragraph in second document</p>
<h1>heading in first document</h1> </body></HTML>
<p> paragraph in first document</p>
</body></HTML>
Save it with Styl1.css
h1{color:brown}
body{background-image:url(“imagename”)}
p{margin-left: 20px}
Page | 1
IP lab Manual Three 2017
4. Sample examples of some of the CSS properties available.
CSS text property
<HTML><HEAD>
<style type="text/css">
body
{
color:red;
}
h1
{
Text-align:center;
Letter-spacing:10px;
text-decoration:underline;
Text-transform:uppercase;
}
p.par{
text-indent:30px;
}
p{
word-spacing:20px;
}
</style>
</HEAD>
<body>
<h1>html</h1>
<p class="par">It stands for hyper text markup language</p>
<p>it is not case sensitive </p>
</body></HTML>
CSS Font property
<HTML><HEAD>
<style type="text/css">
h1
{
font-style:italic;
Font-Variant:small-caps;
}
#par1{
font-family:Georgia;
Font-size:xx-large;
Font-weight:500;
}
</style></HEAD><body>
<h1>html</h1>
<p id="par">It stands for hyper text markup language</p>
<p>it is not case sensitive </p>
</body></HTML>

Page | 2
IP lab Manual Three 2017
Background property
Set the background color
<HTML>
<HEAD>
<style type="text/css">
body
{
background-color:brown;
}
h1{background-color: #00ff00}
h2{background-color: transparent}
p{background-color: rgb(250,0,255)}
</style>
</HEAD>
<body>
<h1>welcome</h1>
<p>DBU school of computing</p>
</body>
</HTML>
Set an image as the background color
<HTML>
<HEAD>
<style type="text/css">
body
{
background-image:URL(a.png);
background-repeat:no-repeat;
}
</style>
</HEAD>
<body>
<h1>welcome</h1>
<p>DBU school of computing</p>
</body></HTML>

Page | 3

You might also like