<!DOCTYPE html>
<html>
<head>
<title> Act1 </title>
<style>
p.p1{
text-indent: 1em;
color:blue;
text-align: justify;
}
</style>
</head>
<body>
<p class="p1"> This is a paragraph. A paragraph should have 3 sentences or more. If it is less than 3 sentences then it's wrong! <br>This is a paragraph. A paragraph should have 3 sentences or more. If it is less than 3 sentences then it's wrong! again and again </p>
<p> This is a paragraph. A paragraph should have 3 sentences or more. If it is less than 3 sentences then it's wrong! <br>This is a paragraph. A paragraph should have 3 sentences or more. If it is less than 3 sentences then it's wrong! again and again </p>
</body>
</html>
2.
<!DOCTYPE html>
<html>
<head>
<title> Number 2 </title>
<style>
body{
background-color: #d0e4fe;
color:0000FF;}
h1{
color:red;
text-align: center;
}
</style>
</head>
<body>
<h1> This is a header </h1>
<p> This is a paragraph </p>
This isn't a paragraph
</body>
</html>
3.
#center{
text-align:center;
}
4.
body{
background-color: #0066ff;
color:blue;
font-family: Arial, Verdana, sans-serif;
}
p{
color:#cce0ff;
}
h3{
background-color: #003380;
color:#ffffff;
}
5.
<!DOCTYPE html>
<html>
<head>
<title> Number 5 </title>
<style>
a{
text-decoration:none;}
body{
background-color:#FAF0E6;
color:#32cd32;
font-family:Arial, Helvetica, sans-serif;
}
.center{
text-align:center;
}
</style>
</head>
<body>
<a href="#"> This is a link without an underline </a> <br />
First line of text.
<p class="center"> paragraph with class as "center" </p>
<p> paragraph without class as "center" </p>
<p class="center"> paragraph with class as "center" </p>
</body>
</html>
6.
<!DOCTYPE html>
<html>
<head>
<title> Number 6 </title>
<style>
body{
background-color:#028482;
color:#0000FF;
font-family: Times New Roman, Times, sans-serif;
}
.notice{
font-style:italic;
font-weight: bold;
text-decoration: underline;
color:red;
}
</style>
</head>
<body>
This is a sample text.
<p class="notice"> This is a text with the class</p>
</body>
</html>
7.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="format.css" type="text/css">
</head>
<h1> The Exorcist </h1>
<p> very nice romantic story </p>
<a href="http://www.warnerbros.com/exorcist">
More about the movie
</a><br />
<a href="mailto:zoilobernal@gmail.com"> zoilobernal@gmail.com </a>
</body>
</html>
format1.css
body{
background-color:white;
color:#000099;
font-family:Arial, Helvetica, sans-serif;
}
a{
background-color:#CCCCCC;
}
h1{
color:red;
font-family:Times New Roman;
}
format2.css
body{
background-color:yellow;
color:green;
}
a{
background-color:white;
}
h1{
font-family: Times New Roman;
background-color:white;
}
8.
advantage.html
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet" href="ex8.css"
type="text/css">
</head>
<body>
<h1 style=”color:red;”>
CSS Advantages </h1>
<ul>
<li>Simplifies design
changes</li>
<li>Easier editing of
sections</li>
<li
class="news">Consistency on different pages</li>
</ul>
<a
href="http://www.w3c.org">W3C Website </a> <br />
<a
href="mailto:zoilobernal@gmail.com"> zoilobernal@gmail.com
</a>
</body>
</html>
ex8.css
body{
background-color: white;
color: #000099;
font-family: Arial,
Helvetica, sans-serif;
}
a{
background-color:#CCCCCC;
}
h1{
font-family: Times New
Roman;
color:black;
}
.news{
color:red;
font-style:italic;
}
Modified ex8.css
body{
background-color:black;
color:white;
font-family: Arial,
Helvetica, sans-serif;
}
a{
background-color:#CCCCCC;
}
h1{
font-family: Times New
Roman;
color:#CCCCCC;
}
.news{
color:red;
font-style:italic;
}
No comments:
Post a Comment