Introduction As we mentioned in their introduction, a box is an object created from an HTML element with the object having borders, a location, a size, and a background. Besides providing the styles to control those characteristics, CSS allows you to indicate how the box, as a physical object, should be drawn. The drawing characteristic of a box or element is controlled by a style named display. Its default value is named inline, which indicates that no particular drawing effect should occur. In other words, the box or section should appear as the other styles are specified. Here are examples: <html>
<head>
<title>Social Science: Philosophy</title>
<style>
#central { display: inline }
#title-banner { display: inline }
##bottom-banner { display: inline }
.main-title
{
font-weight: bold;
color: Black;
font-size: 1.26cm;
text-align: center;
text-shadow: 0.14cm 0.14cm 0.12cm Silver;
font-family: Bodoni MT Black, Georgia, Times New Roman, serif;
}
#title-banner, #central, #bottom-banner { width: 600px }
.description
{
font-size: 12pt;
text-align: justify;
font-family: Calibri, AvantGarde BkBT, Arial, sans-serif;
}
#navigator { width: 600px }
.link-box
{
float: left;
text-align: center;
}
#navigator a:link, #navigator a:active,
#navigator a:visited, #navigator a:hover
{
height: 35px;
text-decoration: none;
width: 90pt;
line-height: 2.00em;
outline: 1pt solid #99F;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
#navigator a:link
{
color: #FFCC00;
background-color: #004080;
}
#navigator a:active { color: #999966 }
#navigator a:visited { color: #FF99FF }
#navigator a:hover
{
color: #FFFF99;
background-color: #0066CC;
}
#navigator p
{
width: 90pt;
color: #FFFF99;
}
#bottom-banner
{
background-color: #004080;
outline: 2pt solid #FFBE00;
}
#copyright
{
line-height: 2.00em;
text-align: center;
color: #FFCC00;
outline: 1pt solid orange;
}
#branches { width: 160px }
#branches a:link, #branches a:active, #branches a:visited, #branches a:hover
{
height: 35px;
font-size: 12pt;
line-height: 35px;
width: 160px;
outline: 1pt solid #CCFF33;
text-decoration: none;
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
#branches a:link { color: #FFFF00 }
#branches a:active { color: #CC99FF }
#branches a:visited { color: #FFCC99 }
#branches a:hover
{
color: #FFCCFF;
background-color: #0066CC;
outline: 1pt solid #CCFF33;
}
.clearance { clear: left }
</style>
</head>
<body>
<div id="title-banner">
<p class="main-title">Philosophy</p>
</div>
<div id="navigator">
<p class="link-box"><a href="index1.htm">Home</a></p>
<p class="link-box"><a href="research.htm">Research</a></p>
<p class="link-box"><a href="resources.htm">Resources</a></p>
<p class="link-box"><a href="aboutus.htm">About Us</a></p>
<p class="link-box"><a href="contact.htm">Contact Us</a></p>
</div>
<div class="clearance"></div>
<div id="central">
<p class="description">Philosophy is the study of existense (or being),
knowledge (or reasoning), and truth. Philosophy seeks to comprehend what
truth is, how to evaluate it, and how it influences thoughts and ethics.
Like other social science topics such as sociology or psychology, philosophy
examines both personal and crowd behavior but only as they relate to the
mind. An example is the thinking process that results in someone taking one
action rather than another (another person taking the same action or another
person taking a different action). Unlike the other social science fields,
philosophy doesn't concentrate on what is good or bad, or what is practical
or weird, or on how something should (is supposed to) be. Instead,
philosophy delves into the logic and the ethical reasons of what it (such
as something or a behavior) is.</p>
</div>
<footer id="bottom-banner">
<div id="branches">
<p><a href="natural.htm">Natural Philosophy</a><br>
<a href="physical.htm">Physical Philosophy</a><br>
<a href="moral.htm">Moral Philosophy</a></p>
</div>
<p id="copyright">Copyright ©, 2015</p>
</footer>
</body>
</html>
This would produce:
A Box or Element as a List Item If you are planning to create and display a list of items in your webpage, instead of creating an HTML list, CSS allows you to create a box or a normal section filled with objects or text items, but make each element behave like an item of a list. To let you create a box or section filled with objects where each acts as a list item, CSS provides a value named list-item for the display style. To use it, create a normal section and apply the style with the value to each item. Here is an example: <html>
<head>
<title>Sociology</title>
<style type="text/css">
#container, .head-portion, #bottom-side { width: 600px }
.head-portion, #key-words { text-align: center }
.main-title
{
font-weight: 600;
font-size: 0.86cm;
color: #0033CC;
}
.paragraph-title
{
font-size: 0.62cm;
color: #CC3300;
}
.paragraph-title
{
font-weight: 600;
font-family: Times New Roman, Garamond, Georgia, serif;
}
.description
{
text-align: justify;
font-family: Geneva, "Lucida Sans", Verdana, sans-serif;
}
#left-side
{
float: left;
height: 330px;
width: 140px;
}
#key-words { color: DarkBlue }
.field-of-study { display: list-item }
</style>
</head>
<body>
<header class="head-portion">
<p class="main-title">Sociology</p>
<hr color="blue">
</header>
<header class="head-portion">
<p class="paragraph-title">Introduction</p>
</header>
<div id="container">
<div id="left-side">
<div class="field-of-study"><a href="behavior.htm">Behavior</a></div>
<div class="field-of-study"><a href="community.htm">Community</a></div>
<div class="field-of-study"><a href="society.htm">Society</a></div>
<div class="field-of-study"><a href="family.htm">Family</a></div>
<div class="field-of-study"><a href="stratification.htm">Stratification</a></div>
<div class="field-of-study"><a href="dialog.htm">Dialog</a></div>
<div class="field-of-study"><a href="relationships.htm">Relationships</a></div>
<div class="field-of-study"><a href="religion.htm">Religion</a></div>
<div class="field-of-study"><a href="ethnicity.htm">Ethnicity</a></div>
<div class="field-of-study"><a href="Social.htm">Social Structures</a></div>
<div class="field-of-study"><a href="migration.htm">Migrations</a></div>
<div class="field-of-study"><a href="positivism.htm">Positivism</a></div>
<div class="field-of-study"><a href="consciousness.htm">Consciousness</a></div>
<div class="field-of-study"><a href="industrial.htm">Industrialization</a></div>
</div>
<p class="description">Sociology is in the social science group of academic
studies. Sociology is the study of human behavior, the origins of that behavior,
and the actual characteristics of such a behavior. Sociology analyzes the
person as one but also the influences of the group(s) in which the personal
behavior manifests itself.</p>
<p class="paragraph-title">Sociology and its Environment</p>
<p class="description">Sociolgy as an academic venture takes many factors in
consideration because various aspects shape a personality, from birth to
adulthood, from family to career, from opinions to affirmations. The study of
sociology considers the person's family, gender, ethnicity, social class,
religion, education, health, etc. Sociology also consider various aspects
of deviance, law, and societal interactivity.</p>
<hr color="blue">
</div>
<header class="head-portion">
<p class="paragraph-title">Key Words</p>
</header>
<footer id="bottom-side">
<p id="key-words">Social Claas | Group | Sexuality | Life | Crime | Race |
Diversity | Clan | Poverty | Social Interations | Law | Discrimination |
Sociologist | Conflict | Age | Institution</p>
</footer>
</body>
</html>
This would produce:
An Object as a Block A box is referred to as block if it behaves like a paragraph. That is, the box would start a new line and stop like the end of a paragraph. To create a block, set a value as block to the box or element's display style. Here are examples: <html>
<head>
<title>Social Science: Philosophy</title>
<style type="text/css">
#central { display: inline }
#title-banner { display: inline }
##bottom-banner { display: inline }
.main-title
{
font-weight: bold;
color: Black;
font-size: 1.26cm;
text-align: center;
text-shadow: 0.14cm 0.14cm 0.12cm Silver;
font-family: Bodoni MT Black, Georgia, Times New Roman, serif;
}
#title-banner, #central, #bottom-banner { width: 600px }
.description
{
font-size: 12pt;
text-align: justify;
font-family: Calibri, AvantGarde BkBT, Arial, sans-serif;
}
#navigator { width: 600px }
.link-box
{
float: left;
text-align: center;
}
#navigator a:link, #navigator a:active,
#navigator a:visited, #navigator a:hover
{
display: block;
height: 35px;
text-decoration: none;
width: 90pt;
line-height: 2.00em;
outline: 1pt solid #99F;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
#navigator a:link
{
color: #FFCC00;
background-color: #004080;
}
#navigator a:active { color: #999966 }
#navigator a:visited { color: #FF99FF }
#navigator a:hover
{
color: #FFFF99;
background-color: #0066CC;
}
#navigator p
{
width: 90pt;
color: #FFFF99;
}
#bottom-banner
{
background-color: #004080;
outline: 2pt solid #FFBE00;
}
#copyright
{
line-height: 2.00em;
text-align: center;
color: #FFCC00;
outline: 1pt solid orange;
}
#branches, #history, #resources { float: left }
#branches a:link, #branches a:active, #branches a:visited, #branches a:hover
{
display: block;
height: 26px;
font-size: 12pt;
line-height: 26px;
text-decoration: none;
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
#branches, #branches a:link, #branches a:active,
#branches a:visited, #branches a:hover
{
width: 170px
}
#branches a:link { color: #FFFF00 }
#branches a:active { color: #CC99FF }
#branches a:visited { color: #FFCC99 }
#branches a:hover
{
display: block;
color: #FFCCFF;
background-color: #0066CC;
outline: 1pt solid #CCFF33;
}
.clearance { clear: left }
</style>
</head>
<body>
<div id="title-banner">
<p class="main-title">Philosophy</p>
</div>
<div id="navigator">
<p class="link-box"><a href="index1.htm">Home</a></p>
<p class="link-box"><a href="research.htm">Research</a></p>
<p class="link-box"><a href="resources.htm">Resources</a></p>
<p class="link-box"><a href="aboutus.htm">About Us</a></p>
<p class="link-box"><a href="contact.htm">Contact Us</a></p>
</div>
<div class="clearance"></div>
<div id="central">
<p class="description">Philosophy is the study of existense (or being),
knowledge (or reasoning), and truth. Philosophy seeks to comprehend what
truth is, how to evaluate it, and how it influences thoughts and ethics.
Like other social science topics such as sociology or psychology, philosophy
examines both personal and crowd behavior but only as they relate to the
mind. An example is the thinking process that results in someone taking one
action rather than another (another person taking the same action or another
person taking a different action). Unlike the other social science fields,
philosophy doesn't concentrate on what is good or bad, or what is practical
or weird, or on how something should (is supposed to) be. Instead,
philosophy delves into the logic and the ethical reasons of what it (such
as something or a behavior) is.</p>
</div>
<footer id="bottom-banner">
<div id="branches">
<p><a href="natural.htm">Natural Philosophy</a><br>
<a href="physical.htm">Physical Philosophy</a><br>
<a href="moral.htm">Moral Philosophy</a></p>
</div>
<div class="clearance"></div>
<p id="copyright">Copyright ©, 2015</p>
</footer>
</body>
</html>
This would produce:
In the same way, you can add other block-based boxes or elements. Here are examples: <html>
<head>
<title>Social Science: Philosophy</title>
<style type="text/css">
#central { display: inline }
#title-banner { display: inline }
##bottom-banner { display: inline }
.main-title
{
font-weight: bold;
color: Black;
font-size: 1.26cm;
text-align: center;
text-shadow: 0.14cm 0.14cm 0.12cm Silver;
font-family: Bodoni MT Black, Georgia, Times New Roman, serif;
}
#title-banner, #central, #bottom-banner { width: 600px }
.description
{
font-size: 12pt;
text-align: justify;
font-family: Calibri, AvantGarde BkBT, Arial, sans-serif;
}
#navigator { width: 600px }
.link-box
{
float: left;
text-align: center;
}
#navigator a:link, #navigator a:active,
#navigator a:visited, #navigator a:hover
{
display: block;
height: 35px;
text-decoration: none;
width: 90pt;
line-height: 2.00em;
outline: 1pt solid #99F;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
#navigator a:link
{
color: #FFCC00;
background-color: #004080;
}
#navigator a:active { color: #999966 }
#navigator a:visited { color: #FF99FF }
#navigator a:hover
{
color: #FFFF99;
background-color: #0066CC;
}
#navigator p
{
width: 90pt;
color: #FFFF99;
}
#bottom-banner
{
background-color: #004080;
outline: 2pt solid #FFBE00;
}
#copyright
{
line-height: 2.00em;
text-align: center;
color: #FFCC00;
outline: 1pt solid orange;
}
#branches, #history, #resources { float: left }
#branches a:link, #branches a:active, #branches a:visited, #branches a:hover,
#history a:link, #history a:active, #history a:visited, #history a:hover,
#resources a:link, #resources a:active, #resources a:visited, #resources a:hover
{
display: block;
height: 26px;
font-size: 12pt;
line-height: 26px;
text-decoration: none;
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
#branches, #branches a:link, #branches a:active,
#branches a:visited, #branches a:hover
{
width: 170px
}
#history, #history a:link, #history a:active,
#history a:visited, #history a:hover
{
width: 150pt
}
#resources, #resources a:link, #resources a:active,
#resources a:visited, #resources a:hover
{
width: 165pt
}
#branches a:link, #history a:link, #resources a:link { color: #FFFF00 }
#branches a:active, #history a:active, #resources a:active { color: #CC99FF }
#branches a:visited, #history a:visited, #resources a:visited { color: #FFCC99 }
#branches a:hover, #history a:hover, #resources a:hover
{
display: block;
color: #FFCCFF;
background-color: #0066CC;
outline: 1pt solid #CCFF33;
}
.clearance { clear: left }
</style>
</head>
<body>
<div id="title-banner">
<p class="main-title">Philosophy</p>
</div>
<div id="navigator">
<p class="link-box"><a href="index1.htm">Home</a></p>
<p class="link-box"><a href="research.htm">Research</a></p>
<p class="link-box"><a href="resources.htm">Resources</a></p>
<p class="link-box"><a href="aboutus.htm">About Us</a></p>
<p class="link-box"><a href="contact.htm">Contact Us</a></p>
</div>
<div class="clearance"></div>
<div id="central">
<p class="description">Philosophy is the study of existense (or being),
knowledge (or reasoning), and truth. Philosophy seeks to comprehend what
truth is, how to evaluate it, and how it influences thoughts and ethics.
Like other social science topics such as sociology or psychology, philosophy
examines both personal and crowd behavior but only as they relate to the
mind. An example is the thinking process that results in someone taking one
action rather than another (another person taking the same action or another
person taking a different action). Unlike the other social science fields,
philosophy doesn't concentrate on what is good or bad, or what is practical
or weird, or on how something should (is supposed to) be. Instead,
philosophy delves into the logic and the ethical reasons of what it (such
as something or a behavior) is.</p>
</div>
<footer id="bottom-banner">
<div id="branches">
<p><a href="natural.htm">Natural Philosophy</a><br>
<a href="physical.htm">Physical Philosophy</a><br>
<a href="moral.htm">Moral Philosophy</a></p>
</div>
<div id="history">
<p><a href="philosophers.htm">Philosophers</a><br>
<a href="comparisons.htm">Ancient/Contemporary</a><br>
<a href="majors.htm">Universities</a></p>
</div>
<div id="resources">
<p><a href="philosophers.htm">Philosophers</a><br>
<a href="comparisons.htm">Ancient/Contemporary</a><br>
<a href="majors.htm">Universities/Colleges/Majors</a></p>
</div>
<p id="copyright">Copyright ©, 2015</p>
</footer>
</body>
</html>
This would produce:
The Inline Block of a Box As mentioned previously, a block behaves like a paragraph that starts a new line and stops like the end of a paragraph that acts as the end of the line. If you don't want a block that starts a new line but instead continues from the previous one, create the block as inline. To support this, the display style can have a value as inline-block. Here is an example: <html>
<head>
<title>Social Science: Philosophy</title>
<style type="text/css">
#central { display: inline }
#title-banner { display: inline }
##bottom-banner { display: inline }
.main-title
{
font-weight: bold;
color: Black;
font-size: 1.26cm;
text-align: center;
text-shadow: 0.14cm 0.14cm 0.12cm Silver;
font-family: Bodoni MT Black, Georgia, Times New Roman, serif;
}
#title-banner, #central, #bottom-banner { width: 600px }
.description
{
font-size: 12pt;
text-align: justify;
font-family: Calibri, AvantGarde BkBT, Arial, sans-serif;
}
#navigator { width: 600px }
.link-box
{
float: left;
text-align: center;
}
#navigator a:link, #navigator a:active,
#navigator a:visited, #navigator a:hover
{
height: 35px;
text-decoration: none;
width: 90pt;
display: block;
line-height: 2.00em;
outline: 1pt solid #99F;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
#navigator a:link
{
color: #FFCC00;
background-color: #004080;
}
#navigator a:active { color: #999966 }
#navigator a:visited { color: #FF99FF }
#navigator a:hover
{
color: #FFFF99;
background-color: #0066CC;
}
#navigator p
{
width: 90pt;
color: #FFFF99;
}
#bottom-banner
{
background-color: #004080;
outline: 2pt solid #FFBE00;
}
#copyright
{
line-height: 2.00em;
text-align: center;
color: #FFCC00;
outline: 1pt solid orange;
}
#branches, #history, #resources { float: left }
#branches a:link, #branches a:active, #branches a:visited, #branches a:hover,
#history a:link, #history a:active, #history a:visited, #history a:hover,
#resources a:link, #resources a:active, #resources a:visited, #resources a:hover
{
display: inline-block;
height: 26px;
font-size: 12pt;
line-height: 26px;
text-decoration: none;
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
#branches, #branches a:link, #branches a:active,
#branches a:visited, #branches a:hover
{
width: 170px
}
#history, #history a:link, #history a:active,
#history a:visited, #history a:hover
{
width: 150pt
}
#resources, #resources a:link, #resources a:active,
#resources a:visited, #resources a:hover
{
width: 165pt
}
#branches a:link, #history a:link, #resources a:link { color: #FFFF00 }
#branches a:active, #history a:active, #resources a:active { color: #CC99FF }
#branches a:visited, #history a:visited, #resources a:visited { color: #FFCC99 }
#branches a:hover, #history a:hover, #resources a:hover
{
display: inline-block;
color: #FFCCFF;
background-color: #0066CC;
outline: 1pt solid #CCFF33;
}
.clearance { clear: left }
</style>
</head>
<body>
<div id="title-banner">
<p class="main-title">Philosophy</p>
</div>
<div id="navigator">
<p class="link-box"><a href="index1.htm">Home</a></p>
<p class="link-box"><a href="research.htm">Research</a></p>
<p class="link-box"><a href="resources.htm">Resources</a></p>
<p class="link-box"><a href="aboutus.htm">About Us</a></p>
<p class="link-box"><a href="contact.htm">Contact Us</a></p>
</div>
<div class="clearance"></div>
<div id="central">
<p class="description">Philosophy is the study of existense (or being),
knowledge (or reasoning), and truth. Philosophy seeks to comprehend what
truth is, how to evaluate it, and how it influences thoughts and ethics.
Like other social science topics such as sociology or psychology, philosophy
examines both personal and crowd behavior but only as they relate to the
mind. An example is the thinking process that results in someone taking one
action rather than another (another person taking the same action or another
person taking a different action). Unlike the other social science fields,
philosophy doesn't concentrate on what is good or bad, or what is practical
or weird, or on how something should (is supposed to) be. Instead,
philosophy delves into the logic and the ethical reasons of what it (such
as something or a behavior) is.</p>
</div>
<footer id="bottom-banner">
<div id="branches">
<p><a href="natural.htm">Natural Philosophy</a><br>
<a href="physical.htm">Physical Philosophy</a><br>
<a href="moral.htm">Moral Philosophy</a></p>
</div>
<div id="history">
<p><a href="philosophers.htm">Philosophers</a><br>
<a href="comparisons.htm">Ancient/Contemporary</a><br>
<a href="majors.htm">Universities</a></p>
</div>
<div id="resources">
<p><a href="philosophers.htm">Philosophers</a><br>
<a href="comparisons.htm">Ancient/Contemporary</a><br>
<a href="majors.htm">Universities/Colleges/Majors</a></p>
</div>
<p id="copyright">Copyright ©, 2015</p>
</footer>
</body>
</html>
This would produce:
A Box or Element as a Table The content of a box can be treated as a table. To make this possible, the display style has a few values as follows:
With these values, you can create a box that resembles a table. Here is an example: <html>
<head>
<title>Social Science: Philosophy</title>
<style type="text/css">
.main-title
{
font-weight: bold;
color: Black;
font-size: 1.26cm;
text-align: center;
text-shadow: 0.14cm 0.14cm 0.12cm Silver;
font-family: Bodoni MT Black, Georgia, Times New Roman, serif;
}
#title-banner, #central, #bottom-banner { width: 600px }
.description
{
font-size: 12pt;
text-align: justify;
font-family: Calibri, AvantGarde BkBT, Arial, sans-serif;
}
#navigator { width: 600px }
.link-box
{
float: left;
text-align: center;
}
#navigator a:link, #navigator a:active,
#navigator a:visited, #navigator a:hover
{
display: inline-block;
height: 35px;
text-decoration: none;
width: 90pt;
line-height: 2.00em;
outline: 1pt solid #99F;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
#navigator a:link
{
color: #FFCC00;
background-color: #004080;
}
#navigator a:active { color: #999966 }
#navigator a:visited { color: #FF99FF }
#navigator a:hover
{
color: #FFFF99;
background-color: #0066CC;
}
#navigator p
{
width: 90pt;
color: #FFFF99;
}
.philosophic {
display: table;
outline: 3pt gray groove;
}
.philo-heading { display: table-row }
.philo-field, .philo-topic, .philo-issues,
.philo-value1, .philo-value2
{
height: 20pt;
line-height: 20pt;
display: table-cell
}
.philo-field, .philo-topic, .philo-issues
{
background-color: #333333;
outline: 1pt solid Gray;
}
.philo-field { width: 110pt }
.philo-topic { width: 70pt }
.philo-issues2 { width: 200pt }
.philo-title
{
height: 26pt;
line-height: 26pt;
font-weight: bold;
color: white;
font-family: "Comic Sans MS", Tahoma, sans-serif;
}
.philo-value2 { background-color: Silver;
outline: 1pt solid #FFF;
}
#bottom-banner
{
background-color: #004080;
outline: 2pt solid #FFBE00;
}
#copyright
{
line-height: 2.00em;
text-align: center;
color: #FFCC00;
outline: 1pt solid orange;
}
#branches, #history, #resources { float: left }
#branches a:link, #branches a:active, #branches a:visited, #branches a:hover,
#history a:link, #history a:active, #history a:visited, #history a:hover,
#resources a:link, #resources a:active, #resources a:visited, #resources a:hover
{
height: 26px;
font-size: 12pt;
line-height: 26px;
text-decoration: none;
display: inline-block;
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
#branches, #branches a:link, #branches a:active,
#branches a:visited, #branches a:hover { width: 170px }
#history, #history a:link, #history a:active,
#history a:visited, #history a:hover { width: 150pt }
#resources, #resources a:link, #resources a:active,
#resources a:visited, #resources a:hover { width: 165pt }
#branches a:link, #history a:link, #resources a:link { color: #FFFF00 }
#branches a:active, #history a:active, #resources a:active { color: #CC99FF }
#branches a:visited, #history a:visited, #resources a:visited { color: #FFCC99 }
#branches a:hover, #history a:hover, #resources a:hover
{
color: #FFCCFF;
background-color: #0066CC;
display: inline-block;
outline: 1pt solid #CCFF33;
}
.clearance { clear: left }
</style>
</head>
<body>
<div id="title-banner">
<p class="main-title">Philosophy</p>
</div>
<div id="navigator">
<p class="link-box"><a href="index1.htm">Home</a></p>
<p class="link-box"><a href="research.htm">Research</a></p>
<p class="link-box"><a href="resources.htm">Resources</a></p>
<p class="link-box"><a href="aboutus.htm">About Us</a></p>
<p class="link-box"><a href="contact.htm">Contact Us</a></p>
</div>
<div class="clearance"></div>
<div id="central">
<p class="description">Philosophy is the study of existense (or being),
knowledge (or reasoning), and truth. Philosophy seeks to comprehend what
truth is, how to evaluate it, and how it influences thoughts and ethics.
Like other social science topics such as sociology or psychology, philosophy
examines both personal and crowd behavior but only as they relate to the
mind. An example is the thinking process that results in someone taking one
action rather than another (another person taking the same action or another
person taking a different action). Unlike the other social science fields,
philosophy doesn't concentrate on what is good or bad, or what is practical
or weird, or on how something should (is supposed to) be. Instead,
philosophy delves into the logic and the ethical reasons of what it (such
as something or a behavior) is.</p>
<p class="description">Some of the most regular fields of study in philosophy
are:</p>
</div>
<div class="philosophic">
<div class="philo-heading">
<div class="philo-field philo-title">Philosophic Field</div>
<div class="philo-topic philo-title">Topic</div>
<div class="philo-issues philo-title">Issues</div>
</div>
<div class="philo-heading">
<div class="philo-value1">Epistemology</div>
<div class="philo-value1">Knowledge</div>
<div class="philo-value1">Truth, perception, belief, justification</div>
</div>
<div class="philo-heading">
<div class="philo-value2">Logic</div>
<div class="philo-value2">Reason</div>
<div class="philo-value2">Deduction (deductive reasoning)<br>
Induction (inductive reseaning)</div>
</div>
<div class="philo-heading">
<div class="philo-value1">Metaphysics</div>
<div class="philo-value1">Reality</div>
<div class="philo-value1">Existence, time, causality</div>
</div>
<div class="philo-heading">
<div class="philo-value2">Aesthetics</div>
<div class="philo-value2">Beauty</div>
<div class="philo-value2">Art, beauty, taste</div>
</div>
</div>
<footer id="bottom-banner">
<div id="branches">
<p><a href="natural.htm">Natural Philosophy</a><br>
<a href="physical.htm">Physical Philosophy</a><br>
<a href="moral.htm">Moral Philosophy</a></p>
</div>
<div id="history">
<p><a href="philosophers.htm">Philosophers</a><br>
<a href="comparisons.htm">Ancient/Contemporary</a><br>
<a href="majors.htm">Universities</a></p>
</div>
<div id="resources">
<p><a href="philosophers.htm">Philosophers</a><br>
<a href="comparisons.htm">Ancient/Contemporary</a><br>
<a href="majors.htm">Universities/Colleges/Majors</a></p>
</div>
<p id="copyright">Copyright ©, 2015</p>
</footer>
</body>
</html>
This would produce:
The display style provides other values to support othe features of tables:
| ||||||||||||||||||||||||
