↶ ↜ Index ↝ ↷
the <p> Tag elements / selectors	'h' (header) Tag selectors	misc .selectors
the <ul> Tag elements / selectors	the <ol> Tag elements / selectors	the <li> Tag elements / selectors
the <a> Tag selector	the <hr> Tag selector	ways to 'style' elements
Also see my color grid for examples of some associated colors and		specialcharacters for list-style-types
Also see CSS Snippets page	and Deprecated HTML elements in favor of CSS

These 'p' ('Paragraph') tags are from stylecss.css

[NOTE: this div is 635px wide]

---

this is <p> tag

this is the p tag with style=direction:rtl

this is <p class="ml4">

this is <p class="pl4">

this is <p class="norm">

this is <p class="section">

this is <p class="smaller">

this is <p class="small">

this is <p class="smallest">

this is <p class="smnorm">

this is <p class="mednorm">

this is <p class="smernorm">

this is <p class="smallestnorm">

this is <p class="smcaps">

this is <p class="notice">

this is <p class="notice2">

this is <p class="bolder">

this is <p class="bold">

this is <p class="lmargin">

this is <p class="lmarginbig">

this is a <generic .selector class="lmarginbig">

this is <p class="privacy">

this is a <generic .selector class="snippet01">

this is a <generic .selector class="snippet02">

this is <p class="important">

this is <p class="important2">

-- this following are 'imported' fonts primarrily from googlefontsdirectory: --

this is  <p class="philosopher400"> : 1.2em; weight 400

this is  <p class="philosopher416"> : 14px; weight 400

this is  <p class="philosopher600"> : 1.2em; weight 600

These are my 'H' ('Headings' H1-H6 ) selectors

This is Header element H1

This is Header element H2

This is Header element H2.purple

This is Header element H3

This is Header element H3.cntborder

This is Header element H3.cntrborder

This is Header element H3.purple

This is Header element H4

This is Header element H4.cnt

This is Header element H5

This is Header element H5.cnt

This is Header element H6

This is Header element H6.cnt

These ol,ul,li tags are from stylecss.css NOTE: i have no declaration for a 'normal' 'li' selector

---

**Also see specialcharacters for other list-style-types:

---

this is my 'normal' ul (unordered list), that is, without inline styling. only the css style

• this is a li (list item) under ul w/o inline styling

• list item under ul.less

• list item under ul.norm

• list item under under ul.normcircle

• list item under ul.lessnorm

• list item under ul.lessnormcircle

• list item under ul.sm

• list item under ul.narrow

• list item under ul.wide

• list item under ul.lite (replaces dir.lite)

• list item under ul.litesm (replace dir.litesm)

These are specifically ol selectors

This is my 'normal' ol (ordered list) without inline or css styling (w3c, browser default)

1. list item under

1. list item under ol.lite
   1. sub-list item under ol.lite

1. list item under ol.litesm

1. list item under ol.cssdef

1. list item under ol.greek01

These are my 'styled' li (list item) selectory / element

I do not have the 'normal' li styled in a stylesheet. *also see specialcharacters for more list-style-types

I'm using my 'normal' ul to demenstrate my li's my 'normal' ul is styled in stylecss.css

• this is my 'normal' li (list item) under ul, without styling
• this is my 'normal' li (list item) under ul, without styling
  • this is my 'normal' li as a sub list under ul, without styling
  • this is my 'normal' li as a sub list under ul, without styling

1. This is my 'normal li under my 'normal' ol, without styling
2. This is my 'normal li under my 'normal' ol, without styling
   1. This is my 'normal li as sub-list, under my 'normal' ol, w/ css styling: ol ol { list.style.type:lower-alpha; }
   2. This is my 'normal li as sub-list, under my 'normal' ol, w/ css styling: ol ol { list.style.type:lower-alpha; }

• list item li.newnorm under ul
• list item li.newnorm under ul

1. list item li.newnorm under ol
2. list item li.newnorm under ol

• list item li.norm under ul
• list item li.norm under ul

1. list item li.norm under ol
2. list item li.norm under ol

• list item li.circle under ul
• list item li.circle under ul

1. list item li.circle under ol
2. list item li.circle under ol

• list item li.circlesm under ul
• list item li.circlesm under ul

1. list item li.circlesm under ol
2. list item li.circlesm under ol

• list item li.circlesmsest under ul
• list item li.circlesmsest under ul

1. list item li.circlesmsest under ol
2. list item li.circlesmsest under ol

• list item li.circlenarrow under ul
• list item li.circlenarrow under ul

1. list item li.circlenarrow under ol
2. list item li.circlenarrow under ol

1. list item li.circlewide under ol
2. list item li.circlewide under ol

• list item li.small under ul
• list item li.small under ul

1. list item li.small under ol
2. list item li.small under ol

• list item li.none under ul
• list item li.none under ul

1. list item li.none under ol
2. list item li.none under ol

This is a 'collection' of my miscellanious .selectors

I'll be using <P> (paragraph) to illustrate the selectors / elements 'style'

this is generic class .normsuse

this is generic class .smnormsuse

this is generic class .hiliter

this is generic class .hilitergray

this is generic class .newsDate

this is generic class .url

this is generic class .urlmargin

this is generic class .nav

this is generic class .note

this is generic class .note1

this is generic class .note2

this is generic class .note3

this is generic class .note3mar

this is generic class .note4

this is generic class .notefl

this is generic class .notered

this is generic class .notered1

this is generic class .important

this is generic class .ns4

this is generic class .normnovell

this is generic class .smnormnovell

this is generic class .bio

this is generic class .Box

this is generic class .Box80

this is generic class .sig:after

this is generic class .sigsm:after

sigright:after

the above is a generic class .sigright it aligns text and trailing '2' to right using css unicode ∖2621 instead of ☡.
The way I have the positioning and margins set, this specific class only allows for text the size of my name, hence 'sig'nature. Anymore text will resault in a 40px wide 'paragraph' that wraps.

this is generic class .hidden

this is generic class .unhidden *note: hidden, above, works cuz you don't see it

this is generic class .heading

this is generic class .headingnorm

this is generic class .headingurgent

this is generic class .headingcenter

this is generic class .headingcenterbold

this is generic class .headingbl

this is generic class .headinggr

this is generic class .section

this is generic class .title

this is generic class .tagred

this is generic class .taggold

this is generic class .tagblack

this is generic class .taggrey

this is generic class .tagblue

this is generic class .taggreen

this is generic class .tagyellow

this is generic class .smnorm

this is generic class .smnormlite

this is generic class .smrnormlite

this is generic class .inccss

this is generic class .fuckoff02

this is generic class .tt (replaces <tt> (teletype))

• this is dir.lite - dir is obsolete and has been replaced by ul - will not pass html5 validation

• this is dir.litesm - dir is obsolete and has been replaced by ul - will not pass html5 validation

this is a SPAN class Я called span.glow

---

this is table.table03, th (header) { css is 618px, but styled here to 400 & centered }
this is tr (row) 01 (even)
this is tr (row) 02 (odd)

---

This is class 'pre' as in pre-formated text.. 
check kernel version: # uname -a
	*returnes something like this:
	linux-amd:~ # uname -a
	Linux linux-amd 2.6.31.14-0.8-desktop #1 SMP PREEMPT 2011-04-06 18:09:24 +0200 i686 i686 i386 GNU/Linux
	linux-amd:~ #
	

This is class 'pre.wrap' same as above, but with forced text wrap, +font weight and less left margin.. 
check kernel version: # uname -a
	*returnes something like this:
	linux-amd:~ # uname -a
	Linux linux-amd 2.6.31.14-0.8-desktop #1 SMP PREEMPT 2011-04-06 18:09:24 +0200 i686 i686 i386 GNU/Linux
	linux-amd:~ #
	

This is class 'pre.smaller' as in smaller font and left margin or 'indent'
check openSuSE version:
	linux-amd:~ # cat /etc/SuSE-release
	openSUSE 11.2 (i586)
	VERSION = 11.2
	

This is class 'pre.normplus', +wrap (not seen in this example, due to short lines of text... 
host: name the host (computer name):
    /etc/hosts
	  *example:
	  (openSuSE 11.x 2011)
	  127.0.0.1	localhost
	    .... some other stuff ... 
	 

This is class 'pre.normless'
	  hr.appleheart:before {
	content:"\2767";
	position:absolute;
	width:100%;
	top:-0.25em;
	text-align:center;
	color:rgba(0,0,0,0.21);
	text-shadow:0px 0px .05em rgba(255,255,255,.12);
	height:2em;color:#ccc;
	font-size:2.75em;
	}
	

these are my <a> (anchor) Tags.

*note: my 'a' :hover is styled, so if i didn't specifically style :hover on each class, it takes main 'a:hover'

this is 'a' as styled in stylecss.css with no inline style applied

this is a.normal

this is a.norm

this is a.smnorm

this is a.smnormlite

this is a.smnormsuse

this is a.normlite

this is a.normlitemar

this is a:active.normlitemar

this is a:visited.normlitemar

this is a:hover.normlitemar

this is a.obliquelite

this is a:hover.obliquelite

this is a.bold

this is a.boldblink

this is a.black

this is a.snippet01

this is a.border

this is a.inheritit

this is a.address

this is a.taggold

these are my <hr> (horizontal rule) Tags.

also see 'HR Borders' section

---

the above selector is hr.hg

---

the above selector is hr.dot

---

the above selector is hr.cnt

---

the above selector is hr.px50

---

the above selector is hr.px75

---

the above selector is hr.px50cnt

---

the above selector is hr.px75cnt (75 px wide, centered)

---

the above selector is hr.per80gray (80 % gray border)

---

the above selector is hr.appleheart (very complicated, see code)

the following 'hr' (section divider) is of my signature 'hr'... : ) Landis.

[code] <p style="text-align:center; ">↜―┄┅⋱\†/⋰┅┄―↝</p> [/code]

↜―┄┅⋱\†/⋰┅┄―↝

this is how the above 'my signature divider' ws interpreted by my Wordpress site LandisTwo