Notes and Style Sheet - Week Four

Notes: To align text and image comparable to image align="absmiddle", use "vertical-align". Also the pseudo-selectors for first-letter answer the question of streamlining that function. It's a more efficient way to cover all the instances at once. I can only get text-indent to work as a regular style property of P, but not as a property of P:first-line.

I've already discovered that Netscape doesn't recognize imported style sheets. It is possible to list both an imported and linked style sheet and NS will automatically utilize the linked. If imported is last, Explorer will use that since the last listed is the priority.

I've used the pseudo a:link a:active a:visited, and a:hover for a long time, but didn't know they are called a pseudo class. The TOE page for CSS uses them (home link below), as well as the links on this page from the linked style sheet it uses.

The page-break function is useful for a web site with pages that can be printed for reference. It is a good way to be sure the sections break correctly.

These last two paragraphs are blocks with float left and right, respectively and the line underneath is given a style = "clear: all;" to put it underneath. If the HR line is not cleared it goes between the two blocks.

   body
	{
	background: lightyellow url(cssfall_images/bgrstar.gif) fixed;
	padding: 30px;
	}
img
	{
	border: thick ridge gold;
	margin-left: 20px;
	}
table  
	{
 	 background: lightyellow url(cssfall_images/bgrybrush.gif);
	width: 95%;
	align: center;
 	}
 P
	{
	padding: 25px;
	text-indent: 15%;
	}

.white
	{
 	color: white;
	border-bottom: thin solid white;
	}
.purple
	{
	color: purple;
	background: lavender;
	border-left: thick dashed purple;
	border-top: none;
	border-right: thick dashed purple;
	border-bottom: none;
	padding: 5px;
	margin-left: 175px;
	width: 250px;
	}
.cell
	{
	background: lightseagreen;
	border: medium dashed white;
	margin-left: 150px;
	padding: 5px;
	color: white;
	text-align: center;
 	}
.pclear
	{
	clear: right;
	padding: 20px;
	border: medium dashed white;
	text-align: left;
	margin-left: 240px;
	margin-right: 10px;
	}
P:first-letter
	{
	color: seagreen;
	font-size: large;
	}
   P:first-line
	{
	font-family: impact;
	font-size: 10pt;
	letter-spacing: 5pt; 
	}
H4	
	{
	font-size: 10pt;
	color: seagreen;
	}
#dark
	{
	color: navy;
	background: #FFFFF0;
	font-style: bold;
	width: 275px;
	padding: 5px;
	text-align: center;
	}
.high
	{
	line-height: 200%;
	}
.flet:first-letter
	{
	color: lightseagreen;
	}
A:hover
	{
	background: lime;
	color: navy;
	font-size: large;
	}

Linked style sheet
Home