The Beginner’s Guide to

HTML & CSS for Marketers

1
Table of Contents
Introduction 3

What are Coding Languages? 4

What is HTML? 5

What is CSS? 6

HTML vs. CSS 7

HTML Codes to Know 9

How to Update Your CSS 12

HTML & CSS: What to Avoid 14

Resources and Additional Learning: Courses, Lessons, & Books to Explore 15

2
Introduction

Have you ever right clicked on a web page and clicked “view page source” or looked
at the source code for an email? Or are you a former MySpace user who learned how
to update the code to add a snazzy background or song to your MySpace page? That’s
HTML. CSS is a complementary coding language that applies a style sheet to a given
page of HTML code, changing the look and feel of the page to match your brand.

HTML and CSS are some of the most popular

languages used by developers, marketers,
and designers. While they may sound HTML header tags in blog posts improves your SEO?
highly technical and seem like they require By learning a few simple HTML codes and understanding
extensive training, there are many ways how HTML and CSS work together, you’ll have the ability
to use basic HTML and CSS in everyday to improve your marketing strategy and troubleshoot
marketing. You may have already used HTML issues that would typically cost you a lot of time and
without even knowing it when you formatted money if you don’t have an in-house developer.
a link, updated a page header, or edited a
page of your website or a blog post. Knowing This guide will go over the most common HTML and
HTML and CSS as a marketer saves you time CSS applications for marketers. We’ll review the basics
and allows for customization, optimization, of each language, the differences between the two,
and SEO benefits. and provide resources, tools, and additional training.
Did you know that including keywords in

3
What are Coding Languages?
Coding languages like HTML and CSS, also known as programming languages, are written instructions that
tell software what to do, how to display something, or how to process an algorithm. Common programming
languages are Java, Python, and SQL. HTML and CSS are known as declarative programming languages
that declare what is on a web page and how it should look.

Typically, developers write code, like HTML or CSS, to

communicate with software and tell the page to scroll
in a certain way, display your brand’s colors, place
an image in the center of the page, or do something
when a user takes an action, like clicking on a link to
bring them to another section of the page.

HTML was originally created to distinguish between

structural elements of web pages like paragraphs,
body copy, and headers in a .html file format.
Since it was lacking in design functionality, CSS
was developed as a separate file that would serve
as the design code and exist as a .css file.

Now, HTML and CSS work hand in hand to

deliver beautifully designed web pages with
customization and SEO elements.

4
What is HTML?
HTML, or HyperText Markup Language, uses tags to alter the structure, or how text or objects appear on a web page.
HTML tags help you to organize content, make a page easier to read, or tell search engines what the most important
keywords are using header tags. Here’s an example of a snippet of HTML code for hyperlinked text.

This code would appear like this: click here

The bracket, <, opens the code, and a close bracket
<a href=”https://www.hubspot.com”>click here</a>
</a> closes the code. Without a closing bracket,
the code won’t work properly.

HTML is most often used on web pages, in email,

or in the back end of blog posts. Many content
management systems (CMSs) have two different ways you
can edit content. One way is a WYSIWYG (what you see is
what you get) editor, where you can edit things like font
color, size, and style by selecting from a drop-down menu.
The alternative is an HTML editor, often called the “source.”
You can also edit HTML in a standalone HTML editor.

Later, we’ll go over common HTML codes

to know and how to format them.

5
What is CSS? Image via W3 Schools

CSS stands for Cascading Style Sheets. CSS

tells the software how the HTML on the web
page should look including layout, color
scheme, and formatting. CSS is a list of rules
that are applied to the HTML on the page <p style=”background-color:tomato”>Lorem ipsum </p>
that indicate background colors, fonts, line
spacing, alignment, and more.
In this example, p is the selector, it is selecting where to apply
the style. P means paragraph, so the color “Tomato” will apply
CSS can be implemented on a page using
to the paragraph.
either an internal style sheet or an external
style sheet. For an internal style sheet,
Here is another example of HTML and CSS together:
within an HTML document, you’ll tell the
software what the background color
should be, the fonts, and any other design <h1 style=”color:red”>Intro to HTML & CSS</h1>
elements that apply to a certain section or
the whole page. External style sheets are
linked to the page, but exist as their own
page of design codes.

This is an h1 header tag (indicating that it is the main headline

Here’s an example of an internal CSS style
of the page) that includes a CSS style tag indicating that the
applied to some text (in a handy test editor
color should be red.
where you can try out some code!)

6
HTML vs. CSS Here’s an example of a blog post in HTML without CSS.

HTML is the technical backbone

of a webpage. It provides the basic
structure for the page, like a frame-
work. CSS is the style, which shows
the end user the design, branding,
colors, and fonts that make your
brand identity unique. HTML
without CSS is functional, but not
aesthetically pleasing.

HTML is a way to format and

update a web page’s structure, add
links, add images, create lists, create Source: HubSpot
tables, and alter the text on a page.
CSS updates design elements and
can change a page’s background
color, font color, set an image as
the background, change borders,
margins, change elements on the
page when a user takes an action
(like hiding them), and more.

Here’s the same blog post with a CSS stylesheet applied.

See? Much better.

7
 HTML vs. CSS: Here are the main differences

HTML CSS

1 Code for the structure of web page 1 Code for the style of web pages

2 Codes for mainly individual items and elements 2 Codes for mainly entire pages or individual pages

3 Can exist without CSS 3 Cannot exist alone

4 Easy to learn 4 More technical to learn

5 Can be processed by all browsers, 5 More style choices and options than HTML
limited technical requirements
6 Better style and formatting than HTML
6 Free, lots of available resources/support
7 Free, lots of available resources/support
7 Lacks security features
8 Not uniform between browsers
8 Limited dynamic abilities
9 Lacks security features

10 Can be applied to other XML languages

8
HTML Codes to Know Common HTML Tags for Marketers

HTML tag: <html> Your webpage here </html>

No matter where you write the HTML, there are common
This specifies that the page is an HTML page. It starts
HTML tags that are written the same way, independent of
at the very beginning of the document and the tag is
the editor.
closed at the very end.

Here is the basic layout for an HTML document.

Header tag: <h1> Your header here </h1>
<h2> Your subheadline here </h2>
<!DOCTYPE html>
<html> Header tags are important for blog posts. They
<body> structure your posts and help to draw the reader’s
<h1>This is our main header</h1> eye to the different sections. They are also helpful for
<p>This is our first paragraph</p> on-page SEO purposes, as search engine algorithms
</body> give more weight to keywords that are in your headers.
</html>
Headers can be formatted using CSS to indicate the
style (font, font size, bold/italics, spacing on the page)
for each header tag (h1, h2, h3, etc.)
Every HTML tag begins with open brackets like <html>
and ends with closed brackets </html>. In the above ex-
Hyperlink tag: <a href=”url”>Link text</a>
ample, the first tag denotes to the browser that this is an
Hyperlinks are common in emails, blog posts,
HTML document. The <body> tag indicates body copy,
and other HTML files.
<h1> is Header 1, the main headline of the page, and
<p> means paragraph copy.

9
Common HTML Tags for Marketers

List tag: Paragraph tag: <p> paragraph here </p>

This tag separates a group of text into paragraph format.
Bulleted list
Image tag:
<ul>
<li> first list item</li>
<li> second list item</li> <img src=”image file link” width=”300” height=”200”
<li> third list item</li> alt=”keyword description”>
</ul>

This tag adds an image to your document from an image

Numbered list
file and allows you to change the size and add alt text,
<ol> which helps with SEO. You can add different padding or
<ol> first list item</ol> other attributes using CSS later.
<ol> second list item</ol>
<ol> third list item</ol> Text formatting tags:
</ol> Bold <strong> text here </strong>
Underline <u> text here </u>
Lists help to break up and organize Italicize <em> text here </em>
content. You can use CSS to change the
types of bullets, numbers, or alignment To format font size, font family, font weight, line height, or
within the list. other text styling, you’ll use CSS style tags, or the style for
your entire document will be applied to the text.

10
Social sharing tags: Body tag: <body> your webpage here </body>
This tag, as seen in the full HTML page example
LinkedIn: above, is the container for the contents like
http://www.linkedin.com/shareArticle?mini=true&url=URL lists, paragraphs, hyperlinks, and images on
your webpage.
Facebook:
http://www.facebook.com/sharer/sharer.php?u=URL Line break tag: </br>
This is a really helpful code for formatting. It
By adding your desired URL to the section of this code adds a break in the text and can be used within
that says “URL,” those who click the link will automatically headers, paragraphs, or anywhere on the page
go to LinkedIn or Facebook and see a pre-populated post to move the copy after the break to the next line.
with the link provided, saving your site visitors the trouble
of copying the link to a new post themselves. This helps to
encourage social sharing and gets you more page visitors. <h1> Your header that is really long and
These can be used on blog posts or in emails and attached needs </br> to be broken up onto two
to an icon of the LinkedIn or Facebook logos. lines here </h1>

Title tag: <title> your title here </title>

This tag sets the title for the page that appears Span tag: <span> item </span>
at the top of your web browser. This tag helps to preserve the formatting
of the page. By placing an object in a span tag,
you’ll avoid messing up any of the formatting
surrounding that image or icon.

To test out HTML codes and practice, use

W3Schools “playground” and click “Run”
to test out your code.

11
How to Update Your CSS Inline CSS

Inline CSS, as we mentioned earlier, looks like this:

To update CSS, most developers recommend using
a style sheet for entire documents or your entire site.
This makes it easier on you as a marketer. For example, <h1 style=”color:red”>Intro to HTML & CSS</h1>
if you have a style sheet, you can include CSS that says
that all h1, heading 1, tags should be bold, size 32 font,
sans serif, and the color blue. Then, when you’re writing
Here, the CSS part is the color which is indicated by
your HTML, you’ll simply link the style sheet to the
the “style.” You can update inline CSS by using style
HTML document, then use an h1 tag and those styles
codes and update all design elements including
will be applied.
padding, font family, background colors, margins,
and more.
The other way to update CSS is inline styling.
This method means that within your h1 tag, you’ll add
Use this list of CSS codes to find individual inline
a “style” tag and specify elements like font, weight, and
styling tags.
color. This is a more time consuming method that leaves
more room for error and inconsistency across your site,
but occasionally will be necessary or helpful for singular
pages or singular elements.

Tip: Inline styling trumps style sheets, so if you

make changes, they will overwrite any master
stylesheet styling.

12
External style sheet

To update CSS using an external style sheet, you’ll create Here’s what a .css external stylesheet looks like.
a separate .css file with the desired styling for elements or
groups, then link the .html file with the .css file.
body {
Here’s how to link an external style sheet to an HTML file. background-color: lightblue;
}

<head>
h1 {
<link rel=”stylesheet” type=”text/css”
color: navy;
href=”thisisyourcssfile.css”>
margin-left: 20px;
</head>
}

This code is telling your HTML file to associate your

CSS file to this page and goes in the header of your When you link this style sheet to an HTML document,
HTML document. the background will be light blue, and all h1 tags
will be navy and indented by 20px (pixels.)
Tip: The header of your HTML document is not the
same as your h1, h2, and h3 tags. Header tags within When there are multiple CSS codes, the order
the document denote headings of sections but the of priority that the software will choose is:
<head></head> tag denotes the header of the entire
webpage. This is where you can include things like
1 Inline styling
Google Analytics tracking tags and other software 2 External style sheets linked in the header
trackers to be able to capture information from
the webpage. 3 Browser default style

13
 HTML & CSS: What to Avoid
When it comes to HTML and CSS there are a few major things that developers will
tell you are big no nos. Since CSS stylesheets can apply to many pages on your site,
beware of making major changes to something that may cause changes sitewide.

Here are HTML and CSS tips on what to steer clear of when it comes to code.

HTML CSS

1 Forgetting a close bracket. For every open 1 While sometimes it makes sense to do inline CSS
bracket like an open paragraph <p> there styling and applying a style to an individual heading
must be a matching close bracket, </p>. or paragraph, usually, it is easier to make a style sheet
for the entire web page with the master styling for all
2 Always include alt tags for images. These h1, h2, h3 tags, backgrounds, margins, padding, and
help with SEO optimization and to describe other styled elements.
what’s in the image to search engines.
2 When creating CSS style sheets, group sections
3 Don’t use line breaks to create lists, accordingly and make sure everything is well-
use the list tag outlined earlier. documented.

4 Don’t forget your DOCTYPE or you’ll 3 Don’t update a style sheet if you don’t know how
risk having issues with browsers not many pages you’ll affect. Check with your developers
recognizing the document type. They may if you have questions as you could potentially break
not be able to properly read your code. pages on your site, making them unreadable.
14
RESOURCES & ADDITIONAL LEARNING

Courses, Lessons, and Books to Explore

Now that you know the basics of HTML and CSS, Stack Overflow is an online community for
you may be interested in learning more. It’s not as developers with helpful questions and responses.
scary as you may have thought, right? Here are our Ask these smarty pants for advice or help when
favorite courses, lessons, tutorials, and communities learning to code or when you encounter issues.
to help you learn to code.

Codeacademy offers courses in all coding languages

from early beginners to advanced experts. They
offer free courses as well as a paid subscription that <conclusion>
includes more support and feedback from their pros. These tools will help your marketing team to
become more independent, but with great
W3Schools.com has code simulators and a practice power comes great responsibility. Many
environment to test your code along with templates marketing and development teams join forces
for coding structures for both HTML and CSS. to create a master list of HTML/CSS codes that
are available for marketers to edit, and those that
freeCodeCamp is a free (as the name suggests) need to be avoided. Try your hand at updating
resource with over 5,000 coding tutorials. an HTML email and designing a stellar email
newsletter, add social sharing links to your next
HTML Hacks for Marketers is a guide with HTML blog post, or optimize your entire blog library for
codes and tutorials for marketers from HubSpot. SEO using keyword-rich header tags, updating alt
text on images, and using top-notch on-page SEO.
Learn to Code HTML and CSS by Shay Howe is a Remember—what gets opened must get closed!
well-reviewed book on Amazon that gets into the Don’t forget close brackets!
nitty gritty of learning HTML and CSS.
</conclusion>
15
16