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:
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 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 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:
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 © 2015</p>
</footer>
</body>
</html>
This would produce:
| ||||
