The enhancements described in this guide involve adding CSS and JavaScript code to your LibGuides environment to enable them, and adding tags and attributes to HTML source code on guide pages to use them.
Important key concepts necessary to understand how to do this are presented below.
A good place to learn about HTML, CSS, and JS is https://www.w3schools.com.
"Class" and "ID" are names that you make up, in order to link scripts or CSS commands to something on a web page you want to control. The name could be almost anything, but it has to be at least two characters long and it can't start with a digit or a hyphen followed by a digit.
A class name can be used multiple times on a page. An ID name can only be used once in an html document. An ID can be used to target the output of a script, or define the destination for a link to a particular spot on a web page.
Example: For the yellow highlighter effect, I chose "yellowhighlighter" as the class name. The stylesheet code that creates that effect is defined with that name. Anywhere in a LibGuide where I want to use the highlighter effect, I'll go into the source code and tag the text with class="yellowhighlighter".
Divisions and spans are containers for things on a web page. You can create them to define something that you want to apply styling or a script to.
Divisions are two-dimensional containers, with height and width. If you want to put something in a box or control a block of text, you can create a division by placing <div> and </div> tags around the content in the HTML source code. A division is known as a block element.
Spans are containers for strings of text characters or graphic images. You can define a span by placing <span> and </span> tags before and after the string. You would create a span to do something like apply the yellow highlighter effect. A span is known as an inline element.
CSS code in a stylesheet (either a separate document or a section near the top of the HTML document) consists of a selector (i.e, the class name or ID name or an HTML element you want to style), followed by one or more sets of properties and values, written inside curly braces. In this example, a class named "greentext" is defined, with green-colored text and a text size of 18 pixels:
The class name (as in this example) is preceded by a period. An ID name would be preceded by a number sign (#). Each property and value is separated by a colon, and each property-value set is separated by a semicolon.
The code can be broken into separate lines to make it easier to read through, as in this example.
CSS properties can be applied directly to specific HTML tags, by adding a style attribute to the tag. In HTML, it would look like this:
This could be done in addition to properties applied using a class or ID. You would just include both the class/ID attribute and the style attribute.
