HTML, CSS Coding for Nonprofits

Alyssa Hansen December 15, 2014, by Alyssa Hansen

Resumés these days include more than just the traditional arsenal of software skills, such as Microsoft Word and Excel. Nonprofits are seeking candidates for communications positions with technical knowledge that will help them maintain their online websites, social media sites, and email marketing campaigns. If your organization has a dedicated communications team, you should be looking to acquire individuals with experience in different coding languages, like html or CSS.

Most websites built on open-source content management systems (and even custom-designed html sites) can be better managed by staff that know how to make basic edits in html and CSS. This saves you from having to contact your site developer every time you want to create a banner or "Latest Events" on your site.

HTML Tags

Here a few instances when html coding can come in handy:

  • Embedding Youtube videos in page content
  • Formatting text with options not available in your CMS text-editor
  • Editing a newsletter template with a CRM tool
  • Adding a table of information to page content
  • Updating the link in linked text or photos
  • Adding linked text that will open the link in a new window

Some commonly-used html tags:

  • <B>text to bold</B>
  • <U>text to underline</U>
  • <I>text to italicize</I>
  • <P ALIGN=Left>text to align left
  • <P ALIGN=Right>text to align right
  • <P ALIGN=Center>text to center-align

To create numbered lists:

  • <OL>
  • <LI>first row of numbered text
  • <LI>second row of numbered text
  • </OL>

To create bullet lists:

  • <UL>
  • <LI>first row of bulleted text
  • <LI>second row of bulleted text
  • </UL>

To start a new paragraph in text:

  • <P>

To add a block-quote of text:

  • Intro text <BR>
  • <BLOCKQUOTE>first row of indented quote text<BR>
  • Second row of indented quote text.
  • </BLOCKQUOTE>

To link text to an external site:

  • <A HREF="link url">linked text</A>

To link text to open email software to send a mail:

  •  <A
  • HREF="mailto:name@email.com"
  • <Email Name here</A>

To change font size:

  • <p style="font-size:12px;">Text here.</p>

To change font style:

  • <p style=font-family:Times">Example Times font style text,</p>

To learn more html tags, access a comprehensive guide to a full list here.

CSS Stylesheet Edits

CSS coding affects something called the "stylesheet" of your website (i.e.  how we see text fonts, colors, page backgrounds, margins, spacing, and more).

While most websites come with a predefined CSS stylesheet, in the case that your organization undergoes a re-branding someday and you need to make updates to reflect new colors and fonts, a team member with CSS experience can help you make this transition internally without paying an outside IT professional.

To access the stylesheet files in the following open-source CMS (WordPress, Joomla, and Drupal) follow these steps below:

  • WordPress: (You will need to download Filezilla to edit the permissions for the CSS files first, finding the theme stored in files on server, then input "777" to change permissions--> watch a video here). Login to WordPress Admin, Appearance, Manage Themes, Select Theme, Editor, make edits in editor, click Save (Always make a copy of theme before editing).
  • Joomla: Login, Extensions, Template Manager, select Template, click on Details and Files, click on Stylesheets, select desired CSS file, make edits in editor, click Save.
  • Drupal: Login, Configuration, User Interface, CSS Editor, select Theme, save Configuration, Appearance, select Theme, click on Settings, Custom CSS, type "user" in "Preview Path", make edits in editor, save Configuration, click "X" to exit editor.

For staff, volunteers, or interns who'd like to teach themselves how to make edits in CSS, have them view this beginner tutorial here.

If interested in creating a website for your organization that's easy to update, or learning more about how Elevation's custom designed templates can be edited by your staff, contact us today!

Alyssa Hansen

Alyssa Hansen

Alyssa Hansen is a Senior Account Manager at Elevation, a full-service nonprofit web design agency. With a background working in nonprofit communications, Alyssa's experience helps clients develop a new vision for their website. When she's not at her desk, she's passionate about microfinance, traveling, and learning new languages.

How to Increase your Online Donation Guide

Graphic Download Now

Stay Updated