Most web developers use CSS to specify how they want each web page element to look on their web site. They can control things like text color, font, margins, and all sorts of other attributes of elements. For example they may want all paragraphs to have a 10 pixel margin. This is done using CSS.
Hyperlinks by default are underlined and blue. While this is a standard and is universally recognized, there are times in which blue underline does not look appropriate in your project. Using CSS you can change this. If you are familiar with CSS you'll know to include a style sheet in your web page or use the <style> element in the header of your page. So how do you do this in your e-learning using Lectora?
Let's take a look.
I've set up a page with a top navigation bar that contains three links to the home page, the help page, and to exit the project. After adding the hyperlinks, I removed the underline and changed the text color to white. Now you are ready to add the CSS to show an underline when the user hovers over the links.
1. Add an External HTML object to the page.
2. Give it an object type of Meta tags. This will place the CSS code in the header of the underlying HTML page.
3. Add the following CSS code in the Custom HTML field:
That's it. Now when you preview the project in HTML, you'll see the underlines appear when you hover over the hyperlinks.