↶ ↜ Index ↝ ↷
the <p> Tag elements / selectors	'h' (header) Tag selectors	misc generic.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 (selector w/o class. properties: values; size: 13px, indent: 4px, margin-left: 2px, padding: 2px) this, for now is my 'new standard' based on what looks good to my 5xyo eyes.

this is <p class='rev'> ('revers' direction, right to left)

this is <p class="ml4"> (has a 'margin-left: 4px' defined)

this is <p class="pl4"> (has a 'padding-left: 4px' defined)

this is <p class="norm"> (** change to no indent, after finding all accurances in site)

this is <p class="section">

*note: the following small font classes will have No affect if client browser has 'minimum font size' set

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 <p class="snippet01">

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

this is generic.selector <p class='code'>

this is <p class="important">

this is <p class="important2">

Don't link Google Fonts!
The f@gs keep changing things and they stop working.

-- the following are an example of '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

-- the following are 'imported' google fonts i was going to use:
Montserrat as section and Open Sans as paragraph, but Too thin for my eyes. --

this is <p class='montser'> using imported google font 'Montserrant'

this is <p class='opensans'> using imported google font 'Open Sans'

note: the aboove Google fonts eg,'Philosopher' has been removed.
I have Removed All Google Crap from my web sites. The communist snowflakes at google constantly change their crap, leaving your, my stuff not workning. Fnck the Commie Tyrants of 'boob valley'
will appear to work, if, like me, you have installed the Philosopher font family locally (on your computer)

These are my 'H' ('Headings' H1-H6 ) selectors from stylecss.css

The H[№] (heading) declarations is one of, if not the only place I use 'em' font-size
as I want them sized 'Relative' to the content they appear with

This is Header element H1

This is Header element H1.purple

This is Header element H1.cnt with inline style 'color: purple'

This is Header element H2

This is Header element H2.purple

This is Header element H3

This is Header element H3.purple

This is Header element H3.cnt

This is Header element H3.cntborder

This is Header element H3.cntrborder

This is Header element H3.cntsmcaps

This is Header element H4

This is Header element H4.purple

This is Header element H4.black (needed because originally 'h4' was purple)

This is Header element H4.date

This is Header element H4.cnt

This is Header element H5

This is Header element H5.purple

This is Header element H5.cnt

This is Header element H5.cntsmcaps

This is Header element H5.smcaps

This is Header element H6

This is Header element H6.purple

This is Header element H6.cnt

This is Header element H6.cntpruple

This is Test: Header element H11
This is Test: Header element H13

conclusion: h11 ~ h13 style elements (tags):
error: (nu)html5 validator states they can not be a child of a div, but are here, so
they're technically closed here, but aren't closing, meaning I had to add <br> to terminate line. very weird

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)

• ✓list item under ul.b600 with inline checkmark

These are specifically ol selectors

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

1. list item under 'normal' ol (w/o class)
2. i changed ordered list to lower-greek enumeration, 2019.03
3. а, б, в, г, д, е, ё, ж, з, sort'a

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.loalpha (lower-alpha or lower-latin)

1. list item under ol.lroman (lower-roman)

1. list item under ol.greek (lower-greek)

1. list item under ol.greek01

1. list item under ol.decimal

1. list item under ol.leadzero (decimal-leading-zero)

1. list item under ol.georgian

1. list item under ol.cjk[-ideographic]

1. list item under ol.kannada

---

1. I was messing around, trying to see if I could change the ol trailing dot to a colon or ..
2. ... and well, how about a very trailing red
3. not what i wanded, but kida cool. maybe i need :before instead of :after, eh.

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

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

the following is what I plan to use for my 'new' menus (2019.03)
the main difference between ul/li and dl/dt/dd is that there are no prefixed 'bullets' w/ dl (inside or out)
and having dt (title) eliminates/supplants the need to write a :first-child rule set.

      /* ul and dl */ 
      #Nav-Right {
          list-style-type: none;

          width: 86%;
          margin: 4px 3px 2px 13px;
          padding: 2px;

          font-family: 'DejaVu Sans', 'FreeSans', 'Droid Sans', Verdana, Helvetica, Arial, Lucida; color:black;
          font-size: inherit;
          font-weight: 500;
          color: red !important; /* for testing */

          /* moved to li: box-shadow: 1px 1px grey; */
      }

      #Nav-Right li, #Nav-Right dd {
          /* doesn't work here: border-collapse: separate; */
          list-style-type: none;

          margin: 1px -4px 0px -8px;
          box-shadow: 1px 1px grey;
      }

      #Nav-Right li:first-child, #Nav-Right dt {
          list-style-type: none;
          background-color: #e0e0e0;
        
          width: 160px;
          height: 18px;
          margin: -2px -4px 4px -12px;
          padding: 2px;
        
          border: 1px solid #303030;
          border-radius: 1px;
          
          color: black !important;
          text-align: center;
          font-size: 14px;
          font-weight: 600;
      }
      

Example: not in their own div nor a paragraph, just section div

2019.03.28:pm: I've decided to write seperate declarations for and go with dl,dt,dd

<!-- Nav 'Menu' using Un-ordered-List, style-layout.css definitions above -->

• Main Navigation:
• Parent Domain
• Coding Home
• CSS Tips|Examples
• Special Characters
• IP Ports: Names|Numbers

<!-- Same data and style declaration, but using dl, dt (as first-child), dd -->

Navigation Menu:

Parent Domain

Coding Home

CSS Tips|Examples

Special Characters

IP Ports: Names|Numbers

<!-- Nav section using ol/li w/o style (meaning, it's using my style-code.css 'default style'), so no 'first-child' styling the 'heading' 'Main Navigation' -->

• Main Navigation:
• Parent Domain
• Coding Home
• CSS Tips|Examples
• Special Characters
• IP Ports: Names|Numbers

<!-- Nav section using Description List w/o style (using browsers idea of dl style ('default style'), so no 1st-child declared) -->

Navigation Menu:

Parent Domain

Coding Home

CSS Tips|Examples

Special Characters

IP Ports: Names|Numbers

<!-- I couldn't stand the literal 40px browser default left margin on dd, so i added:
dd { margin: 1px auto 1px 10px; } to my stylesheet: style-code.css -->

 

This is a 'collection' of my miscellanious (generic) .selectors

I'll be using <p><span 'class=xxxx'> (span inside a paragraph) to illustrate the selectors / elements 'style' so as not to confuese with p elements (selectors), named the same, but styled differently.
generic '.code' for example, is slightly different than 'p.code', in that 'p.code' is oblique and a lighter shade,
as to stand out from rest of a paragraph slightly, yet not be a 'seperate' element

this is a generic class .snippet01

this is a generic class .snippet02

this is generic class .code

this is generic class .normsuse

this is generic class .smnormsuse

this is generic class .hiliter

this is generic class .hilitergray

this is generic class .hilitergraylt (bg only)

this is a generic class .attn ( it's just the 'red box' )

this is <p class='attn note'> combined (one defines the box, one the text)

this is <p class='attn note hover'> combined (one defines the box, one the text & one 'on hover')

this is generic class .newsDate

this is generic class .newsDate w/ inline style 'text-shadow 1px 1px orange'

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 .note3marob

this is generic class .note4

this is generic class .notefl

this is generic class .notefl  w/ <span style='text-shadow: 1px 1px grey'> .hover </span>

this is generic class .notered

this is generic class .notered1

this is generic class .important

this is generic class .genpurple

this is generic class .genpurpleb

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

(*note,
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. So, just use one name (first/last))

this is generic class .hidden

this is generic class .unhidden *note: hidden' line above, works because, 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 .tagpurple

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;
  	}
  	

This is class 'code' code { font-family: "DejaVu Sans Mono", monospace, Monaco, Consolas, "Andale Mono",; font-size: 95%; line-height: 140%; white-space: pre; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -o-pre-wrap; background: #faf8f0; }

This is class 'code' nested in 'pre'
    code {
    font-family: "DejaVu Sans Mono", monospace, Monaco, Consolas, "Andale Mono",;
    font-size: 95%;
    line-height: 140%;
    white-space: pre;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -o-pre-wrap;
    background: #faf8f0;
    }