
Home Website Tutor PHP/MySQL CGI Tutorial Templates Free Scripts Free FTP Tool Free Buttons Free Bullets Free Logos Backgrounds Free Pics Frames

HTML Code Tutorial

Tutor Ebook Download

Using Borders

Borders can add an attractive appearance to box type text displays like tables, divisions, paragraphs, lists and blockquotes.

The basic properties are:

border-style: dashed,dotted,double,groove,solid,inset,outset
border-color: red, #FF0000, #F00
border-width: thin, thick, medium, #px

Border settings can be defined using inline, embedded or linked style sheets.

Borders In Paragraphs

The rain in spain falls mainly on the plain. If it falls on the plain in spain, where does it fall in France?

<p STYLE="border-style: dotted ;border-color :red;border-width :medium">The rain in spain falls mainly on the plain.  If it falls on the plain in spain, where does it fall in France?</p>

In Lists

Ice Cream
Cake
Cookies
Candy

<ul type="disc" STYLE="border-style: dashed ;border-color : blue;border-width :thin; width : 100px">
 
<li>Ice Cream
 
<li>Cake
 
<li>Cookies
 
<li>Candy
 
</ul>

In Blockquotes

The blockquote can be used to offset a block of text. By default it is indented on the left and right margins. The appearance can be improved adding the padding property to the style sheet.

<blockquote STYLE="border-style: solid ;border-color : green;border-width :thick">The blockquote can be used to offset a block of text.  By default it is indented on the left and right margins.  The appearance can be improved adding the padding property to the style sheet.</blockquote>

Short Cuts and Selected Sides

Inline code for setting borders can be shortened by using the following code:
STYLE="border: dashed blue thin"

This would serve to duplicate the action of the dessert example above. The properties are defined in the same order as above: style, color and width. NOTE: width can be defined in pixels as: 1px, 2px, etc.

Contents

Table of Contents
Introduction

Page Structure

Basic HTML Page
Doctype
The Body Tag
The Header Tag
The Division Tag
Horizontal Rule
Anchor Tag
Anchor Tag - Intradocument
Anchor Tag - Image
Using Borders
The ID Attribute
Meta Tags

Text Controls

Style Sheets
Working With Fonts
The Paragraph Tag
Paragraphs-Images
Using Lists
The Pre Tag
Line Break Tag

Tables

Basics of Tables
Colspan

Forms

Form Basics
Check Boxes
Text Boxes
Selection Boxes

Frames

Basic Frames
Target and Scrolling
Search Engines

Miscellaneous

Buttons with CSS
Using Color
Color Chart
Using Images
Using Templates
Uploading HTML pages.
HTML-CSS Quizzes

Suppose we only wanted to display borders on one or two sides of a block.

The following code could be used:
Right side: Style="border-right : solid #000000 2px"
Left side: Style="border-left : solid #000000 2px"
Top: Style="border-top : solid #000000 2px"
Bottom: Style="border-bottom : solid #000000 2px"

For multiple sides the definitions should be separated using a semicolon.
Bottom and Top: Style="border-bottom : solid #000000 2px;border-top : solid #000000 2px"

You can Test Code in : HTML editor

Exercise
To improve the appearance of the paragraph, list and blockquote, add the code ; padding: 4px to their style code.

Take a Quiz on this Information.

Anchor Tag Image

ID Attribute

HTML TOC
How to Create a Website -Tutorial
Create a Website - Home

Using HTML Code to Create a Website is provided by Net Success 2000 Plus Inc.
PO Box 1508
Somerset, KY 42502

Last Modified: September 3, 2007

HTML Codes Tutor Ebook