CSS Aesthetic Design

In general, a number of CSS properties are designed to modify and control the detail aesthetic design of a CSS page content. Some typical properties used in CSS aesthetic design are

color property
background property
border property
font property

CSS Color

Color is one of the important aesthetic design element. A CSS color value, <color> is specfied by either a keyword or a numerical RGB specification.

CSS Color Name

The list of keyword color name, defined in HTML 4.0, is

aqua
black
blue
fuchsia
gray
green
lime
maroon
navy
olive
purple
red
silver
teal
white
yellow

CSS Color RGB Notation

CSS color can be specified as a RGB numerical color. The format of an RGB value can be expressed in hexadecimal notation or function notation.

Hexadecimal notation:
- three hexadecimal RGB characters, #rgb
- six hexadecimal RGB characters, #rrggbb .
function notation:
- decimal RGB function, rgb(r,g,b) where r, g, b: clipped 0-255
- percentage RGB function, rgb(r%,g%,b%) where r, g, b: clipped 0-100

CSS Color Code

Some typical color code:

Color NameSix Hexdecimalrgb decimal aqua#00FFFFrgb(0,255,255) black#000000rgb(0,0,0) blue#0000FFrgb(0,0,255) fuchsia#FF00FFrgb(255,0,0) gray#808080rgb(128,128,0) green#008000rgb(0,128,0) lime#00FF00rgb(0,255,0) maroon#800000rgb(128,0,0) navy#000080rgb(0,0,128) olive#808000rgb(128,128,0) purple#800080rgb(128,0,128) red#FF0000rgb(255,0,0) silver#C0C0C0rgb(192,192,192) teal#008080rgb(0,128,128) white#FFFFFFrgb(255,255,255) yellow#FFFF00rgb(255,255,0)

CSS Transparent Keyword

CSS transpaent keyword is keyword used to specify a clear transparent presentation to color related properties.

CSS Aesthetic Effect

The typical CSS aesthetic effects in CSS aesthetic design are

Foreground Color
Background
Border

CSS Foreground Color

The foreground color is used to describe the foreground color of text content in an container. The CSS foreground color is specified by color property

Page with Colored Text Container

An example of a HTML page with colored text containers in the Normal flow of the page.

HTML Document Input:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
* {outline:silver solid 2px}
.t1 {color:blue}
.t2 {color:#f00}
.t3 {color:#c0c0c0}
.t4 {color:rgb(128,128,0)}
.t5 {color:rgb(0%,50%,0%)}
</style>
<title>Sample Page</title>
    </head>
    <body>
<h1>A Simple Page with colored text Containers</h1>
<p>This is the first paragraph.</p>
<h1>Second Heading</h1>
<p class="t1">This is a container with blue text.</p>
<p class="t2">This is a container with #f00 text.</p>
<p class="t3">This is a container with #c0c0c0 text.</p>
<p class="t4">This is a container with rgb(128,128,0) text.</p>
<p class="t5">This is a container with rgb(0%,50%,0%) text.</p>

    </body>
</html>

HTML Web Page Embedded Output:

CSS Background

The CSS background of a CSS container is the rendering surface of the CSS canvas. The CSS background can either be a color or an image.

CSS Background Color

The CSS canvas is a clear transparent rendering surface. A CSS background-color property is used to specify the background color of container for presentation.

Page with Color Backgrounded Container

An example of a HTML page with color backgrounded containers in the Normal flow of the page.

HTML Document Input:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
* {outline:silver solid 2px}
.b1 {background-color:blue}
.b2 {background-color:#f00}
.b3 {background-color:#c0c0c0}
.b4 {background-color:rgb(128,128,0)}
.b5 {background-color:rgb(0%,50%,0%)}
</style>
<title>Sample Page</title>
    </head>
    <body>
<h1>A Simple Page with Color Backgrounded Containers</h1>
<p>This is the first paragraph.</p>
<h1>Second Heading</h1>
<p class="b1">This is a container with blue background.</p>
<p class="b2">This is a container with #f00 background.</p>
<p class="b3">This is a container with #c0c0c0 background.</p>
<p class="b4">This is a container with rgb(128,128,0) background.</p>
<p class="b5">This is a container with rgb(0%,50%,0%) background.</p>

    </body>
</html>

HTML Web Page Embedded Output:

CSS Background Image

The CSS canvas is a clear transparent rendering surface. A CSS background-image property is used to specify a background image as the background of container for presentation.

Page with Image Backgrounded Container

An example of a HTML page with image backgrounded container in the Normal flow of the page.

HTML Document Input:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
* {outline:silver solid 2px}
.b1 {background-image: url("http://sideway.hk/images/sideway.jpg")}
</style>
<title>Sample Page</title>
    </head>
    <body>
<h1>A Simple Page with image Backgrounded Container</h1>
<p>This is the first paragraph.</p>
<h1>Second Heading</h1>
<p class="b1">This is a container with background image.</p>

    </body>
</html>

HTML Web Page Embedded Output:

CSS Border

The typical properties used to specify CSS border are

width
color
style

Page with bordered Container

An example of a HTML page with bordered containers in the Normal flow of the page.

HTML Document Input:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
* {outline:silver solid 2px}
.b1 {border:solid black 5px}
.b2 {border:dashed red 2px}
</style>
<title>Sample Page</title>
    </head>
    <body>
<h1>A Simple Page with bordered Containers</h1>
<p>This is the first paragraph.</p>
<h1>Second Heading</h1>
<p class="b1">This is a container with 5px black solid border.</p>
<p class="b2">This is a container with 2px red dasher border.</p>

    </body>
</html>

HTML Web Page Embedded Output:

CSS Typography

The CSS typography is controlled and modified by the font related properties, while CSS text presentation is handled by text-related properties. Some typical properties used in CSS typography are

@font-face
font-family property
font-style property
font-variant property
font-weight property
font-stretch property
font-size property
font-size-adjust property

Page with Specified Font Container

An example of a HTML page with specified font containers in the Normal flow of the page.

HTML Document Input:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
* {outline:silver solid 2px}
.f1 {font-size:25px;
font-style:italic;
font-family:arial}
</style>
<title>Sample Page</title>
    </head>
    <body>
<h1>A Simple Page with Specified Font Containers</h1>
<p>This is the first paragraph.</p>
<h1>Second Heading</h1>
<p class="f1">This is a container with 25px text-indent, 
underline text-decoration, and capitalize text-transform.</p>

    </body>
</html>

HTML Web Page Embedded Output:

CSS Text Presentation

The CSS Text Presentation is controlled and modified by the text related properties, while CSS typography is handled by font-related properties. Some typical properties used in CSS text presentation are

text-indent property
text-align property
text-decoration property
text-shadow property
text-transform property
letter-spacing property
word-spacing property
white-space property

Page with decorated text Container

An example of a HTML page with decorated text containers in the Normal flow of the page.

HTML Document Input:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
* {outline:silver solid 2px}
.t1 {text-indent:25px;
text-decoration:underline;
text-transform:capitalize}
</style>
<title>Sample Page</title>
    </head>
    <body>
<h1>A Simple Page with decorated text Containers</h1>
<p>This is the first paragraph.</p>
<h1>Second Heading</h1>
<p class="t1">This is a container with 25px text-indent, 
underline text-decoration, and capitalize text-transform.</p>

    </body>
</html>

HTML Web Page Embedded Output: