Style sheet

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

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)

floatr

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)

.floatclear { clear: both; }


/* BOXES and floated blocks */

.padme

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)

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

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)



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

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)

.boxed

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)

Text element settings

acronym, ABBR


Alignment and margins

.acenter

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)

.aleft, .small

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)

.aright

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)

.indent5

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

.indent25

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

.indent50

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

.indent75

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

.indent100

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

.space35

img

image

img.rounded

image rounded 12 percent

img.round

image rounded 50 percent

/* 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




… menu :

[ Intro ] [ # ] [ # ] [ # ] [ # ]


Smiley Big grin!

Smiley has a sad frown!

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
floatr 09876543210987654321
floatl 12345678901234567890
block-l
block-r
dotted-box
.boxed
examplecode
  • 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: Smiley Smile!

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.

Wedding Anniversary gifts
Number of years married: Gift item celebrated with:
1Paper
2Cotton
3Leather
4Linen
5Wood

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’


Ack

Been playing with computers since the stone age, online since the '80s, and developing websites since the '90s.

Leave a Reply

%d bloggers like this: