An understanding of the principal technologies of web is a really powerful tool for a journalist. This guide will cover the basic tools and principles of HTML and CSS.

HTML and CSS can be used to create web content for browsers, tablets and mobiles and many mobile/tablet apps have HTML and CSS at their core.

External resources

Here are some essential external resources:

Tools

HTML and CSS is just plain text, so any plain text editor will work. We’ll use Codepen as it’s easy to access and use.

Basic content tags

The essential content tags you should know are:

  • headings <h1>-<h6>
  • paragraphs <p>
  • links <a href=”…”>
  • images <img src=”…”>
  • lists <ul> <li>

These are used to mark-up your content so that it makes sense and can be rendered properly by the browser.

Additional tags

There are also some additional HTML tags that might be useful:

  • blockquote – used to mark-up a quote e.g to make a pull-quote
  • figure & figcaption – to give a caption to images

Here’s the example above in Codepen:

[codepen_embed height=”511″ theme_id=”10068″ slug_hash=”XJWOow” default_tab=”HTML” user=”hadders”]See the Pen <a href=’http://codepen.io/hadders/pen/XJWOow/’>Figure/figcaption and blockquote</a> by Hadrian Cawthorne (<a href=’http://codepen.io/hadders’>@hadders</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Basic CSS

CSS (Cascading Style Sheets) allows you to style the HTML tags and content you’ve  written. You can change the appearance of your content in almost any way e.g. change  the colours, fonts, background, borders, spacing and position.

CSS styling relies on:

  • selecting the HTML tag to style
  • choosing a property to style
  • setting the value of the property

As a staring point we should style the body HTML tag. This represents the whole page and it’s contents and we can set the base font and font-size as well as background colour/image.

Being specific with CSS

Basic selectors are general e.g:

h2 { color: red; }

This will make all the h2 elements red.  But what if you had many h2 tags and wanted them to look different?

Assigning class names to elements helps to differentiate tags and allow them to be styled differently.

<h2 class="myClassName">Bleh..</h2>
// and some CSS //
.myClassName { color: red; }

This particular h2 is given a class name of “myClassName” (this is made up, you can call them anything) and is selected in CSS using:

  • .className

This class can be applied to any number of elements to make them red e.g.

<p class="myClassName">

This paragraph will be red!

[codepen_embed height=”266″ theme_id=”10068″ slug_hash=”MYYpay” default_tab=”result” user=”hadders”]See the Pen <a href=’http://codepen.io/hadders/pen/MYYpay/’>Apply some basic CSS</a> by Hadrian Cawthorne (<a href=’http://codepen.io/hadders’>@hadders</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]