Scribd
Upload
3K views

Css Practical File

This document provides examples of using different CSS properties including internal and external style sheets, styling images with borders, adding links and hover effects, and using the outline property. The examples demonstrate how to change text and background colors, font sizes, image borders, link colors on hover and active states, and outline thickness. CSS is used to style and lay out elements on HTML pages.

Uploaded by

archana awasthi
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3K views

Css Practical File

This document provides examples of using different CSS properties including internal and external style sheets, styling images with borders, adding links and hover effects, and using the outline property. The examples demonstrate how to change text and background colors, font sizes, image borders, link colors on hover and active states, and outline thickness. CSS is used to style and lay out elements on HTML pages.

Uploaded by

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

FACULTY OF NURSING

PRACTICAL FILE OF WEB DESIGNING &


INTERNET TECHNOLOGY

SUBMITTED TO : SUBMITTED BY:


Dr. Ashok Kumar Archana Awasthi
Banasthali Vidyapith Bsc. Nursing 3rdyear

Roll no. 1912179

ID. MDBSN19020
1. INTERNAL STYLE SHEET-
<html>
<head>
<title>HTML INTERNAL CSS</title>
<style type = “ text/css>
.red{
Color: red;
}
.thick{
Font – size: 20px:; }
.green{
Color:green;
}
</style>
</head>
<body>
<p class= “red”> This is red </p>
<p class=“thick”>This is thick</p>
<p class=“green”>This is green</p>
<p class=“thick green”> This is thick and green</p>
</body>
</html>

EXAMPLE-
<head>
<style>
body {background- color : powerblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
2- EXTERNAL STYLE SHEET
<html>
<head>
<LINK REL=STYLESHEET HREF= “mystyle.css Type=
“text/css”></head>
<body>
<h1>Hello how are you ?<h1>
Welcome
</body>
</html>
3. USING IMAGES-
<html>
<head>
</head>
<body>
<img style= “border:0px;” src=
“/css/images/logo.png”/>
<br />
<img style = “border:3px dashed red ; “
src=”/css/images/logo.png />
<img style= “border:1px solid red ; height:100px; “
src=”/css/images/logo.png”/>
</body>
</html>
Solid/dashed/dotted
Img {
border: 1px dotted red;
border – radius:25px;
padding: 25px;
width: 150px;
//to display in center display: block;
margin: right: auto;

4. ADD LINK
<html>
<head>
<style type= “type/css>
a: visited { color: #000000}
a:hover {color: #006600}
a:active {color: #FFCC00}
</style>
</head>
<body>
< a href= “”>Link</a>
</body>
<html>
5. THE OUTLINE WIDTH PROPERTY
<html>
<head>
</head>

<body>
<p style= “outline- width:thin; outline –
style:solid;>solid>
</p>
<br />

<p style = “outline – width:thick; outline-style: solid;”>


This text is having thick outline.
</p>
<br />

<p style= “outline-width:5px; outline-style:solid;”>


This text is having 5x outline.
</p>
</body>
</html>

You might also like