Introduction to Computers Using Ubuntu 20.04

Introduction to Computers - Using Ubuntu 20.04 Style Guide

This is a descriptive stylesheet to help guide page development, showing what current "introstyle.css" effects look like ().

Heading Styles

<h1> through <h4> are all Sans-serif text - see the page heading which is <h2> above and the section heading immediately above (<h3>).
The specific sans-serif font is set by browser, and may also depend on system settings).

Paragraph Styles

This is basic <p> paragraph text, also sans-serif.

Code samples are styled in white monospace text with a black background.

.pre {
  background-color:#000;
  font-family: "Liberation Mono", "Lucida Console", Monaco, monospace;
  font-size: 1.2em;
}
pre { background-color:#000;
  font-family: "Liberation Mono", "Lucida Console", Monaco, monospace;
  font-size: 1.2em;
  padding: 1.5em;
}

There are several boxed paragraph styles:

<p class="box">
with the first line made bold

<p class="boxleft">
which is kind of like the right float note, but reversed, and note that the first line is NOT made bold.

<p class="caution">
comes with a left indent and a pale yellow background. First line is bold and 110%.

<p class="warn">
is completely bold with an eye-grabbing red background and white text.

class="note"
Text is displayed float right in a box.
float:right;
border: solid black 2px;
padding: 5px;
width: 25%;
margin-left: 10px;

Note Style

Notes are displayed as indicated in the box to the right of this paragraph.
Notes are designed to explain an image or block of text without needing to use tables...though there are some tables used in a few pages of the guide.
The first line is automatically made bold by a sub-class note:first-line
Applies to any block level text like divs. To ensure paragraphs work alike, there is a subclass for <p>.

Glossary Styles

Linking from a term on any guide page, if a term is in the Glossary <span class="glossary">TERM</span> it shows as bold and blue and the term should be done with a href link.

Example:

social network

The Internet was designed to be a way to share and to communicate. Social networking is one aspect of that, but didn't happen right at the start. At the dawn of the World Wide Web, a person needed to be a techie. Today, services like Twitter, Facebook, Google+, among others, provide a very easy way to share ones thoughts to a potentially huge audience. Social networking takes less effort than blogging, for example. Twitter is particularly notable for limiting each post to a maximum of 140 characters. Being consise has value in a "tweet."

Image Styles

A "normal" image is flush left.

<img class="ctr"> puts the image centered on the page left-to-right, and it typically used for main page header images.

<p align="center"><a class="nav2" href="toc.html">Table of Contents</a><p>
The links for the top and bottom navigation controls use this format.
The link coding changes colors on hover and "visited".
This style also used in TOC and Appendix Page links.

Table of Contents