Get documents about "Some More HTML and CSS
Document Sample
Some More HTML and CSS
Same Tag Different Styles
You can have multiple different styles for the same HTML tag. To do this we define classes of
tags, like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Webpage Title</title>
<style type="text/css">
p {
color: #0E67BC;
background-color: pink;
}
p.basic {
text-align: left;
font-style: normal;
color: black;
}
p.quotation {
text-align: center;
font-style: italic;
color: gray;
}
</style>
</head>
<body>
<p>This is a normal paragraph.</p>
<p class="basic">This is a "basic" paragraph.</p>
<p class="quotation">This is a "quotation".</p>
</body>
</html>
In the above example we use the syntax SELECTOR.CLASS {PROPERTY: VALUE;}.
In the body section we choose which class of paragraph we want to use in each case by adding the
attribute class in the opening tag each time.
Defining Our Own Sections
It is very useful to define our own sections in our HTML code, there are some tags for
this purpose.
<div> </div>
It defines a section in the code. Web browsers usually will change
line before and after a div section.
<span> </span>
It defines an inline section in the code. Useful when we want to
change the appearance of one or more words in a sentence.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Webpage Title</title>
<style type="text/css">
div.container {
width: 100%;
border: 1px solid gray;
line-height: 150%;
margin: 0px;
}
div.header, div.footer {
color: white;
background-color: gray;
padding: 0.5em;
clear: left;
}
div.left {
width: 160px;
padding: 1em;
float: left;
margin: 0px;
}
div.content {
margin-left: 190px;
border-left: 1px solid gray;
padding: 1em;
}
h1 {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>My Layout</h1>
</div>
<div class="left">This is an example page
illustrating how to use div tags to
outline your webpages.
</div>
<div class="content">
This is the main content of this page.
This text has to fill more lines than the text
on the left otherwise the vertical gray line
between the two pieces of text will not be high
enough. Ahh it needs one more line of text.
</div>
<div class="footer">(c) 2008</div>
</div>
</body>
</html>
