HTML and CSS for Librarian Professionals
Materials for the "HTML and CSS for Library Professionals" workshop, held Feb. 8, 2018, at Southeastern NY Library Resources Council. Put together by Robin Camille Davis.
Slide deck (PDF)
A super-basic HTML file containing tags like
An HTML file with an internal CSS stylesheet that contains basic properties like
An HTML file with an internal CSS stylesheet that contains examples of
id. (I added this after the workshop to make the examples clearer.)
For blanket customization that will affect all LibGuides. An HTML file (one page taken directly from John Jay's LibGuides) and an external CSS stylesheet.
Modify only the stylesheet (
custom.css) for this exercise. Stylesheet revised to reflect current LibGuides
A blank HTML file and external CSS stylesheet. They contain a starter template for you to fill with whatever your heart desires.
Just need code to copy & paste into one blog post, LibGuide box, etc.?
Use inline css to change CSS on the fly.
For example, to change the color of a link:
<a href="http://cuny.edu/" style="color:orange; font-size:20px;">Link example</a>
To make an image shrink to 100px wide, align to the left, and have the text flow around it, with some space between the image and text:
<img src="xyz.jpg" alt="XYZ" style="width:100px; height:auto; float:left; margin-right:20px; margin-bottom:20px;">
Be sure to save and fully unzip (extract) all the files from the .zip you downloaded. Otherwise you'll get a lot of funny symbols in the files when you look at them in Notepad.
Are the .html and .css files showing up as a big text blob in Notepad? A quick workaround is to copy & paste all the code from the file into Word, then copy & paste it back into the original file in Notepad.
HTML Cheat Sheet PDF from Skillcrush
CSS Cheat Sheet PDF from The Design Space Co
HTML Color Codes (hex colors)
Thorough HTML documentation from Mozilla
Thorough CSS documentation from Mozilla
See http://robincamille.com/workshops/ for information about this and other workshops I lead.