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 you need additional help with a WordPress site, we’re here for you! We’ll make WordPress fixes, provide monthly WordPress maintenance, or redesign your website to be easy to update. To learn more about our web design options, contact us today.
