Scribd
Upload
151 views15 pages

Program: Internal - Css

The document discusses different ways of adding styles to HTML documents including internal CSS, inline CSS, external CSS, CSS classes, CSS pseudo-classes for links, CSS positioning, and CSS floats. Examples are provided for each method.

Uploaded by

Janani Shree
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
151 views15 pages

Program: Internal - Css

The document discusses different ways of adding styles to HTML documents including internal CSS, inline CSS, external CSS, CSS classes, CSS pseudo-classes for links, CSS positioning, and CSS floats. Examples are provided for each method.

Uploaded by

Janani Shree
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 15

PROGRAM

internal.css
<html>
<head>
<style>
body{background-color:blue;}
p{color:white;}
</style>
</head>
<body>
<h2>Internal css</h2>
<p>This page uses internal css using the style tag we are able to modify the
appearance of HTML element </p>
</body>
</html>

OUTPUT

Inline.html

<html>
<head><style></style></head>
<body>
<p style="background:blue;color:white;">
A new background and font color with inline css
</p>
<p style="background:url("http://www.tizag.com/csst.yellow-rock.gif");">
This is broken</p>
</body>
</html>

OUTPUT

externalcss.html

<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css"/>
</head>
<body>
<h3>A white header</h3>
<p>This paragraph has a blue font.The background color of this page is gray
because we changed it with css!</p>
</body>
</html>
Test.css
body{background-color:gray;}
p{color:blue;}
h3{color:white;}

OUTPUT

cssclass.html
<html>

<head>
<style>p.first{background-color:gray;}
p.second{background-color:red;}
p.third{background:purple;color:white;}
</style>
<body>
<h2>css classes </h2>
<p class="first">This is the p.first paragraph</p>
<p class="second">This is the p.second paragraph</p>
<p class="third">This is the p.third paragraph</p>
</body></html>

OUTPUT

csslinks.html
<html>
<head>
<style>
a:link{color:blue;
background-color:red;
fontsize:26px;
border:10px outset blue;
font-family:sans-serif;
text-transform:lowercase;
text-decoration:none;
}

a:visited{color:blue;
background-color:red;
font-size:26px;
border:10px outset blue;
font-family:sans-serif;
text-transform:lowercase;
text-decoration:none;
}

a:hover{color:blue;
background-color:red;
font-size:27px;
border:10px inset blue;

font-family:sans-serif;
text-transform:uppercase;
text.decoration:line-through;
letter-spacing:3px;
wordspacing:6px;
font-weight:normal;
}
a:link{text-decoration:none;color:gray;}
a:visited{text-decoration:none;color:gray;}
a:hover{text-decoration:none;
color:green;
font-weight:border;
letter-spacing:2px;
}
</style>
</head>
<body>
<h2>css pseudo classes(or)links</h2>
<p> This is a <a href="http://www.google.com ">link with pseudo classes </a>!
</p>
</body>
</html>

OUTPUT

cssposition.html
<html>

<head>
<style>
h3{position:absolute;top:200px;left:150px;}
p{position:absolute; top:75px; left:75px;}
</style>
</head>
<body>
<h3>This is my h3 header</h3>
<p>This is my paragraph</p>
</body>
</html>

OUTPUT

cssfloat.html
<html>

<head>
<style>img.floatleft{
float:left;
margin:4px;
}
img.floatright{
float:right;
marfin:4px;
}
</style></head><body><img src="sun.jpg" class="floatleft" width=200
height=200>
<p>The images are contained within the paragraph tag.The image has floated to
the left and also to the right because we have used both types of image floating in
this example.Notice how the text wraps around the images quite nicely</p>
<img src="mountain.jpg" class="floatright" width=200 height=200>
<p>This second paragraph has an image that is floated to the right.It should be
noted that a margin should be added to the images so that the text doesnot get too
close to the image.There should always be a few pixels between wordws and
borders,images and other content.</p>
</body>
</html>

OUTPUT

You might also like