Posted by: magicalrubidium | August 10, 2008

C.S. html and css codes

css1>>>

body {
background-color:black;
}

h1.yellow
{
background-color:yellow;
}

h1.green
{
background-color:green;
}

p.white
{
background-color:white;
}

p.blue
{
background-color:blue;
}

p.orange
{
background-color:orange;
}

h2
{
background-color:red;
}

exer1>>>

<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”css1.css” />
</head>
<body>
<h1 class=”yellow”> This is a heading 1 </h1>

<p class=”white”> This is a paragraph with a white background <p>

<h2> This is a heading 2 </h2>

<p class=”blue”> This is a paragraph with a blue background <p>

<h1 class=”green”> This is a heading 1 </h1>

<p class=”orange”> This is a paragraph with a orange background <p>

</body>

</html>

exer 1-2>>>

<html>
<head>
<style type=”text/css”>
body {
background-color:black;
background-image:url(“sunset.jpg”);
background-repeat: no-repeat;
background-position: center top;
}
h1.yellow {
font-family:algerian;
background-color:yellow;
}
h1.green { background-color:green;}
p.white {
font-family:gigi;
background-color:white;
}
p.blue {
font-family:arial;
background-color:blue;
}
h2 { background-color:red; }
</style>
</head>

<body>
<h1 class=”yellow”> This is a heading 1 </h1>

<p class=”white”> This is a paragraph with a white background <p>

<h2> This is a heading 2 </h2>

<p class=”blue”> This is a paragraph with a blue background <p>

<h1 class=”green”> This is a heading 1 </h1>

<!– inline style sheet — >

<p style=”background-color:orange;font-family:gigi”> This is a paragraph with a orange background <p>
</body>

</html>

exer2>>>

<html>
<head>
<style type=”text/css”>

.wide {
color:red;
letter-spacing:0.8cm;
}

.strike2 {
color:magenta;
text-decoration:line-through underline;
}
.center {
color:green;
letter-spacing:-0.1cm;
text-align: center;
}
.left {
color:blue;
text-align: left;
text-decoration:underline;
}
.gitna {
word-spacing:0.5cm;
text-align:center; ;
}
.rtl {
text-transform:lowercase;
direction:rtl;
}
.pasok {
color:blue;
text-indent:1cm;
white-space: pre;

}
.huli {
text-transform:uppercase;
text-decoration:underline;
}

</style>
</head>

<body>
<h1 class=”wide”> This is a Heading 1 </h1>
<p class=”gitna”> This is a paragraph </p>
<h1 class=”strike2″> This is a Heading 1 </h1>
<p class=”rtl”> This is a paragraph </p>
<h1 class=”center”> This is a Heading 1 </h1>
<p class=”pasok”> This is a paragraph </p>
<h1 class=”left”> This is a Heading 1 </h1>
<p class=”huli”> This is a paragraph </p>
</body>

</html>

exer3>>>

<html>
<head>
<style type=”text/css”>

.courier {
font-family:courier;

}

.sans {
font-family:”sans-serif”;
font-style:italic;

}

.small {
font-variant:small-caps;

}

.size {
font-size:x-large;

}

.bold {
font-stretch:ultra-condensed;

}
</style>
</head>

<body>
<h1 class=”courier”> This is a Heading 1 (COURIER)</h1>
<p class=”sans”> This is a paragraph (SANS SERIF)</p>
<h1 class=”small”> This is a Heading 1 </h1>
<p class=”size”> This is a paragraph </p>
<h1 class=”bold”> This is a Heading 1 </h1>
</body>

</html>

exer4>>>

<html>
<head>
<style type=”text/css”>

.line1 {
font-style:italic;
border-style:solid;
background-color:#00CCFF;
border-width: 2px;

}

.line2 {
direction:rtl;
font-family: arial;
font-size: large;
border-bottom:10px solid;
}

.line3 {
color:lightgray;
border-style: dashed;
border-color:yellowgreen red blue yellow;
border-width: 5px;

}

.line4 {
text-transform:uppercase;
text-decoration:overline;
border-top-style:solid;
border-bottom-style:dotted;
border-width:1px;
}

.line5 {
text-align:center;
background-color:violet;
border-top:10px solid;
border-bottom:10px solid lightgray;
}

.line6 {
text-align:center;
font-size:x-large;
border-style:none none solid;
border-bottom-width:2px;
}
.line7 {
background-color:teal;
color:white;
font-size: medium;
font-family: arial;
border-style:none solid none;
border-left:20px solid black;
border-right:20px solid black;
}
.line8 {
font-family: arial;
text-indent:2cm;
font-size:x-large;
}

</style>
</head>

<body>
<h1 class=”line1″> This is a Heading 1 </h1>
<p class=”line2″> This is a paragraph</p>
<h1 class=”line3″> This is a Heading 1 </h1>
<p class=”line4″> This is a paragraph</p>
<h1 class=”line5″> This is a Heading 1 </h1>
<p class=”line6″> This is a paragraph</p>
<h1 class=”line7″> This is a Heading 1 </h1>
<p class=”line8″> This is a paragraph</p>
</body>

</html>

exer5>>>

<html>
<head>
<style type=”text/css”>
body {
background-color:black;
}
.line1 {
font-style:arial;
color:white;
border:0 solid blue;
background-color:blue;
padding-top:1cm;
padding-bottom:1cm;
padding-left:0.3cm;
margin:0 0 0 0;
}
.line2 {
font-style:arial;
color:white;
border:0 solid darkblue;
background-color:darkblue;
font-size:large;
padding-left:0.4cm;
margin:0 0 0 0;
}

.line3 {
font-style:arial;
border:0 gray;
background-color:gray;
font-size:large;
padding-top:0.3cm;
padding-right:0.3cm;
padding-bottom:0.3cm;
padding-left:0.3cm;

margin:10 23cm 0 5;
word-spacing:50;
}

.line4 {
font-style:arial;
border:0 lightgray;
background-color:lightgray;
word-spacing:60;
padding-top:0.3cm;
padding-right:0.3cm;
padding-bottom:6cm;
padding-left:0.3cm;
margin:0 23cm 0 5

}

.line5 {
font-style:arial;
border:0 gray;
background-color:gray;
margin-top:-250;
margin-left:200;

}

</style>
</head>

<body>
<h1 class=”line1″> This is a Heading 1 </h1>
<p class=”line2″> This is a paragraph</p>
<h1 class=”line3″> This is a Heading 1 </h1>
<p class=”line4″> This is a paragraph</p>
<h1 class=”line5″> This is a Heading 1 </h1>
</body>

</html>

ayan na ha!!! no excuse na dapat para sa LT sa CS bukas. good luck.

hulaan niyo na lang kung sino nagpost nito… o.o;


Responses

  1. si comment man.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: