|
A Common Margin
Instead of setting the margins one side at a time, CSS provides a common
style named margin. It can take 1 to 4 values:
- If you provide one value,
it would apply to the margins on all four sides. Here is an example:
.description
{
margin: 0;
}
- If you provide 2 values, the first value will apply to the top and the
bottom margins. The second value will apply to the left and the right sides Here is an example:
<!DOCTYPE html>
<html>
<head>
<title>Earth Science</title>
<style type="text/css">
.central
{
width: 500px;
background-color: Blue;
border: thin black double;
}
.description
{
margin: 0 40pt;
text-align: justify;
color: #99CCFF;
font: 14pt, Times New Roman, Garamond, Georgia, serif;
}
</style>
</head>
<body>
<section class="central">
<p class="description">Earth science is the group of studies that explores
all types of issues related to the planet. The studies consider such topics
as the earth layers, the atmosphere, the seasons, the climate, the oceans,
etc. In reality, the topics are categorized in history, geography,
geology, ecology, physics, etc. Other earth-related topics include the
atmosphere, the biosphere, the hydrosphere, etc.</p>
</section>
</body>
</html>
This would produce:
- If you provide 3 values, the first value will apply to the top margin, the
second value will apply to the left and the right margins, and the third value
will apply to the bottom side. Here is an example:
.description
{
margin: 0 40pt 10pt;
text-align: justify;
color: #99CCFF;
font: 14pt, Times New Roman, Garamond, Georgia, serif;
}
This would produce:
- If you provide 4 values, they will apply in the following order: top, right, bottom,
and left. Here is an example:
.description
{
margin: 0 10pt 20pt 40pt;
text-align: justify;
color: #99CCFF;
font: 14pt, Times New Roman, Garamond, Georgia, serif;
}
This would produce:
The Body Element
As you may know already, the body element is the
parent of all HTML elements of a webpage. Therefore, if you want all elements of
a webpage to be positioned based on the borders of a webpage, set its margin style
to 0. Here is an example:
<!DOCTYPE html>
<html>
<head>
<title>Earth Science</title>
<style type="text/css">
body {
margin: 0;
background-color: #19375F;
}
#head-part
{
top: 0;
height: 2.75em;
border-bottom: 3pt #CC9900 solid;
}
#main-title
{
text-align: center;
color: #FFFF00;
font: bold, 24pt, Bodoni, Georgia, Garamond, serif;
}
.central
{
background-color: Blue;
border: thin black double;
border-bottom: 3pt #CC9900 solid;
}
.description
{
margin: 1.02em;
text-align: justify;
color: #FFFFFF;
font: 14pt, Times New Roman, Garamond, Georgia, serif;
}
#links {
color: #FFF;
text-align: center;
}
a.reference:link, a.reference:active,
a.reference:visited, a.reference:hover
{
font-weight: 500;
font-size: 12pt;
text-decoration: none;
}
a.reference:link { color: #FFCCCC }
a.reference:active { color: #66CCFF }
a.reference:visited { color: #FF9933 }
a.reference:hover
{
color: #FFFF00;
background-color: #003399;
outline: White solid 1pt;
}
</style>
</head>
<body>
<header id="head-part">
<h1 id="main-title">Earth Science</h1>
</header>
<section class="central">
<p class="description">Earth science is the group of studies that explores all
types of issues related to the planet. The studies consider such topics as the
earth layers, the atmosphere, the seasons, the climate, the oceans, etc. In
reality, the topics are categorized in history, geography, geology, ecology,
physics, etc. Other earth-related topics include the atmosphere, the biosphere,
the hydrosphere, etc.</p>
<p class="description">Earth science is not confined to just the physical planet
but also to its environment. To start, its history first considers what might
have happened millions of years ago up to the current time. As a matter of fact,
part of studying the earth is to consider other planets in order to evaluate
its relationships and differences with those other places.</p>
</section>
<footer>
<p id="links"><a href="geography" class="reference">Geography</a> |
<a href="Ecology" class="reference">Ecology</a> |
<a href="geology" class="reference">Geology</a></p>
</footer>
</body>
</html>
This would produce:
The Auto Margin
If you set the width of a box to a constant value, you can
still specify the margin to a side and value of your choice. On the other hand,
if you want the box, section, or element to be centered on the webpage, set the margin style
to a value of auto. Here is an example:
<!DOCTYPE html>
<html>
<head>
<title>Earth Science</title>
<style type="text/css">
body {
margin: 0;
background-color: #19375F;
}
#head-part
{
top: 0;
height: 2.75em;
border-bottom: 3pt #CC9900 solid;
}
#main-title
{
text-align: center;
color: #FFFF00;
font: bold, 24pt, Bodoni, Georgia, Garamond, serif;
}
.central
{
margin: auto;
width: 500px;
background-color: Blue;
border: thin black double;
}
.description
{
margin: 1.02em;
text-align: justify;
color: #FFFFFF;
font: 14pt, Times New Roman, Garamond, Georgia, serif;
}
#bottom-part {
border-top: 3pt #CC9900 solid;
}
#links {
text-align: center;
color: #FFF;
}
a.reference:link, a.reference:active,
a.reference:visited, a.reference:hover
{
font-weight: 500;
font-size: 12pt;
text-decoration: none;
}
a.reference:link { color: #FFCCCC }
a.reference:active { color: #66CCFF }
a.reference:visited { color: #FF9933 }
a.reference:hover
{
color: #FFFF00;
background-color: #003399;
outline: White solid 1pt;
}
</style>
</head>
<body>
<header id="head-part">
<h1 id="main-title">Earth Science</h1>
</header>
<section class="central">
<p class="description">Earth science is the group of studies that explores all
types of issues related to the planet. The studies consider such topics as the
earth layers, the atmosphere, the seasons, the climate, the oceans, etc. In
reality, the topics are categorized in history, geography, geology, ecology,
physics, etc. Other earth-related topics include the atmosphere, the biosphere,
the hydrosphere, etc.</p>
<p class="description">Earth science is not confined to just the physical planet
but also to its environment. To start, its history first considers what might
have happened millions of years ago up to the current time. As a matter of fact,
part of studying the earth is to consider other planets in order to evaluate
its relationships and differences with those other places.</p>
</section>
<footer id="bottom-part">
<p id="links"><a href="geography" class="reference">Geography</a> |
<a href="Ecology" class="reference">Ecology</a> |
<a href="geology" class="reference">Geology</a></p>
</footer>
</body>
</html>
This would produce:
The auto-margin feature is very valuable when it is
necessary to center a group of objects. You can put objects or element in a
section or box and then apply the feature on that section or box. You can also create a group of identifiers or classes that must be centered in your webpage and apply the style to that group. Here is an example:
<!DOCTYPE html>
<html>
<head>
<title>Psychology</title>
<style>
body { margin: 0;
background: radial-gradient(at 75%, #400, Bisque); }
#top-portion, .container, #links-bar, #bottom-container
{
margin: auto;
width: 600px;
}
#links-bar { border-bottom: 2pt dotted #400; }
#top-title
{
text-align: center;
color: #FFFAFA;
border-bottom: 2pt dotted #400;
text-shadow: 0.14cm 0.14cm 0.12cm #400;
font: bold 28pt Bodoni, Elephant, Times, serif;
}
.description
{
color: yellow;
text-align: justify;
font: normal 14pt Times New Roman, Garamond, Times, serif;
}
#links-bar { height: 32px }
#bottom-portion
{
border-top: 3pt solid #400;
background: linear-gradient(270deg, #AF550A 50%, #400 90%, #AF550A 100%); }
}
#links-bar { background-color: #AF550A }
#links-bar p
{
float: right;
margin-top: -0.05em;
}
a.lnk-btn:link, a.lnk-btn:active, a.lnk-btn:visited, a.lnk-btn:hover
{
height: 32px;
line-height: 32px;
font-size: 14px;
text-decoration: none;
width: 70pt;
text-align: center;
outline: 1pt solid #FF9B00;
font-family: Meiryo, Segoe UI, sans-serif
}
a.lnk-btn:link
{
background-color: #400;
display: inline-block;
color: #FF9B00;
}
a.lnk-btn:active { color: #00FFFF }
a.lnk-btn:visited { color: #669BFF }
a.lnk-btn:hover
{
color: #FFFF00;
background-color: #AF550A;
}
#dealing, #exploration, #resources
{
float: left;
width: 145pt;
}
#exploration, #resources { border-left: 1pt dashed #FFFFCC; }
#bottom-portion { height: 160px }
#dealing ul, #exploration ul, #resources ul { list-style-type: none; }
#dealing a:link, #dealing a:active, #dealing a:visited, #dealing a:hover,
#exploration a:link, #exploration a:active,
#exploration a:visited, #exploration a:hover,
#resources a:link, #resources a:active, #resources a:visited, #resources a:hover
{
text-decoration: none;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif
}
#dealing a:link, #exploration a:link, #resources a:link
{
color: #FFCC00;
}
#dealing a:active, #exploration a:active, #resources a:active { color: #999966 }
#dealing a:visited, #exploration a:visited, #resources a:visited { color: #FF99FF }
#dealing a:hover, #exploration a:hover, #resources a:hover
{
color: #FFFF99;
text-decoration: underline;
}
.psychohead
{
font-weight: bold;
font-size: 14pt;
display: block;
color: Orange;
border-left: 1pt dashed white;
border-bottom: 1pt dashed white;
}
#resources { border-right: 1pt dashed #FFFFcc }
#bottom-portion
{
bottom: 0;
width: 100%;
top: auto;
height: auto;
position: absolute;
}
</style>
</head>
<body>
<div id="top-portion">
<p id="top-title">Psychology</p>
</div>
<div id="links-banner">
<div id="links-bar">
<p><a class="lnk-btn" href="aboutus.htm">About Us</a></p>
<p><a class="lnk-btn" href="library.htm">Library</a></p>
<p><a class="lnk-btn" href="academia.htm">Academia</a></p>
<p><a class="lnk-btn" href="socialsciences/index.htm">Home</a></p>
</div>
</div>
<div class="container">
<p class="description">Psychology is a social science field that focuses on
the mind as it relates to human thoughts and behaviors. On one hand,
psychology gets inputs from sociology, philosophy, medicine, and ethnicity,
etc. on the other hand, psychology has a great influence on all sciences
that deal with personal views and actions.</p>
<p class="description">Psychology does not exclusively targets the
individual but it also considers any aspect in the person's environment.
As a matter of facts, there are various fields of studies that derive from
psychology.</p>
</div>
<div id="bottom-portion">
<div id="bottom-container">
<div id="dealing">
<ul>
<li class="psychohead">Dealing With ...</li>
<li><a href="healing.htm">Healing</a></li>
<li><a href="leadership.htm">Leadership</a></li>
<li><a href="addictions.htm">Addictions</a></li>
<li><a href="self-esteem.htm">Self-Esteem</a></li>
<li><a href="achievements.htm">Achievements</a></li>
</ul>
</div>
<div id="exploration">
<ul>
<li class="psychohead">Exploring ...</li>
<li><a href="psychotherapy.htm">Psychotherapy</a></li>
<li><a href="therapy.htm">Family Therapy</a></li>
<li><a href="technologies.htm">Psycho-Technologies</a></li>
<li><a href="child-development.htm">Child Development</a></li>
<li><a href="politics.htm">Political Science</a></li>
</ul>
</div>
<div id="resources">
<ul>
<li class="psychohead">Resources</li>
<li><a href="education.htm">Education/Degrees</a></li>
<li><a href="professions.htm">Professions</a></li>
<li><a href="helplines.htm">Help Lines</a></li>
<li><a href="online.htm">Online Resources</a></li>
<li><a href="contactus.htm">Contact Us</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
This would produce:
You can also combine the 0 and the auto vallues on
the margin style to indicate that you want the first value, 0, to apply to the top and the
bottom margins while the box or element would be centered. Here is an example:
<html>
<head>
<title>Social Science: Philosophy</title>
<style type="text/css">
body
{
margin: 0;
background-color: #375f91;
}
#title-banner
{
padding-top: 0;
height: 50pt;
width: 100%;
background-color: #192E46;
border-bottom: 1pt solid #FFBE00;
}
#navibar
{
width: 100%;
height: 35px;
background: linear-gradient(#004080, #3399FF, #004080);
border-bottom: 1pt solid #FFBE00;
}
#general-container, #bottom-banner, #navigator
{
margin: 0 auto;
width: 600px;
}
.main-title
{
font-weight: bold;
color: #FF0;
padding-top: 0.35em;
font-size: 1.26cm;
text-align: center;
text-shadow: 0.10em 0.10em 0.20em LightBlue;
font: bold 24pt Georgia, Garamond, serif;
}
#central { outline: 1pt dashed orange }
.description
{
font-size: 12pt;
color: #F5F032;
text-align: justify;
font-family: Calibri, AvantGarde BkBT, Arial, sans-serif;
}
#navigator
{
width: 600px;
margin: 0 auto;
top: -1.00em;
position: relative;
}
.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;
display: inline-block;
border-left: 1pt solid #99CCFF;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
#navigator a:link
{
color: Aqua;
background: linear-gradient(#00254A, #8CC6FF, #00254A);
}
#navigator a:active { color: #999966 }
#navigator a:visited { color: #FF99FF }
#navigator a:hover
{
color: #FFFF99;
background: linear-gradient(#004080, #3399FF, #004080);
}
#navigator p
{
width: 90pt;
color: #FFFF99;
}
.philosophic
{
margin: 0 auto;
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
{
outline: 2pt solid #FFBE00;
background: linear-gradient(#004080, #0066FF);
}
#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;
}
</style>
</head>
<body>
<div id="title-banner">
<p class="main-title">Philosophy</p>
</div>
<div id="navibar">
<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>
<div id="general-container">
<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>
</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:
|
|
