Whit text on fuzzy background example

CSS Sampler div

Menu example

To get the Tab and box to join use a white border bottom and border-top:none

#menu a:visited.active	{ background: #fff; border-bottom : 2px solid #fff;color : #000; }
#main { background: #FFf; border: 1px solid #666; border-top: none;  }

sailing club

We're a friendly sailing club based on the east coast.

New members are always very welcome. The club is open to everybody irrespective of sailing experience, although all members must be 18 years or older. You can join the club for dinghy and/or yacht sailing and at a level that suites you from complete beginner to experienced boat owner.

If all this sounds good and you'd like to know more, we'd love to hear from you. Get in touch via the contact form on the Contact tab above.

Menu example

Style Sheet Sampler to understand DIV tags

W3School's helpful website

Style Sheet overview

here are a few tips

absolute or relative style sheets and images

A workaround so Relative URLs in local copies from a website work

Using Subst L: is a good workaround when webpages use Relative URL's like src=/images and href=/css

You can use a subst L: so / is relative to L:

Set up the subst l: to where you have downloaded the website files. Open l: drive and double click on the .htm files. 

subst l: C:\Users\dough\Desktop\MyWebSiteCopy
subst M: .
subst

http://ccgi.dougrice.plus.com/sampler.htm gets style sheets from http://ccgi.dougrice.plus.com

You could also include it twice, knowning one is going to fail.

<head>
<link rel="stylesheet" type="text/css" href="patrickpi_styles2.css">
<link rel="stylesheet" type="text/css" href="/patrickpi_styles2.css">
</head>

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<!-- Relative URLs:- the Subst L: is a good workaround when using using the src=/images and href=/css -->
<img src=/images/janOpen_AC1001.jpg >
</body>
Relative ULRS's

Using DIV class=

The styles and HTML using class and element

.top th, are if ( class=top and element th ) then { apply styles } 

<style>
/* use div class=name element */
.top    th, .top td    { background-color: #Faa; }
.middle th, .middle td { background-color: #ffa; }
.bottom th, .bottom td { background-color: #aaF; }
</style>
<P>Try out using DIV class= tags to style different sections differently </P>
<div class=top >
<H1> Heading 1:-</H1>
<P>Text<P>
<table>
<tr><th> Title A</th><th> Title B</th></tr>
<tr><td> text  </td><td> text  </td></tr>
</table>
<H2> Heading 2:-</H2>
<P>Text<P>
<H3> Heading 3:- </H3>
<P>Text<P>
</div>

Try out using DIV class= tags to style different sections differently

Heading 1:-

Text

Title A Title B
text text

Heading 2:-

Text

Heading 3:-

Text

Heading 1:-

Text

Title A Title B
text text

Heading 2:-

Text

Heading 3:-

Text

Heading 1:-

Text

Title A Title B
text text

Heading 2:-

Text

Heading 3:-

Text

div id=

<div id=d1 > <P>Hello</P> </div>

Hello

Hello

Hello

div class=

<div class=d4 > <P>Hello</P> </div>

Hello

Hello

Hello

Style Sheet overview

here are a few tips

Using Subst L: is a good workaround when webpages use Relative URL's like src=/images and href=/css

subst l: C:\Users\dough\Desktop\MyWebsiteCopy

Double click in L:index.htm and the relative URL's should work

http://ccgi.dougrice.plus.com/sampler.htm gets style sheets from http://ccgi.dougrice.plus.com 

<head>
<link rel="stylesheet" type="text/css" href="patrickpi_styles2.css">
<link rel="stylesheet" type="text/css" href="/patrickpi_styles2.css">
</head>

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>

Why did HTML not use a "decimal" notation for it's elements? The STYLE definitions use a different notation. Inline style=, 

/* 
style   name  	<p style= inline for element
class  .name  	<p class= class does not need to be unique
id     #name  	<p id=    id should be unique
*/

Why did HTML not use a "decimal" notation for it's elements?

It could have used:-

<P.classname >
<P#idname >

You need to use:-

<P class=classname >
<P id=idname >

this was not used:-

<P style=.classname >
<P style=#idname >

<style>
/* unique div tags */
/* div id= */
#d1 { background-color: #faa; color: #ff0; font-size: 40px; }
#d2 { background-color: #afa; color: #0ff; font-size: 50px; }
#d3 { background-color: #aaf; color: #f0f; font-size: 60px; }

/* div class= */
.d4 { background-color: #faa; color: #ff0; font-size: 40px; }
.d5 { background-color: #afa; color: #0ff; font-size: 50px; }
.d6 { background-color: #aaf; color: #f0f; font-size: 60px; }

</style>

<div id=d1>
<P>SomeText</P>
</div>
<div id=d2>
<P>SomeText</P>
</div>

<div id=d4>
<P>SomeText</P>
</div>
<div id=d5>
<P>SomeText</P>
</div>