Menu example

CSS Sampler div

Home
News
Contact
About

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

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

div class=

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

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>