What is HTML and CSS?
At the heart of all web content is Hyper Text Markup Language, commonly known as HTML. HTML isn't a programming language in the strictest sense, it is a language that describes how to organize a document on the web. Coupled with HTML is technology known as Cascading Style Sheets or CSS. CSS handles the look of documents on the web covering things like typefaces, margins, headers, and colors.
Together, these technologies are used to create the look of courses in Moodle. Moodle does provide a What You See is What You Get (WYSIWYG) editor called ATTO, but the only way to take full control is to learn and understand HTML and CSS.
Common HTML Elements
| Tag | Description |
|---|---|
| <h1> to <h6> | Defines HTML headings. Heading structure must follow h1 to h6 hierarchical order. |
| <div> | Defines a division, section, or container in an HTML document. |
| <p> | Defines a paragraph. Usually the most common tag for adding text. |
| <a href="/ex.com"> | Defines a hyperlink. href - Indicates the link's destination. |
| <ul> and <ol> | 'ul' Defines an unordered list ex: bullet points. 'ol' Defines an ordered list ex: numbered. |
| <li> | Defines an item in a list. |
| <img src="ex.jpg"> | Tag is used to embed an image. src - Specifies the path to the image. Don't need a closing tag. |
| <span> | Inline container used to mark up part of a document or text. |
| <!-- Example --> | Comment in html document. It is not visible on the browser. |
Almost every tag has a start and end. For instance: <p>If writing a paragraph, make sure your text is placed between an opening and closing 'p' tag like so.</p> Failing to close tags may have drastic results in the Moodle course. Elements may disappear, the page may look chaotic, or the page may completely break and show nothing at all.
| Attribute | Description |
|---|---|
| class | Used to specify a class for an HTML element. HTML elements can share same class. ex: class="style1" |
| id | Used to specify a unique id for an HTML element. ex: id="unique1" |
Common CSS Properties
| Property | Value/s Examples* |
|---|---|
| color: | red; #ff0000; rgb(255,0,0); Changes the color of text. |
| background-color: | black; #000000; rgb(0,0,0); Changes the background color of HTML element. |
| font-size: | 16px; 1em; Changes the size of the text. |
| font-family: | 'Roboto', sans-serif; Changes the text font style. |
| font-weight: | 300; 400; 600; 900; Sets how thick or thin characters in text should be displayed. |
| text-align: | left; center; right; Position content within the HTML element. |
| list-style-type: | disc; circle; square; Changes list markers |
*Value examples for the properties above do not include every possible value available.
The method you will use to apply custom CSS styling is called Inline. You accomplish this by using the 'style' attribute inside HTML elements. For example: <h1 style="color: red;">A Red Heading</h1>. You must always include 'style=' followed by quotation marks. Inside the quotation marks, you include the property you want to customize followed by a colon. Then set the value for the property followed by a semi-colon. In the example, property = 'color:' and the value = 'red;'
You can include multiple property stylings within the Inline style="". For example: <h1 style="color: white; background-color: #ff0000; font-family: 'Montserrat', sans-serif;"> Multiple Styles </h1>
HTML/CSS Resources
- W3Schools
- Learn HTML Basics (Video)
Troubleshooting and Review
- Broken or Blank Page - If the page is completely blank after saving edits, immediately hit the back button. This can sometimes get you back to the editing screen to fix or undo the changes that broke the page. Otherwise, you may have to contact moodlesupport@tiffin.edu.
- - When viewing HTML in Moodle you may come across this . This is an HTML entity (in this instance it creates a non-breaking space) and is typically a result of copying and pasting text into the WYSIWYG editor. If you come across this HTML entity please highlight it from the '&' to the ';' and hit the space bar once. You are replacing the entity with an actual space in the HTML.
- Style/Edits Not Appearing - If you add inline styling, save, and none of your edits appear there are three possible explanations and or solutions.
- Clear Cache - While viewing the page hold SHIFT and click the refresh button or hold CTRL + SHIFT and tap the R key. This will hard refresh the page you are on clearing the stored cache. This doesn't work for all browsers. Alternatively, you can clear your entire browser cache to achieve the same results but this will clear the cache and log you out of every website.
- CSS Overriding - The Moodle theme has its own CSS styling rules as well as custom CSS that we have added in addition. Occasionally you will encounter elements that you cannot style because of these CSS rules trumping your changes. Please contact moodlesupport@tiffin.edu if you need your styling to take effect.
- Coding Error - Lastly, double-check your code. Make sure all quotations are closed, all < > angle brackets are closed, properties and values have correct colons and semicolons at the end, etc. It can be very helpful to use a code editor to copy and paste your code into as most will show you the errors.
- NextGen4 Guidebook - This guidebook includes a lot of premade HTML, classes, and information for coding in our Moodle environment. It is highly recommended that you review this guidebook when editing the code for our courses.