Have you ever published something to your blog or somewhere else online, and then been disappointed with how your text and images are displayed on the page?
Have you ever wondered how to make the magic of linking to another place on the same page, or embedding a link right into your text?
On Saturday, October 26, 2013, I volunteered at a very special training event. Ladies Learning Code is a Toronto-based not-for-profit organization committed to teaching beginner computer programming skills to women. The classes are designed to be social, collaborative and inclusive (yes, men are welcome as well). They also have special Girls Learning Code classes.
For their first ever event in Barrie, Ontario, Canada, they brought their flagship training, Intro to HTML & CSS. In the course description, they explain that “HTML and CSS are the backbone of all websites, and knowledge of them is a necessity if you are interested in things like web development, creating marketing emails, or even blogging!”
I started learning HTML way back when I first got online in the late 90s. Though some (maybe much) of what I learned is now out of date, I still rely on the basics every day when I’m posting content online.
As instructor Tessa Thornton explained, HTML tells the web browser how your content should be displayed, such as whether it should be regular paragraph text or a heading, whether it should be broken down into a list using numbers or bullet points, or whether the text should link to another location.
CSS, on the other hand, controls the style of your content, such as font, colour, spacing, and many other variables. I’m still quite a beginner myself when it comes to CSS, and though I was at the workshop to be a mentor to the students, I was definitely learning with them and in awe of the amazing things they accomplished with their test sites.
It can be intimidating to look at the “source code” of your work at first, but gaining some comfort with HTML and CSS will help you to troubleshoot when something doesn’t look right on your blog, newsletter or another web-based platform.
For example, what we discovered at the workshop was that most of the time something didn’t work, there was a bracket missing. Both HTML and CSS codes begin and end with a set of brackets. In HTML, they’ll look like this:
<h2>Your title</h2>
Anything between those two h2 tags will have the attributes of “Heading 2.”
In CSS, you set those “Heading 2” attributes, such as the colour, weight and size, which would look like this:
h2 {
background-color: green;
font-weight: bold;
font-size: 28px;
}
(Tessa pointed out that CSS uses the American spelling of colour, which was important for us Canadians to remember!)
Missing any of the <angle brackets> or {curly brackets} or putting them in the wrong place means your web browser won’t get the right message.
If you’d like to take more control of how your content looks and behaves when you post it online, consider learning the basics of HTML and CSS. Ladies Learning Code has events in 12 Canadian cities so far, as well as an online version on Udemy.com.
P.S. Thanks to Christine Whone of Actually who brought Ladies Learning Code to Barrie and gave me the the opportunity to participate as a mentor.
