Style sheet mods

This is a sample page mostly for my own use and is subject to change without notice.

WordPress on web caches : I make changes and nothing happens

Inline: <tagname style=”property:value;”>

June 2020 CSS additions and notes

Above is a H2

Margins: use wspace30

cite, .citation

Suspendisse congue enim sapien, a vulputate orci. (Generated by Lorem Ipsum)

.codesample

Suspendisse congue enim sapien, a vulputate orci. (Generated by Lorem Ipsum)

.examplecode

Suspendisse congue enim sapien, a vulputate orci. (Generated by Lorem Ipsum)

small, sub and superscript

.bigfont

Suspendisse congue enim sapien, a vulputate orci. (Generated by Lorem Ipsum)

Normal: Suspendisse congue enim sapien, a vulputate orci. (Generated by Lorem Ipsum)

.small

Suspendisse congue enim sapien, a vulputate orci. (Generated by Lorem Ipsum)

Normal: Suspendisse congue enim sapien, a vulputate orci. (Generated by Lorem Ipsum)

.tinyfont

Suspendisse congue enim sapien, a vulputate orci. (Generated by Lorem Ipsum)

Normal: Suspendisse congue enim sapien, a vulputate orci. (Generated by Lorem Ipsum)

.cmessage

Suspendisse congue enim sapien, a vulputate orci. (Generated by Lorem Ipsum)

/* Floats */

.floatl

floatr

.floatclear { clear: both; }

/* BOXES and floated blocks */

.padme

.block-r, .block-l, .block-c

Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Morbi vitae lorem non ligula viverra ullamcorper.
Cras dignissim tincidunt fermentum.
Donec eget mi dolor.
Suspendisse congue enim sapien, a vulputate orci.
(Generated by Lorem Ipsum)

.dotted-box

.boxed

Text element settings

acronym, ABBR

Alignment and margins

.acenter

.aleft, .small

.aright

.indent5

.indent25

.indent50

.indent75

.indent100

img

img.rounded

img.round

/* lists */

Love to dev:
The ::before pseudo element can be used to customize the bullet with an emoticon.

li:before { content: ‘\1F95E’; margin-left: -20px; margin-right: 10px; }

Or you can simply remove the bullet and manually add some, like *, or an emoji like 👉 &#128073;
See W3Schools Emoji Unicode Reference

.nobullet

• 👉 nobullet list item
• Suspendisse congue enim sapien, a vulputate orci. (Generated by Lorem Ipsum)

.nobullet25ds

• 👉 nobullet25ds list item
• Lorem ipsum dolor sit amet, consectetur adipiscing elit.
• Morbi vitae lorem non ligula viverra ullamcorper.
• Cras dignissim tincidunt fermentum.
• Donec eget mi dolor.
• Suspendisse congue enim sapien, a vulputate orci.
• (Generated by Lorem Ipsum)

/* ~~~~~ fonts and emphasis ~~~~~ */

q

Suspendisse congue enim sapien, a vulputate orci. (Generated by Lorem Ipsum)

q.qme

Suspendisse congue enim sapien, a vulputate orci. (Generated by Lorem Ipsum)

.bold

Suspendisse congue enim sapien, a vulputate orci. (Generated by Lorem Ipsum)

.bold2

Suspendisse congue enim sapien, a vulputate orci. (Generated by Lorem Ipsum)

Normal:

Suspendisse congue enim sapien, a vulputate orci. (Generated by Lorem Ipsum)

.uncommon

Suspendisse congue enim sapien, a vulputate orci. (Generated by Lorem Ipsum)

.rare

Suspendisse congue enim sapien, a vulputate orci. (Generated by Lorem Ipsum)

.epic

Suspendisse congue enim sapien, a vulputate orci. (Generated by Lorem Ipsum)

.gold

Suspendisse congue enim sapien, a vulputate orci. (Generated by Lorem Ipsum)

.legendary

Suspendisse congue enim sapien, a vulputate orci. (Generated by Lorem Ipsum)

/* HR */

hr

hr.hrpost

hr.hrspace

Nested in with all the other choice additions to HTML5 and CSS3 are ‘meter‘ and ‘progress‘, entered inline below:

To display a meter gauge:

<meter value=”2″ min=”0″ max=”10″>2 out of 10</meter>
<meter value=”0.6″>60%</meter>

Thus:
2 out of 10
60%

(Note that the bracketed figures for the meter (e.g. 2 out of 10, 60%) are not displayed, only the gauge).

To progress bar, e.g. for downloading:

<progress value=”22″ max=”100″></progress>

citation

codesample

tinyfont

small

cmessage

quote quoth the raven

q.qme sayeth ye raven

This is a blockquote in Latin

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu sapien at purus vestibulum consequat nec in tortor. Proin at orci ipsum. Ut at magna laoreet, dictum elit vitae, mattis ex. Donec et convallis metus. Suspendisse quis lorem aliquam, sagittis leo ac, commodo ipsum. Fusce quis est quis odio tempor blandit. Donec sodales elit justo, ut suscipit dui volutpat at. Sed nec felis eget tortor elementum finibus blandit ut dui.

Cite: Generated 1 paragraph, 70 words, 439 bytes of Lorem Ipsum

abbr for abbreviations – NOT acronym, which is deprecated in html5

acenter

aleft / small

aright / small-r

indent5

indent25

indent50

indent75

indent100

bold

bold2

uncommon

rare

epic

legendary

gold

headline 2 two

headline 3 three

headline 4 four

headline 5 five

headline 6 six

• nobullet 1
• nobullet 2
• nobullet 3
• nobullet 4

• nobullet25ds
• nobullet25ds
• nobullet25ds
• nobullet25ds

• folderlist
• folderlist
• folderlist
• folderlist

hr.hrpost :

This below is from a 2005 test page but most of it still works 🙂

Ackadia v7.1 – XHTML 1.1 template (h1)

h2 – The basic text settings used

h3, that’s me

h4, wouldn’t you guess

Validate me for/with:

I am regular text

I am regular text in a paragraph – in element ‘p’ (indent 15 pixels)

‘P’ of class indent25

‘P’ of class indent50

‘P’ of class indent75

‘P’ of class indent100

I am element ‘strong’

I am element ’em’

I am element ‘acronym’ – (But now obsolete, use ABBR instead)

I am a typical image:

I am a typical link: World of Quotes

I am a quote: I am element ‘q’

I am a quote, by us: I am element ‘q’, of class ‘qme’

I am a citation for the above quote: I am element ‘cite’

I am a large block of text for a cited quotation.

Element ‘blockquote’

Note: block elements like ‘p’ or ‘div’ may still be required.

Blockquotes are for just that and should include a link reference in the element tag (where appropriate) and at the bottom of the quoted entry.

Paul Ackerley

I am a superscript: ^{I am element ‘sup’}

I am a subscript: _{I am element ‘sub’}

I am element ‘dt’, Definition Term

I am element ‘dd’, definition term

The terms must be bound with element ‘dl’ – definition list

Accessibility testing observation

This is a valid ‘anchor’ for XHTML 1.0 traditional:

<a id=”top” name=”top”></a>

The name=”top” is part is acceptable for backwards compatibility. However, it is NOT valid for XHTML 1.1, here you must simply it, thus:

<a id=”top”></a>

Quoting CSE HTML Validator, from the W3C rules:

[79] In XHTML 1.1, the “name” attribute has been removed from the “a” and “map” elements in favor of the “id” attribute.

And…

[80] The following attributes may not be used with the “a” element in an XHTML 1.1 document: “name” and “target”.

Webfire Exact (Bobby) does not appear to be able to distinguish between a valid link (a href=””) and a valid anchor (a id=””). This, I believe, is a flaw in their software so I, for one, am going to ignore it as being erroneous.

Quote from the test:   13.1 Create link phrases that make sense when read out of context.

This points you to WAI checkpoint 13.1, which reads:

Create link phrases that make sense when read out of context
Authors should not use phrases like “click here” as link text; this requires a user browsing the page with a screen reader to step through each link and read the surrounding text to determine the purpose of the link. Instead, link text should carry sufficient information, as in “download this document in ASCII text,” “view the full version in HTML,” or “for the text version select this link.”

Rationale
Visually impaired users often jump from link to link when skimming a page or looking for information. When they do this, only the text of the link (“link text”) is read, not the surrounding text. Therefore, it is important that link text make sense when not contextualized by the text around it.

– W3C WAI

Customs classes

I am class ‘.small’
‘.small-r’ and ‘.small-c’ offer right and center alignment to text.

Class ‘.acenter’ is the real centering call

I am class ‘.bold’ used when we want more that just ‘strong’

I am class ‘.aeg’ used when we want a certain type of highlighting

I am class ‘.ftt’ used instead of the old ‘tt’ element.
I am used to shown code examples mostly

I am class ‘.falselink’ I am really annoying and am here to prove a point

I am class ‘cmessage’, used in the footer

Tables

Tables should really be avoided like the plague, but they do have their uses so I’ve included one for completeness.

Notes on tables:

• If this table is used for layout only, do not use structural markup to achieve formatting effects.
• If this is a data table (not used for layout only), provide a caption.
  ( The ‘caption’ element goes in right after the <table> )
• Remember to use thead and tbody elements as appropriate
• W3.org on accessible tables

Forms

(removed)

Lists

Unordered list

• I am a default link
• I am a default link

• class=”square”
• class=”square”

• class=”circle”
• class=”circle”

• class=”adlist”
• class=”adlist”

• I am a called image bullet, class=”dirlist”
• I am a called image bullet, class=”dirlist”

Ordered lists

1. I am the default link
2. I am the default link

1. I am class ‘roman’
2. I am class ‘roman’

1. I am class ‘alpha’
2. I am class ‘alpha’

Unordered, nested list

1. I am a list item 1.0
2. I am a list item 1.1
   1. I am a list item 1.1a
   2. I am a list item 1.1a
      1. I am a list item 1.1a_i
      2. I am a list item 1.1a_ii

RULES TO OBEY

Moving up to xhtml, there’s a number of rules to obey, if you want valid code.

These include…

Breaks – <br /> – must be within block elements such as paragraphs and divisions

DON’T CHOOSE ME!

Moving up to xhtml, there’s a number of obsolete elements to avoid if you want valid code.

These include…

‘Strike’ – use { text-decoration: line-through; } in CSS instead.

‘Pre’ – avoid it like the plague, for accessibility reasons

Observations

Moving up to xhtml, there’s a number of rules to obey, elements to avoid if you want valid code.

They are all valid HTML 4.01 and XHTML elements, but, for your awareness, the older (long obsolete) may now support them. These include…

Span, label, acronym, q, legend, fieldset and table

Links of the month

I am called or requested content, here I a ‘page up’, within a ‘div’ of class ‘left’