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;”>
October 2022 CSS, additions and notes
Above is a H2
Margins: use wspace30
cite, .citation
(Generated by Lorem Ipsum): Suspendisse congue enim sapien, a vulputate orci.
.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
/* Floats */
.floatl
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
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
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
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
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
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 (obsolete), ABBR
hrspace:
hrspace:
hrpost:
hrpost:
Alignment and margins
.acenter
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
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
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
.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 👉 👉
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)
PoL pink, inline: #fe68c3
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:
(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
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
<tagname style=”color:#fe68c3;”> #fe68c3 “pol-pink”
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:
- XHTML 1.1 : Validate me!
- ATRC (Toronto University) Web Accessibility Checker
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
Tables
Tables should really be avoided like the plague, but they do have their uses so I’ve included one for completeness.
Number of years married: | Gift item celebrated with: |
---|---|
1 | Paper |
2 | Cotton |
3 | Leather |
4 | Linen |
5 | Wood |
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
- I am the default link
- I am the default link
- I am class ‘roman’
- I am class ‘roman’
- I am class ‘alpha’
- I am class ‘alpha’
Unordered, nested list
- I am a list item 1.0
- I am a list item 1.1
- I am a list item 1.1a
- I am a list item 1.1a
- I am a list item 1.1a_i
- 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’