style, sub-style, action syntax a:hover.normal { }

toiled over this,
but here it is. when styling a sub-element (selector: decloration) the order is parent or main selector

'a' (anchor, link) the 'sub-class'
'.normal' (you create)
then the 'alternate' selector (action) ':hover'
this defines what will happen to selector (class) a.normal (what it will look like) when cursor is ':hoovered' over it.
likewise with the selector:declaration 'TD' with slit difference of a space instead of a ':' (colon) - table.main td

combining selectors - how to make exceptions in these cases

sometimes you have to have 'nested' selectors to accomplish what you want in your document. For instance, You have an <h1> as a section or chapter heading in your document, followed directly by a 'sub-section' heading such as an <h3>. The following 'style' affects the Second selector in order.

see specs at w3c

theoretical 'top of page' or section:

<h1> This is Chapter 2: Coding web pages</h1>

<h3>in this section we will look at nesting selectors</h3>

In these cases the combination on margin, padding and line-height of 2 selectors stacked on top of each other or 'nested' will cause major space between them and make your layout look cheep. To minimize or effect selectors or elements in these situations there are 'nesting' rules that can be defined in your css as apposed to having to 'style' inline these selectors, elements as you go.

h1 + h3 { margin-top: -12px; }

in this case we are saying 'if' h1 precedes h3 then change the top margin of h3 as to lessen the space between them as apposed to stacking 2 selectors or elements designed to be 'standout' elements of your page. Essentially, make them work together and complement each other instead of compete and in turn, look like shit.

To show this as an example, i've made up 2 new 'headings' as i can't show both un-styled and styled if they are defined in my stylesheet These headings, h11 and h13 are styled exactly like h1 and h3 with the following addition to the stylesheet

h1 + h3 { margin-top: -12px; }

theoretical 'top of page' or section:

<h1>This is 'h1' section heading</h1>

<h3>This is sub-section 'h3'</h3>

<p>see how that works?</p>

h1 + h3 { margin-top: -12px; text-align:center; }

theoretical 'top of page' or section:

<h1>This is 'h1' section heading</h1>

<h13>This is sub-section 'h3'</h13>

Also, you can affect conditionally, the alignment in these casses. Say you want h3 to be aligned in center or even right of section whenever it is preceded by a 'chapter title'.
in this case you would add the following.

h1 + h3 { margin-top: -12px; text-align: center; }

my list of uncommon, and or often used selectors and values

:pseudo class selectors affect the parent selector 'if' conditions are met

A few of these I use a lot are ':hover', ':after' and ':nth-child'

the 'hover' class is used to change something, like the color of text when a mouse cursor is 'hovered' over the element. I use it on most of my 'a' (anchor) or link elements

a:hover { font-family: inherit; text-decoration: underline; background-color:inherit; color:rgb(96,0,0); font-weight:inherit; }

Another ':pseudo' class i use regularly is in my 'signature'

Landis

the way this works is i use <p class"sig"> and 'sigright' which are defined in my stylesheet as:

	.sig { font-family:helvetica, arial, tahoma; font-size:1.1em; color:rgb(0,0,0); text-decoration:none; padding:2px; }
	.sig:after { content:" ☡"; font-size:inherit; }
	.sigright  font-family:helvetica, arial, tahoma; font-size:1.1em; color:rgb(0,0,0); text-decoration:none; padding:2px; text-align:right; margin-left:90%; margin-right:6px; }
	.sigright:after { content:" ☡"; font-size:inherit; }

What hapens is the ':after' inserts the unicode character " ☡" including leading space after what I've typed inside the <p class="sig">, in this case my name <p class="sigright">Landis</p>
I use the 'sigright' to 'sign' on the right side of a 'document' just as you would a legal doc in real life.

Landis

And the ':nth-child' i use to alternate row colors in a table.. see: my table of Named HTML characters on the SpecialCharacters page

see spec at w3c

Style - 3 (4) basic ways to 'include' it in your document..
it's easier than i tried to make it or i just have figured it out?

3 types of <style="inline, in head or attached external stylesheet">

also see document at W3C.org titled 'valid-dtd-list'

Here are a few examples:

  1. Only setting properties on the element itself, no pseudo-elements or pseudo-classes: 
    <p style="color: #090; line-height: 1.2">...</p>
  2. Setting properties on the element, as well as on the first letter of the element, by means of the '::first-letter' pseudo-element. Note that curly braces ({...}) are required in this case: 
    <p style="{color: #090; line-height: 1.2}
	    ::first-letter {color: #900}">...</p>
  3. Setting properties on a source anchor for each of its dynamic states, using pseudo-classes: 
    <a href="http://www.w3.org/"
	    style="{color: #900}
	    :link {background: #ff0}
	    :visited {background: #fff}
	    :hover {outline: thin red solid}
	    :active {background: #00f}">...</a>
  4. Importing a style sheet to apply as a scoped style sheet: 
    <div class="navigation">
	    style="@import url(navigationstyles.css);">...</div>
  5. Including style in the head of a single page: 
    	  <style type="text/css">

	  body {
	  background-color:rgba(240,240,240,1.0);
	  }
	  
	  p {
	  color:rgb(80,80,80); 
	  font-size:12px;
	  indent:4px;
	  }
	  
	  </style>
	
	</head>
	<body>
  6. 'including' a style sheet in the head vs the @import method. this happens to be the way i've always done it. 
    <head>
    <link rel="stylesheet" type="text/css" href="stylecss.css" / >

Note: in CSS1 and CSS2, the spelling of '::first-letter' and '::first-line' is ':first-letter' and ':first-line' respectively, i.e., with a single colon, but Selectors recommends using double colons for pseudo-elements.

Align-Text:Center; ~ { margin-left:+80px } with 'garlic pepper'.. mmm.

aligning text 'center' using style: in my footer, there is an image (html-kit, logo) on the right side, same line as my 'copyright' statement. if i use the styling 'p class='' with 'style="text-align:center; "> the text is centered in the space between the image and the left margin, so i doesn't appear centered especially with a small 'thank you' 'centered' below it to compare it to. so I tried this ".. style="text-align:center; margin-left:+80px; which i was hoping would center and then 'add' 80 pixels to the left.
I think it would be like messing around ' margin-left:XXpx; margin-right:XXpx; ">..
don't know yet if it's CSS compliant, but it works!

including in the head of a single document:
I have several examples bellow, so look there
*note: /* css comment */ = a css comment, not processed by server or browser

somewhere after <head>

<style type="text/css">
/* 'comment' this is the definition of element <td> for the parent element table class 'main'*/
/* 'comment' border:1px solid black;     -this is 'shorthand that does the same as the following*/

table.main td {
border-width:1px;
border-style:solid;
border-color:rgba(80,80,80,0.5);
border-spacing:0px;
color:black;
font-family: Helvetica, Arial, sans-serif;
font-size:100%;
font-style:none;
}
</style>

,but before </head>
and <body>

Landis.

the following is an 'inline' style declaration. in this example, i'm modifying the <p> (paragraph) tag (selector, element)

<p style="color:gray; font-size:12px; text-transform:oblique; >

some simple 'boxes' organized around, over each other with one rotated

here is a basic style for the rotated 'box'. 270deg is equal to -90deg (counter clockwise). I hate the moz,webkit,ms crap, but i can't find a definitive resolution at w3c for css2.1/3 that works : (

  1. div.rotate270 {
  2. transform: rotate(270deg);
  3. transform-origin:500% 50%;
  4. -ms-transform: rotate(270deg); /* IE 9 */
  5. -ms-transform-origin:50% 50%; /* IE 9 */
  6. -webkit-transform: rotate(270deg); /* Safari and Chrome */
  7. -webkit-transform-origin:50% 50%; /* Safari and Chrome */
  8. -moz-transform: rotate(270deg); /* Firefox */
  9. -moz-transform-origin:50% 50%; /* Firefox */
  10. -o-transform: rotate(270deg); /* Opera */
  11. -o-transform-origin:50% 50%; /* Opera */
  12. }

Font-Family:Helvetica, Arial, Tahoma, etc.. - You NEED the comma's between font family names!
Like I've said, there are No standards, even within the 'standards'.. sometimes they feel like comma's sometimes they don't... : (

Headline (<H>) 1 thru 6.. that's it. Sooometimes,,, you can use 7, but I've never been able to use <h8>

{ most complete w3c Font Reference i've found: }

  1. css2.3 Specifications cover
  2. css2.1 specifications: selectory 'index'
  3. css2.1 specifications: properties (attributes) 'index'
  4. css3 fonts
  5. css3 module 'fonts'