Materials for the "HTML and CSS for Library Professionals" workshop, Feb. 2018
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
1_basic-html
2_basic-css
3_classes-and-ids
4_libguide
5_blank
README.md

README.md

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.

Exercise files

Click here to download all files (.zip)

Slide deck (PDF)

1_basic-html/

A super-basic HTML file containing tags like <a>, <p>, <img>, and <ul>.

2_basic-css/

An HTML file with an internal CSS stylesheet that contains basic properties like font-size, background-color, and margin.

3_classes-and-ids/

An HTML file with an internal CSS stylesheet that contains examples of class and id. (I added this after the workshop to make the examples clearer.)

4_libguide/

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 classes and ids.

5_blank/

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;">

Troubleshooting

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.

More resources

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.