• Becoming an eLearning Hacker
  • Glossary
  • Regular Expressions (Regex)
  • Projects
  • Challenges
  • Essential Tools
  • HTML
  • CSS
  • JavaScript
  • Web Scraping
  • Learning Analytics
  • Images
  • Download
  • Translations
  • Helpful HTML Snippets

    HTMLWeb DevelopmentCSS

    This page provides some helpful snippets to get you started making common content items. In each example, I provide a Style Method and CSS Method. If possible, the CSS Method is preferred so that you only need to declare the formatting once, but if you are using a web authoring system that does not allow you to edit the CSS, you can revert to the Style Method.

    To use the CSS Method, place the first block of markup in the style heading of the document or in your attached CSS file.

    Callout Box

    Heading

    Content

    Content

    Adaptive Columns

    Instead of using tables to create columns or to organize content horizontally, you can use a combination of <div> elements with CSS listeners to have columns that adapt to your screen size:

    This content is provided to you freely by EdTech Books.

    Access it online or download it at https://edtechbooks.org/elearning_hacker/helpful_html_snippets.