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]
Recent Comments