Tag Archives: CSS

How to: use the AtF Spark font to create charts with just text

atfspark examples

AtF Spark is “a typeface for creating sparklines in text”. In other words, the fonts will convert numbers into something that looks like a chart. It looks pretty cool, and is a neat way to add a little spark (ahem) to your text.

But while the GitHub repo gives some basic instruction on using the fonts, it also assumes quite a bit of prior knowledge, so here’s a tutorial to explain how to use it if you’re not already familiar with web fonts and other technicalities of web design. Continue reading

Advertisements

How to: learn about CSS by creating a ‘tweetable quote’

This is the fourth in a series of posts introducing HTML. The first part tackled making a ‘Tweet this’ link in a blog post, and the second introduced Twitter’s Web Intents sort-of-API. The third post outlined a little hack for embedding images in those tweets.

If you haven’t read those, you might find it easier to start there.

You can also get all four tutorials in a small ebook.

Sharelines

Stage 4: Styling your ‘Tweet this’ quotes with CSS

At the top of every post in this series has been a ‘Sharelines’ section with quotes in white text against a blue background, each one preceded by a Twitter icon bullet point.

All of those stylistic elements are created with CSS: Cascading Style Sheets. And this post will explain how to learn more about CSS by using them to style your ‘tweet this’ links.

In order to do that I need to explain how CSS works alongside HTML, and why we need both. Continue reading

Customising your blog – some basic principles (Online Journalism Handbook)

customised car

A customised car. Like a customised blog, only bigger. Image by Steve Metz - click to see original

Although I cover blogging in some depth in my online journalism book, I thought I should write a supplementary section on what happens when you decide to start customising your blog.

Specifically, I want to address 3 key languages which you are likely to encounter, what they do, and how they work.

What’s the difference? HTML, CSS, and PHP

Most blog platforms use a combination of HTML, CSS and PHP (or similar scripting language). These perform very different functions, so it saves you a lot of time and effort if you know which one you might need to customise. Here’s what those functions are:

  • HTML is concerned with content.
  • CSS is concerned with style.
  • And PHP is concerned with functionality.

If you want to change how your blog looks, then, you will need to customise the CSS.

If you want to change what it does, you will need to customise the PHP.

And if you want to change how content is organised or classified, then you need to change the HTML.

All 3 are interrelated: PHP will generate much of the HTML, and the CSS will style the HTML. I’ll explain more about this below.

But before I do so, it’ll help if you have 3 windows open on your computer to see how this works on your own blog. They are:

  1. On your blog, right-click and select ‘View source‘ (or a similar option) so you can see the HTML for that page.
  2. Open another window, log in to your blog, and find the customisation option (you may have to Google around to find out where this option is). You should be able to see a page of code.
  3. Open a third window which you will use to search for useful resources to help you as you customise your blog. Continue reading

Image of the day: technical skills required by journalism jobs

Eric Ulken has taken “all the online job descriptions on JournalismJobs.com from this year, omitted the non-technical words (like “editor”, “seeks” and “self-starter”) and built a tagcloud out of the rest”. This is the result:

Jobs tag cloud

Eric Ulken | Technical skills in journalism jobs

Blogged with Flock