Lesson 17: Outlining a Box

	Outlining a Box

Introduction

To indicate start and limits of a box, you can draw a line around it. To let you do this, CSS provides a style named outline-style. It can have one of the following values:

none: This is the default value. It is the same as no outline around the box

solid: A continuous line is dawn around the box or element. Here is an example:

<html>
<head>
<title>Anthropology</title>

<style>
header { outline-style: Solid }

.main-title {
    color:       red;
    font-size:   24pt;
    text-align:  center;
    font-family: Bodoni MT Black, serif; }
</style>

<head>
<body>

<header>
  <p class="main-title">Anthropology</p>
</header>

<section>
  <p class="presentation">Anthropology is the study of the origins as well as 
  the contemporary aspects of humans.</p>
</section>

</body>
</html>

This would produce:

Drawing an Outline Around a Box - Solid

dotted: A line with dots will be drawn around the box or element. Here is an example:

<!DOCType html>

<html>
<head>
<title>Political Sciences</title>

<style type="text/css">
header {
    outline-style:    None;
    text-align:       Center;
    background-color: #6495ED
}
#main-title {
    color: AntiqueWhite;
    font-size: 1.92em;
    font-family: Browdway BT, Britannic Bold, sans-serif;
}
section {
    outline-style: dotted;
    background-color: #FF8C00
}
</style>
</head>
<body>
<header>
  <p id="main-title">Political Science</p>
</header>

<section>
  Political science studies the management of people, their organization, the 
  country in which they live, or any entity whose common directions and shared 
  policies should (sometimes must) be specified as the way they conduct their 
  affairs. The central topic of political science is politics, which is about 
  leadership and power. The most common or the largest entity that exercises 
  politics is the government. To perform its functions, a political entity, such as 
  the government, has a structure, institutions, and policies.
</section>

</body>
</html>

This would produce:

Drawing an Outline Around a Box - Dotted

dashed: a regularly interrupted line will be drawn around the element as follows:

double: A double solid line will be drawn around the element. Here is an example:

<html>
<head>
<title>F# Programming: An Overview</title>

<style>
#heading {
    background-color: Navy;
    outline-style:    Solid; }
#title {
    text-align: center;
    color:      Yellow; }
#intro-class {
    outline-style:    double;
    background-color: Navy;
}
.details {
    font-size:   12pt;
    text-align:  Justify;
    color:       LightBlue;
    font-family: Times New Roman, serif;
}
</style>
</head>
<body>

<header id="heading">
  <h1 id="title">F# Programming</h1>
</header>

<section id="intro-class">
  <p class="details">In all modern programming languages, the class is the 
  most popular tool to create objects. Like all types in F#, a class is created 
  using the <b>type</b> keyword. The members of a class are primarily created 
  from primitive data types (<b>string</b>, <b title="Integer">int</b>, 
  <b>float</b>, etc).</p>
</section>

</body>
</html>

This would produce:

Drawing an Outline Around a Box - Double

groove: A solid 3-D line will be drawn around the element as follows:
ridge: A solid 3-D line will be drawn around the element as follows:
inset: A solid 3-D line will be drawn around the element as follows:
outset: A solid 3-D line will be drawn around the element as follows:
window-inset: A solid 3-D line will be drawn around the element as follows:

The Thickness of the Contour of a Box

You can specify the thickness by which to draw the line around the element. This is done using a style named outline-width. Its value must be an HTML-based number. Here are examples:

<html>
<head>
<title>F# Programming: An Overview</title>

<style>
.presentation {
    font-size:   12pt;
    color:       Lime;
    font-family: Times New Roman, serif;
}

#intro-rec {
    outline-style: Solid;
    background:    Maroon; }

.details {
    font-size:   12pt;
    color:       LightBlue;
    font-family: Times New Roman, serif;
}
#intro-class {
    outline-width:    0.64em;
    background-color: Navy;
    outline-style:    double;
}

.record {
    outline-width:    1pt;
    white-space:      pre;
    font-size:        12pt;
    outline-style:    Solid;
    background-color: lightblue;
    font-family:      Courier New, serif;
}
.enumeration {
    outline-width:    0.42em;
    white-space:      pre;
    font-size:        12pt;
    outline-style:    Solid;
    background-color: lightblue;
    font-family:      Courier New, serif;
}

#heading {
    background-color: Navy;
    outline-style:    Solid; }
#title {
    text-align:  center;
    color:       Yellow; }
</style>
</head>
<body>

<header id="heading">
  <h1 id="title">F# Programming</h1>
</header>

<header id="intro-rec">
  <p class="presentation">The F# language supports different types and, subsequenly, 
  there are various means to get an object. The types in F# include records, 
  structures, classes, and discriminated unions.</p>

  <p class="presentation">As done in <span style="font-family: Verdana; color: 
  Fuchsia;">Object Pascal</span>, the record is the simplest technique to create 
  a class. Here is an example of a record:</p>
</header>

<blockquote class="record">type Employee = {
      EmployeeNumber : string
      FirstName      : string
      LastName       : string
      HourlySalary   : float }
</blockquote>

<section id="intro-class">
  <p class="details">In all modern programming languages, the class is the 
  most popular tool to create objects. Like all types in F#, a class is created 
  using the <b>type</b> keyword. The members of a class are primarily created 
  from primitive data types (<b>string</b>, <b title="Integer">int</b>, 
  <b>float</b>, etc). A member of a class can also be an enumeration type. Here 
  is an example:</p>
</section>

<blockquote class="enumeration">type OccupancyStatus =
| Other       = 0
| Available   = 1
| Occupied    = 2
| NeedsRepair = 3

type Apartment = {
    UnitNumber      : string
    Bedrooms        : int
    Bathrooms       : float
    SecurityDeposit : int
    MonthlyRate     : int
    Status          : OccupancyStatus }
</blockquote>

</body>
</html>

This would produce:

The Thickness of the Outline of a Box

The Color of the Outline

The line around an element can be painted with a color of your choice. To make this possible, CSS provides the outline-color style. It takes one or two values. Its primary value must be a color. Here are examples:

<html>
<head>
<title>F# Programming: An Overview</title>

<style>
.presentation {
    font-size:   12pt;
    color:       Lime;
    font-family: Times New Roman, serif;
}
#intro-rec {
    background: Maroon; }

.details {
    font-size:   12pt;
    color:       LightBlue;
    font-family: Times New Roman, serif;
}
#intro-class {
    background-color: Navy;
}
.record {
    outline-color:    #CC3300;
    outline-width:    1pt;
    white-space:      pre;
    font-size:        12pt;
    outline-style:    Solid;
    background-color: lightblue;
    font-family:      Courier New, serif;
}
.enumeration {
    outline-width:    0.42em;
    white-space:      pre;
    font-size:        12pt;
    outline-style:    Solid;
    background-color: lightblue;
    font-family:      Courier New, serif;
}
#heading {
    outline-color:    Navy;
    background-color: #CCFFFF;
    outline-style:    Solid; }
#title {
    text-align:  center;
    color:       #0033cc; }
</style>
</head>
<body>

<header id="heading">
  <h1 id="title">F# Programming</h1>
</header>

<header id="intro-rec">
  <p class="presentation">The F# language supports different types and, subsequenly, 
  there are various means to get an object. The types in F# include records, 
  structures, classes, and discriminated unions.</p>

  <p class="presentation">As done in <span style="font-family: Verdana; color: 
  Fuchsia;">Object Pascal</span>, the record is the simplest technique to create 
  a class. Here is an example of a record:</p>
</header>

<blockquote class="record">type Employee = {
      EmployeeNumber : string
      FirstName      : string
      LastName       : string
      HourlySalary   : float }
</blockquote>

<section id="intro-class">
  <p class="details">In all modern programming languages, the class is the 
  most popular tool to create objects. Like all types in F#, a class is created 
  using the <b>type</b> keyword. The members of a class are primarily created 
  from primitive data types (<b>string</b>, <b title="Integer">int</b>, 
  <b>float</b>, etc). A member of a class can also be an enumeration type. Here 
  is an example:</p>
</section>

<blockquote class="enumeration">type OccupancyStatus =
| Other       = 0
| Available   = 1
| Occupied    = 2
| NeedsRepair = 3

type Apartment = {
    UnitNumber      : string
    Bedrooms        : int
    Bathrooms       : float
    SecurityDeposit : int
    MonthlyRate     : int
    Status          : OccupancyStatus }
</blockquote>

</body>
</html>

This would produce:

The Color of the Outline of a Box

The Outline Style

You use each of the outline parts when you want to specify them individually. To let you specify all three parts of an outline, CSS provides a style named outline. It can take the color, the type of line, and the thickness as values, separated by empty spaces. Here are examples:

<html>
<head>
<title>F# Programming: An Overview</title>

<style>
.presentation {
    font-size:   12pt;
    color:       Lime;
    font-family: Times New Roman, serif;
}

#intro-rec {
    outline: #FF3300 Double 0.64em;
    background: Maroon; }

.details {
    font-size:   12pt;
    color:       LightBlue;
    font-family: Times New Roman, serif;
}
#intro-class {
    outline: #0066CC double 0.64em;
    background-color: Navy;
}

.record {
    outline-color:    #CC3300;
    outline-width:    1pt;
    white-space:      pre;
    font-size:        12pt;
    outline-style:    Solid;
    background-color: lightblue;
    font-family:      Courier New, serif;
}
.enumeration {
    outline-width:    0.42em;
    white-space:      pre;
    font-size:        12pt;
    outline-style:    outset;
    background-color: lightblue;
    font-family:      Courier New, serif;
}

#heading {
    outline-color:    Navy;
    background-color: #CCFFFF;
    outline-style:    Solid; }
#title {
    text-align:  center;
    color:       #0033cc; }
</style>
</head>
<body>

<header id="heading">
  <h1 id="title">F# Programming</h1>
</header>

<header id="intro-rec">
  <p class="presentation">The F# language supports different types and, subsequenly, 
  there are various means to get an object. The types in F# include records, 
  structures, classes, and discriminated unions.</p>

  <p class="presentation">As done in <span style="font-family: Verdana; color: 
  Fuchsia;">Object Pascal</span>, the record is the simplest technique to create 
  a class. Here is an example of a record:</p>
</header>

<blockquote class="record">type Employee = {
      EmployeeNumber : string
      FirstName      : string
      LastName       : string
      HourlySalary   : float }
</blockquote>

<section id="intro-class">
  <p class="details">In all modern programming languages, the class is the 
  most popular tool to create objects. Like all types in F#, a class is created 
  using the <b>type</b> keyword. The members of a class are primarily created 
  from primitive data types (<b>string</b>, <b title="Integer">int</b>, 
  <b>float</b>, etc). A member of a class can also be an enumeration type. Here 
  is an example:</p>
</section>

<blockquote class="enumeration">type OccupancyStatus =
| Other       = 0
| Available   = 1
| Occupied    = 2
| NeedsRepair = 3

type Apartment = {
    UnitNumber      : string
    Bedrooms        : int
    Bathrooms       : float
    SecurityDeposit : int
    MonthlyRate     : int
    Status          : OccupancyStatus }
</blockquote>

</body>
</html>

This would produce:

The Outline of a Box

When using the outline style, you don't have to specify the color, the type of line, and the thickness in that order. In fact, you can specify only the type of line as follows:

#links-banner {
    outline:          solid;
    text-align:       center;
    background-color: DarkRed;
}

You can also specify only two styles. In this case, you must specify the type of line and of the other two options in any order. Here are examples:

outline: ridge 0.68em;
outline: solid Tomato;
outline: 0.18em dotted;
outline: dashed #000;
outline: DarkGreen dotted;

The last alternative is to provide all three outline values in any order of your choice. Here are examples:

<!DOCTYPE html>

<html>
<head>
<title>Political Sciences</title>

<style type="text/css">
#main-title {
    font-weight:      900;
    font-size:        2.24em;
    text-align:       center;
    color:            DarkRed;
    text-shadow:      0.08em 0.08em 0.08em Red;
}
#links-banner {
    outline:          solid;
    text-align:       center;
    background-color: DarkRed;
}
#ref-banner {
    background-color: RGB(79, 129, 189);
}
#bottom-banner {
    outline:          0.15em DeepSkyBlue solid;
    background-color: RGB(0, 51, 102);
}
#final-links { list-style: None;  }
#footing     { text-align: center }

a.base-links:link, a.base-links:active,
a.base-links:visited, a.base-links:hover
{
    font-size:       12pt;
    text-decoration: none;
    font-family:     Coronet, Verdana, sans-serif;
}
a.base-links:link    { color: #FFF   }
a.base-links:active  { color: Lime   }
a.base-links:visited { color: Yellow }
a.base-links:hover   {
    outline:    1pt Solid #000;
    color:      Brown;
    background: AntiqueWhite; }

a.references:link, a.references:active,
a.references:visited, a.base-links:hover {
    font-size:       12pt;
    text-decoration: none;
    font-family:     Coronet, Verdana, sans-serif }
a.references:link    { color: RGB(204, 236, 255)  }
a.references:active  { color: RGB(204, 255, 102)  }
a.references:visited { color: RGB(255, 255, 204)  }
a.references:hover   {
    outline:    Dashed 1pt;
    color:      RGB(255, 255, 153);
    background: RGB(0, 102, 153); }

#copyright {
    font-size:   14px;
    text-align:  center;
    color:       rgb(102, 255, 51);
    font-family: Century Gothic, Tahoma, sans-serif; }
}
</style>
</head>
<body>
<header>
  <p id="main-title">Political Science</p> </header>

<div id="links-banner">
  <p><a href="index.htm" class="base-links">Social Science</a> | 
  <a href="earth.htm" class="base-links">Earth Science</a> | 
  <a href="aboutus.htm" class="base-links">About Us</a> | 
  <a href="contactus.htm" class="base-links">Contact Us</a></p>
</div>

<section>
  <p>Political science studies the management of people, their organization, the
  country in which they live, or any entity whose common directions and shared
  policies should (sometimes must) be specified as the way they conduct their
  affairs. The central topic of political science is politics, which is about
  leadership and power. The most common or the largest entity that exercises
  politics is the government. To perform its functions, a political entity, such as
  the government, has a structure, institutions, and policies.</p>
</section>

<div>
  <p>As a field of the social science group, political science is closely tied and 
  influenced by the history, the sociology, the psychology, the ethnicity, and the 
  economics of the local environment. Other fields that contribute to political 
  science are the law, the finances, and the anthropology. Fields that directly, 
  indirectly, or remotely influence politics are religion and geography.</p>
</div>

<footer>
  <p>Although policital science is academically a study, it is ultimately about order, 
  justice, regulations, finances, taxes, welfare, employment, religion, media, 
  military, and external relations. These aspects are lead or set through political 
  parties, political campaigns, and elections.</p>
</footer>

<footer id="ref-banner">
  <ul id="final-links">
    <li><a href="pol-systems.htm" class="references">Political Systems</a></li>
    <li><a href="internationals.htm" class="references">International 
    Organizations</a></li>
    <li><a href="ngos.htm" class="references">Non-Government Organizations</a></li>
  <ul>
</footer>

<footer id="bottom-banner">
  <p id="copyright">Copyright &copy; 2015</p>
</footer>
</body>
</html>

This would produce:

The Outline Style