Want to create interactive content? It’s easy in Genially!

Get started free

HTML/CSS Quick Reference Guide for Non-Designers

Dorrie Scott

Created on February 11, 2024

Start designing with a free template

Discover more than 1500 professional designs like these:

Desktop Workspace

Decades Presentation

Psychology Presentation

Medical Dna Presentation

Geometric Project Presentation

Vaporwave presentation

Dynamic Higher Education Thesis

Explore all templates

Transcript

A Little HTML/CSS Goes a Long Way:

</>

A Quick Reference Guide for Non-Designers

The good stuff...

The basic HTML and CSS to organize and enhance content.

html

The Structure.

What is HTML?

  • HTML is the standard markup language for creating Web pages.
  • It allows the creation and structure of sections, paragraphs, and links using HTML elements (the building blocks of any web page) such as tags and attributes.
  • The "bones" of a website.

HTML ANATOMY

Links

Headings

DIVs

HTML FULL PAGE

css

The Formatting.

What is CSS?

  • CSS is the language used to style a web page.
  • It specifies how the html sections, text, links, and more, are formatted for display.
  • The "skin" of a website.

CSS ANATOMY

Inline

Internal

External

CSS FULL PAGE

bootstrap

Where the Real Magic Happens

What is Bootstrap

  • A frontend development framework for building responsive and mobile-first web pages.
  • A grid structure system for responsive design.
  • An extensive collection of predefined/preformatted bits of html/css code.

BOOTSTRAP Examples

Naviagtion

Accordions/Tabs

Columns

BOOTSTRAP FULL PAGE

But first...

Before diving into html, css, and more, take the time to verify you have access to the necessary areas to deploy your code.

1. source code

Where to access it.

Source Code Access

The first step to enhancing your content is to determine what code areas you have access to, including:

  • The HTML source code/document - where you can add external style links or code in the <head> area
  • Designated area(s) for custom HTML/CSS
  • WYSIWYG Editor - where you can possibly add html and/or css code

2. style test

What to test.

Testing the Code

The second step is to perform a few minor styling tests to make sure you're in the right place and the code you are using is actually having an effect. You'll want to test:

  • HTML
  • Bootstrap
  • Internal CSS
  • Inline CSS
  • External CSS

credits

Presentation Sources.

Resources

Online Resources

A majority of the information (text, code, and images) shown in the presentation was collected from the following websites:

  • https://www.w3schools.com
  • https://developer.mozilla.org
  • Freepik.com

contact me

Drop me a line.

Dorrie Scott

Reference Librarian • Professor • Reader • Coffee Addict • Tech Enthusiast • Competitive Napper

Dorrie.Scott@LoneStar.edu 281.290.3416

Resource Guide

The accompanying guide with resources and additional information can be found at:

...

cflibguides.lonestar.edu/code-toolkit

Got an idea?

Use this space to add awesome interactivity. Include text, images, videos, tables, PDFs... even interactive questions! Premium tip: Get information on how your audience interacts with your creation:

  • Visit the Analytics settings;
  • Activate user tracking;
  • Let the communication flow!
Inline
  • Styling code is placed inside the HTML opening tag.
  • Differnt CSS styling code can be applied to each section, division, paragraph, link, etc.
Custom HTML/CSS

Designated areas for custom HTML/CSS will vary depending on the service used.The example here is from Springshare's LibGuides CMS.

Access to custom HTML/CSS may allow you to add, in part, at least:

  • HTML
  • External CSS
  • Internal CSS

WYSIWYG Editor

The WYSIWYG Editor is available in many platforms, but to use it specifically for html/css, it must include a button or option labeled something like this:

  • </>
  • Source Code
  • </> source code

Access to the WYSIWYG source code may allow you to add:

  • HTML
  • Internal CSS
  • Internal CSS

External CSS
  • External CSS is a separate file/document containing css styling for an entire website or subset of pages.
  • The reference link to the CSS file placed in either the <head>...</head> of the HTML document, and/or in the <body> area above the tags they are meant to style (if allowed in the system used).
  • Different CSS styling code can be applied to different pages, divisions, sections, headings, paragraphs, links, etc.
Accordions/Tabs
  • Bootstrap accordions and tabs allow for large amounts of text to be condensed in a compact manner.
  • Accordions/tabs can be formatted to display in a variety of different ways.
HTML Source Code/Document

The main HTML document should look something like this, including:

  • <DOCTYPE> declaration
  • <title>...<title> tag
  • <head>...</head> tag

Access to the main HTML document allows you to add:

  • HTML
  • External CSS
  • Internal CSS

Columns
  • Bootstrap columns automatically resize based on the screen size detected.
  • There must a Bootstrap style sheet referenced in the document <head>...</head> area.
  • Differnt column numbers allow for equal and unequal widths, as long as the total column numbers equals 12.
  • Columns may be nested inside other columns as well.
Headings
  • Text is usually identified as either headings <h1 to h6> or paragraphs <p>.
  • Different CSS styling code can be applied to headings and paragraphs per section, division, or individual paragraph.
Internal CSS
  • Internal CSS is placed in either the <head>...</head> of the HTML document, and/or in the <body> area above the tags they are meant to style (if allowed in the system used).
  • Different CSS styling code can be applied to different divisions, sections, headings, paragraphs, links, etc.

The style section could be placed here if allowed by the system used.

INTERNAL CSS CODE

<style> .myDiv { border: 5px solid blue; background-color: pink; text-align: center; } </style>

HTML CODE

<h1>The div element</h1> <div class="myDiv"> <h2>This is a heading in a div element</h2> <p>This is some text in a div element.</p> </div> <p>This is some text outside the div element.</p>

What to do...
  1. Copy/Paste this code into the <head>...</head> of your document OR at the top of your source code.
  2. Save.
  1. Copy/Paste this code into the <body>...</body> of your document OR below the style code if placed in a source editor.
  2. Save/Publish your document/ source code.
DIVs
  • DIVs are often part of even larger containers and/or sections
  • DIVs divide your content into smaller, manageble chunks of code
  • Differnt CSS styling code can be applied to each division
Links
  • Links are the hypertext you are familiar with already.
  • Differnt CSS styling code can be applied to the links in each section, division, or individual link.

<h1>The div element</h1> <div class="myDiv"> <h2>This is a heading in a div element</h2> <p>This is some text in a div element.</p> </div> <p>This is some text outside the div element.</p>

HTML TESTING CODE
What to do
  1. Copy/Paste this code into your document/source code.
  2. Save/Publish your document/source code.
  3. View the live version of your page (the one the public would view).
  4. It should look something like the reveal image here.
What to do...

<h1>The div element</h1> <div class="myDiv" style="border: 5px solid red; background-color: yellow; text-align: center;"> <h2>This is a heading in a div element</h2> <p>This is some text in a div element.</p> </div> <p>This is some text outside the div element.</p>

CSS INLINE TESTING CODE
  1. Make sure you have removed all of the code from the previous HTML and Internal CSS tests.
  2. Copy/Paste this code into the <body>...</body> of your document OR at the top of your source code.
  3. Save/Publish your document/source code.
  4. View the live version of your page (the one the public would view). It should look something like the reveal image.

<h1>The div element</h1> <div class="myDiv" style="border: 5px solid red; background-color: yellow; text-align: center;"> <h2>This is a heading in a div element</h2> <p>This is some text in a div element.</p> </div> <p>This is some text outside the div element.</p>

coming soon
Accordions
  • Bootstrap navigation menus provide a much simpler way to display responsive menus.
  • Navigation menus can be formatted to display in a variety of different ways.

<div class="container"> <div class="row"> <div class="col-sm-4"> <h3>Column 1</h3> <p>Consectetur adipisicing elit...</p> <p>Quis nostrud exercitation ullamco laboris...</p> </div> <div class="col-sm-4"> <h3>Column 2</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> </div> <div class="col-sm-4"> <h3>Column 3</h3> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco...</p> </div> </div> </div>

BOOTSTRAP TESTING CODE
What to do...
  1. Make sure you have removed all previous testing code.
  2. Copy/Paste this code into the <body>...</body> of your document OR at the top of your source code.
  3. Save/Publish your document/source code.
  4. View the live version of your page (the one the public would view).
  5. Resize the live version screen to confirm the columns are responsive.

Results 2

Results 1