Scribd
Upload
3 views

CSS Practise Activities

The document provides various examples of CSS implementations, including inline styles, embedded styles, linked styles, and different selectors like IDs and classes. It showcases how to style HTML elements with different properties such as color, font size, and border styles. Additionally, it demonstrates the use of z-index for layering elements in a webpage.

Uploaded by

kavigamage62
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

CSS Practise Activities

The document provides various examples of CSS implementations, including inline styles, embedded styles, linked styles, and different selectors like IDs and classes. It showcases how to style HTML elements with different properties such as color, font size, and border styles. Additionally, it demonstrates the use of z-index for layering elements in a webpage.

Uploaded by

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

Sample CSS codes are given below try these CSS codes and get the relevant output.

In-line Style sheet


1 Font-Inline CSS

<html>
<head>
<title>In line Style Sheet</title>
</head>
<body>
<h1 style="color:red"> Fruits and Vegetables</h1>
<p style=color:blue; font-size:20px>We have many kinds of fruits and vegetables
in Sri Lanka <br> They are verydelicious</p><br>
</body>
</html>

2. Font_EmbeddedCSS

<html>
<head>
<title>Font Embedded CSS</title>
<style type="text/css">
h1{color:red; font-size:50px}
p {color:green; font-size:12px}
</style>
</head>
<body>
<h1> Fruits and Vegetables</h1>
<p>We have many kinds of fruits and vegetables in Sri Lanka <br> They are very
delicious</p><br>

</body>
</html>
3.
Linking Style Sheet

Save as: linking_style.html


<HTML>
<HEAD>
<TITLE>Linking Style Sheet</TITLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="linking.css">
</HEAD>
<BODY>

<H1> This is an element type selector </H1>


<P>This is an element type selector</P><br>
<P class=para1>This is a class selector type style</P>
<P id=para1>This is a ID selector type style sheet</p>
<P class=para2>This is a class selector type style sheet</p>

</BODY>
</HTML>
Save as: linking.css

H1{color:green; font-size:50px}
P {color:red; font-size:12px}
.para1{
font-family: Verdana, Geneva, Arial;
font-size: 20px;
font-weight: bold;
height: 2px;
color:blue;
}
.para2{
font-family: Verdana, Geneva, Arial;
font-size: 16px;
color:blue;
}
#para1{
border-style: double;
border-color: Fuchsia;
font: italic;
color:green;
}
4. ID- CSS

<html>
<head>
<style type="text/css">
#id123{color:red}
</style>
</head>
<body>
<h1 id="id123"> Heading 1</h1>
<p>content 1</p>
<h1>Heading 2</h1>
<p>content</p>
</body>
</html>

5. Element CSS

<html>
<head>
<style type="text/css">
h1{color:red}
h2{color:blue}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Item 1</h2>
<h1>Heading 2</h1>
<h2>Item 2</h2>
</body>
</html>

6. Group-CSS

<html>
<head>
<style type="text/css">
h1,h2,h3,{font:24pix"MSP Mincho"; color:blue}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
</body></html>
7. V-Link

<html>
<head>
<style type="text/css">
A:link{color:yellow; font-size:large}
A:visited{color:blue; font-size:small}
A:active{color:green; font-size:x-large}
</style>
</head>
<body>
<a href="goya.html">Back to top</a>

8. Span and Div Save as: divspan.html

<p class=para1>This is my First Css File.<br/>


This is my First Css File.<br/>
This is my First Css File.<br/>
<span class=para2>This is my First Css File.</span><br/>
This is my First Css File.<br/>
This is my First Css File.<br/>
</p>

<div class=para2>ddddddddddddddddddd<br/>
ddddddddddddddddddd<br/>
ddddddddddddddddddd<br/>
ddddddddddddddddddd<br/>
<div id=para1>ddddddddddddddddddd<br/> Save as: div.css
ddddddddddddddddddd<br/>
ddddddddddddddddddd<br/>
ddddddddddddddddddd<br/></div> H1{color:green; font-size:50px}
ddddddddddddddddddd<br/> P {color:red; font-size:12px}
ddddddddddddddddddd<br/></div>
.para1{
font-family: Verdana, Geneva, Arial;
font-size: 20px;
font-weight: bold;
height: 2px;
color:blue;
}
.para2{
font-family: Verdana, Geneva, Arial;
font-size: 16px;
color:blue;
}
#para1{
border-style: double;
border-color: Fuchsia;
font: italic;
color:green;
}
8. Common Sample CSS

Write the CSS code required to produce the given output together with the following HTML
code?

<html>
<head>
<title> CSS</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div class="gothic">this Character is display as MS p gothic</div>
<div class="arial">this Character is display as arial</div>
<div class="times">this Character is display as times</div>
<!--Specify Font style-->
<div id="italic">this Character is display as times and italic letters</div>
<!--Specify Font weight-->
<div id="font1">this Character is display font weight as normal</div>
<div id="font2">this Character is display font weight as bolder</div>
<div id="font3">this Character is display font weight as 700</div>
<div id="font4">this Character is display font weight as 900</div>
<!--Specify Font Size-->
<div class="font5">this Character is display font-size 1in</div>
<div class="font6">this Character is display font-size 10mml</div>
<div class="font7">this Character is display font-size 1pc</div>
<div class="font8">this Character is display font-size 2em</div>
<div class="font9">this Character is display font-size 12px</div>
<div class="font10">this Character is display font-size 12pt</div>
<div class="font11">this Character is display font-size 1cm</div>
<!--decoration of text-->
<div id="text1">this Character is display text-decoration underline</div>
<div id="text2">this Character is display text-decoration line-through</div>
<!--Specify Character Spacing-->
<div class="fonta">this Character is display letter-spacing normal</div>
<div class="fontb">this Character is display letter-spacing 12px</div>
<div class="fontc">this Character is display letter-spacing -3</div>
<!--Specify line height-->
<div id="linea">this Character is display line-height 36px</div>
<div id="lineb">this Character is display line-height 250%</div>
<!--Specify the borderline color-->
<p class="border1"> At the border color <span class="co">is red and</span>
weight is 7px </p>
</body>
</html>
10. Border Styles
9. Border Styles

<html>
<head>
<style type="text/css">
p.dotted {border-style: dotted}
p.dashed {border-style: dashed}
p.solid {border-style: solid}
p.double {border-style: double}
p.groove {border-style: groove}
p.ridge {border-style: ridge}
p.inset {border-style: inset}
p.outset {border-style: outset}
</style></head>
<body>
<p class="dotted">A dotted border</p>
<p class="dashed">A dashed border</p>
<p class="solid">A solid border</p>
<p class="double">A double border</p>
<p class="groove">A groove border</p>
<p class="ridge">A ridge border</p>
<p class="inset">An inset border</p>
<p class="outset">An outset border</p>
</body>
</html>

Border Styles (out put)


10. Z- index

<html>
<head>
<style type="text/css">
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
</head>

<body>
<h1>This is a Heading</h1>
<img class="x" src="bulbon.gif" width="100" height="180">
<p>Default z-index is 0. Z-index -1 has lower priority.</p>
</body>

</html>

You might also like