{"id":66433,"date":"2022-08-13T09:30:01","date_gmt":"2022-08-13T09:30:01","guid":{"rendered":"https:\/\/www.cryptocabaret.com\/?p=66433"},"modified":"2022-08-13T09:30:01","modified_gmt":"2022-08-13T09:30:01","slug":"level-up-your-html-document-with-css","status":"publish","type":"post","link":"https:\/\/www.cryptocabaret.com\/?p=66433","title":{"rendered":"Level up your HTML document with CSS"},"content":{"rendered":"

Level up your HTML document with CSS<\/span>
\nJim Hall<\/a><\/span>
\nSat, 08\/13\/2022 – 03:00<\/span><\/p>\n

\n
Register<\/a> or Login<\/a> to like<\/div>\n
Register<\/a> or Login<\/a> to like<\/div>\n<\/div>\n
\n

When you write documentation, whether that’s for an open source project or a technical writing project, you should have two goals: The document should be written well, and the document should be easy to read. The first is addressed by clear writing skills and technical editing. The second can be addressed with a few simple changes to an HTML document.<\/p>\n

HyperText Markup Language, or HTML, is the backbone of the internet. Since the dawn of the “World Wide Web” in 1994, every web browser uses HTML to display documents and websites. And for almost as long, HTML has supported the stylesheet<\/em>, a special addition to an HTML document that defines how the text should appear on the screen.<\/p>\n

You can write project documentation in plain HTML, and that gets the job done. However, plain HTML styling may feel a little spartan. Instead, try adding a few simple styles to an HTML document to add a little pizzazz to documentation, and make your documents clearer and easier to read.<\/p>\n

Defining an HTML document<\/h2>\n

Let’s start with a plain HTML document and explore how to add styles to it. An empty HTML document contains the definition at the top, followed by an <\/c> block to define the document itself. Within the element, you also need to include a document header that contains metadata about the document, such as its title. The contents of the document body go inside a <\/c> block within the parent <\/c> block.<\/c><\/c><\/p>\n

You can define a blank page with this HTML code:<\/p>\n

\n

html<\/span>><\/span>
\n\u00a0 head<\/span>><\/span>
\n\u00a0 \u00a0 title<\/span>><\/span>This is a new document\/<\/span>title<\/span><\/a>><\/span>
\n\u00a0 \/<\/span>head<\/span><\/a>>
\n\u00a0 body<\/span>><\/span>

\n\u00a0 \/<\/span>body<\/span><\/a>>
\/<\/span>html<\/span><\/a>><\/div><\/div><\/pre>\n
In another article about Writing project documentation in HTML<\/a>, I updated a Readme file from an open source board game from plain text to an HTML document, using a few basic HTML tags like <\/p>\n
<\/h1>\n
<\/c> and <\/p>\n
<\/h2>\n
<\/c> for heading and subheadings, <\/p>\n
<\/c> for paragraphs, and <\/b><\/c> and <\/i><\/c> for bold and italic text. Let’s pick up where we left off with that article:<\/p>\n
\n

html<\/span>><\/span>
\n\u00a0 head<\/span>><\/span>
\n\u00a0 \u00a0 title<\/span>><\/span>Simple Senet\/<\/span>title<\/span><\/a>><\/span>
\n\u00a0 \/<\/span>head<\/span><\/a>>
\n\u00a0 body<\/span>><\/span>
\n\u00a0 \u00a0 h1<\/span>><\/span>Simple Senet\/<\/span>h1<\/span><\/a>>
\n\u00a0 \u00a0 h2<\/span>><\/span>How to Play\/<\/span>h2<\/span><\/a>>
\n\u00a0 \u00a0 
\n\u00a0 \u00a0 p<\/span>><\/span>The game will automatically \"throw\" the throwing sticks
\n\u00a0 \u00a0 for you, and display the results in the lower-right corner
\n\u00a0 \u00a0 of the screen.\/<\/span>p<\/span><\/a>>
\n\u00a0 \u00a0 
\n\u00a0 \u00a0 p<\/span>><\/span>If the \"throw\" is zero, then you lose your turn.\/<\/span>p<\/span><\/a>>
\n\u00a0 \u00a0 
\n\u00a0 \u00a0 p<\/span>><\/span>When it's your turn, the game will automatically select
\n\u00a0 \u00a0 your first piece on the board. You may or may not be
\n\u00a0 \u00a0 able to make a move with this piece, so select your piece
\n\u00a0 \u00a0 to move, and hit i<\/span>><\/span>Space\/<\/span>i<\/span><\/a>> (or i<\/span>><\/span>Enter\/<\/span>i<\/span><\/a>>) to move
\n\u00a0 \u00a0 it. You can select using several different methods:\/<\/span>p<\/span><\/a>>
\n\u00a0 \u00a0 
\n\u00a0 \u00a0 ul<\/span>><\/span>
\n\u00a0 \u00a0 \u00a0 li<\/span>>i<\/span>><\/span>Up\/<\/span>i<\/span><\/a>>\/i<\/span>><\/span>down\/<\/span>i<\/span><\/a>>\/i<\/span>><\/span>left\/<\/span>i<\/span><\/a>>\/i<\/span>><\/span>right\/<\/span>i<\/span><\/a>> to
\n\u00a0 \u00a0 \u00a0 navigate to a specific square.\/<\/span>li<\/span><\/a>>
\n\u00a0 \u00a0 
\n\u00a0 \u00a0 \u00a0 li<\/span>><\/span>Plus (b<\/span>><\/span>+\/<\/span>b<\/span><\/a>>) or minus (b<\/span>><\/span>-\/<\/span>b<\/span><\/a>>) to navigate \"left\"
\n\u00a0 \u00a0 \u00a0 and \"right\" on the board. Note that this will automatically
\n\u00a0 \u00a0 \u00a0 follow the \"backwards S\" shape of the board.\/<\/span>li<\/span><\/a>>
\n\u00a0 \u00a0 
\n\u00a0 \u00a0 \u00a0 li<\/span>>em<\/span>><\/span>Tab\/<\/span>em<\/span><\/a>> to select your next piece on the
\n\u00a0 \u00a0 \u00a0 board.\/<\/span>li<\/span><\/a>>
\n\u00a0 \u00a0 \/<\/span>ul<\/span><\/a>>
\n\u00a0 \u00a0 
\n\u00a0 \u00a0 p<\/span>><\/span>To quit the game at any time, press b<\/span>><\/span>Q\/<\/span>b<\/span><\/a>> (uppercase
\n\u00a0 \u00a0 Q) or hit i<\/span>><\/span>Esc\/<\/span>i<\/span><\/a>>, and the game will prompt if you want
\n\u00a0 \u00a0 to forfeit the game.\/<\/span>p<\/span><\/a>>
\n\u00a0 \u00a0 
\n\u00a0 \u00a0 p<\/span>><\/span>You win if you move all of your pieces off the board
\n\u00a0 \u00a0 before your opponent. It takes a combination of luck and
\n\u00a0 \u00a0 strategy!\/<\/span>p<\/span><\/a>>
\n\u00a0 \/<\/span>body<\/span><\/a>>
\/<\/span>html<\/span><\/a>><\/div><\/div><\/pre>\n
This HTML document demonstrates a few common block and inline elements used by technical writers who write with HTML. Block elements define a rectangle around text. Paragraphs and headings are examples of block elements, because they extend from the left to the right edges of the document. For example, <\/p>\n
<\/c> encloses an invisible rectangle around a paragraph. In contrast, inline elements follow the text where they are used. If you use <\/b><\/c> on some text within a paragraph, only the text surrounded by <\/b><\/c> and <\/c> becomes bold.<\/p>\n
You can apply direct styling to this document to change the font, colors, and other text styles, but a more efficient way to modify the document’s appearance is to apply a stylesheet<\/em> to the document itself. You can do that in the <\/c> element, with other metadata. You can reference a file for the style sheet, but for this example, use a <\/c> block to define a style sheet within the document. Here’s the <\/c> with an empty stylesheet:<\/p>\n
\n

html<\/span>><\/span>
\n\u00a0 head<\/span>><\/span>
\n\u00a0 \u00a0 title<\/span>><\/span>Simple Senet\/<\/span>title<\/span><\/a>><\/span>
\n\u00a0 \u00a0 style<\/span>><\/span>

\n\u00a0 \u00a0 \/<\/span>style<\/span><\/a>>
\n\u00a0 \/<\/span>head<\/span><\/a>>
\n\u00a0 body<\/span>><\/span>
\n\u00a0 \u00a0 ...
\n\u00a0 \/<\/span>body<\/span><\/a>>
\/<\/span>html<\/span><\/a>><\/div><\/div><\/pre>\n
Defining styles<\/h2>\n
Since you’re just starting to learn about stylesheets, let’s demonstrate a basic style: background color. I like to start with the background color because it helps to demonstrate block and inline elements. Let’s apply a somewhat gaudy stylesheet that sets a light blue<\/em> background color for all <\/p>\n
<\/c> paragraphs, and a light green<\/em> background for the <\/p>\n