Style Guide
This is a collection of basic styles for this tiny website that I built. Update in progress.
Based on and inspired from Poor Man’s Styleguide created by Bryan. I modified and updated the HTML to be more to my taste and removed some part of the code.
Last Updated:
Sun, 18 Sept 2022
Headings
Heading <h1>
Heading <h2>
Heading <h3>
Heading <h4>
Heading <h5>
Heading <h6>
Headings with Text
Heading <h1>
Life is fleeting. Life is short, too short. So you gotta use every moment. You have to do something that makes you feel alive, and that shit, that would spread that message far and wide.
Heading <h2>
Life is fleeting. Life is short, too short. So you gotta use every moment. You have to do something that makes you feel alive, and that shit, that would spread that message far and wide.
Heading <h3>
Life is fleeting. Life is short, too short. So you gotta use every moment. You have to do something that makes you feel alive, and that shit, that would spread that message far and wide.
Heading <h4>
Life is fleeting. Life is short, too short. So you gotta use every moment. You have to do something that makes you feel alive, and that shit, that would spread that message far and wide.
Heading <h5>
Life is fleeting. Life is short, too short. So you gotta use every moment. You have to do something that makes you feel alive, and that shit, that would spread that message far and wide.
Heading <h6>
Life is fleeting. Life is short, too short. So you gotta use every moment. You have to do something that makes you feel alive, and that shit, that would spread that message far and wide.
Block Elements
Paragraphs and Image
Life is fleeting. Life is short, too short. So you gotta use every moment. You have to do something that makes you feel alive, and that shit, that would spread that message far and wide.
Life is fleeting. Life is short, too short. So you gotta use every moment. You have to do something that makes you feel alive, and that shit, that would spread that message far and wide.
Figure with Figcaption
Life is fleeting. Life is short, too short. So you gotta use every moment. You have to do something that makes you feel alive, and that shit, that would spread that message far and wide.
Blockquote with Figcaption
Life is fleeting. Life is short, too short. So you gotta use every moment. You have to do something that makes you feel alive, and that shit, that would spread that message far and wide.
Details and Summary
The summary element example
The details example text. It may be styled differently based on what browser or operating system you are using.
Text Element
The <a> element. You can use the <a> element to create hyperlinks. A hyperlinksopen in new window open links in new window.
The <abbr> element represents an abbreviation or acronym. An abbr element with title examples.
The <b> element. You can use the <b> tag to draw the reader’s attention to the element’s contents.
The <cite> element is used to describe a reference to a cited creative work. A book A type primer by John Kane.
The <code> element. You can use the <code> tag to display code like <html>.
The <del> element. This line of text is meant to be treated as deleted text.
The <dfn> element is used to indicate the term being defined within the context of a definition phrase or sentence. Example: A validator is a program that checks for syntax errors in code or documents.
The <em> element marks text that has stress emphasis. This line rendered as italicized text.
The <em> element style differently in CJK type with lang="zh-HK" or lang="ja" attribute. Example: 原來我非不快樂，只我一人未發覺
The <i> idiomatic text element.
The <ins> element represents a range of text that has been added to a document. This line of text is meant to be treated as an addition to the document.
The <kbd> element represents a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device. Please press Command + R to re-render this page.
The <mark> represents text which is marked or highlighted for reference or notation purposes. You can use the mark tag to highlight text.
The <q> element indicates that the enclosed text is a short inline quotation. This line rendered as inline quotation.
The <q> element within a <q> element: Here’s an example:
This line rendered inside a
using single quotes.<q> element.
The <ruby> element (<rp>, <rt>) represents small annotations that are rendered above, below, or next to base text, usually used for showing the pronunciation of East Asian characters. Example: Jolyne Cujoh 空条徐倫.
The element renders text with a strikethrough, or a line through it. This line of text is meant to be treated as no longer accurate.
The <samp> element is used to enclose inline text which represents sample (or quoted) output from a computer program. This line of text is meant to be rendered using the browser’s default monospaced font.
The <small> element represents side-comments and small print, like copyright and legal text, independent of its styled presentation. This line of text is meant to be treated as fine print.
The <strong> element indicates that its contents have strong importance, seriousness, or urgency. This line rendered as bold text.
The <sub> element specifies inline text which should be displayed as subscript for solely typographical reasons. C8H10N4O2
The <sup> element specifies inline text which is to be displayed as superscript for solely typographical reasons. a2 + b2 = c2
The <time> element represents a specific period in time.
The <u> element represents a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation. This line of text will render as underlined.
List Types
Ordered List
- List Item 1
- List Item 2
- List Item 3
- List Item 3.1
- List Item 3.2
- List Item 3.2.1
- List Item 3.2.2
- List Item 3.3
- List Item 4
Unordered List
- List Item 1
- List Item 2
- List Item 3
- List Item 3.1
- List Item 3.2
- List Item 3.2.1
- List Item 3.2.2
- List Item 3.3
- List Item 4
Preformatted
/* code snippet sample */
:root {
--font-size: 1rem;
--font-weight: 400;
--line-height: 1.563;
}