Online Marketing Lesson 15: HTML and CSS

OnlineMarketingBanner_2

HTML, which stands for HyperText Markup Language, is the basic language of the Internet. It is used to describe the structure of text and other media inside web pages.

CSS, which stands of Cascading Style Sheets, is the language used to describe the style and formatting of web pages.

If you are going to work on the Internet, you need to be familiar with the basic principles behind the HTML and CSS languages, and that is what we will cover in this lesson.

History of HTML

Text articles, audio, video and digital images are among the many different media that people consume on the Internet every day. All that information, however, needs to have a specific structure, so that all web pages around the world are accessible to all Internet users, regardless of their computer device or browser. That is the purpose the HTML markup language.

Developed by Tim Berners-Lee and Dan Connolly in 1989, HTML began as a standard set of “markup tags” that web page creators could use, and that would be consistently interpreted by browsers and other clients.

The first HTML specifications contained 22 elements, 13 of which are still in use today.

HTML Document Structure

HTML markup consists of several key components, including elements, attributes, data types and references.

The desire to keep HTML a simple markup language means it takes surprisingly few basic tags to achieve a working HTML document. Technically, all an HTML document needs is the following:

<html>
<head>
<title>Title of the Page</title>
</head>
<body>
</body>
</html>

The <html></html> tags declare that this is an HTML document.
The <head></head> tags are where most meta data about the document goes.
The <title></title> tags wrap around the title of the page.
The <body></body> tags wrap around the bulk of the displayed content of the page.

Basic HTML Markup Elements

When authoring an HTML document, there are certain tags that you need to use in order to display your content correctly. Some common examples are:

Titles:

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

Paragraphs:

<p></p>

Links (anchors):

<a href=”http://example.com”>anchor text</a>

Bold:

<b></b> or
<strong></strong>

Italics:

<i></i> or
<em></em>

Line Break:

<br />

Horizontal Rule:

<hr />

Division (the div tag is one of the most important elements in modern web design):

<div></div>

Span (for inline elements like text):

<span></span>

Table:

<table></table>

Table Header:

<th></th>

Table Row:

<tr></tr>

Table Cell:

<td></td>

This is just a small sample of the many tags that can be used from within an HTML document. For more information on HTML markup tags, visit w3schools.com/tags/

Notice that HTML tags or elements will usually have two parts: an attribute and the content. Attributes are inserted inside the start tag, while the content goes between the tags. Consider the following code for a paragraph:

<p class=”quote”>I really like chocolate</p>

The class=”quote” is the attribute of <p> tag, and it is used to give further instructions about the styling or formatting of that element. The “I really like chocolate” part, on the other hand, is the content.

Styling HTML Elements

Before the widespread adoption of CSS, HTML was the primary source of both structure and style. Using a combination of inline styling and attribute tags proved to be an extremely inefficient form of formatting HTML documents, but it certainly paved the path to modern web design standards.

As an example, if a website author wanted all the text inside a certain paragraph to be in 14px font size, he could use inline styling to achieve that:

<p style=”font-size: 14px;”>This text will be 14px font size</p>

Likewise, the author could have used the font attribute tag:

<p><font size=”14”>This text will be 14 point font size</font></p>

It is important to highlight that most attribute tags, like the font tag, have been deprecated and are considered unacceptable in modern web design.

Introduction to CSS

CSS is a stylesheet language used to describe the presentation of markup documents. It is basically a way for modern web browsers to apply defined styles and formatting to HTML elements, separating the structure from the style.

As is implied in the name, CSS can “cascade” down through multiple CSS documents, with each subsequent document’s declarations taking precedence.

CSS priority is determined by the order of the CSS document call. Documents called later in the HTML document (further down) take priority, with inline styles taking ultimate priority.

Also, it’s worth noting that any tags that are “nested” within another set of tags will, by default, apply the styles of the parent tags.

For instance, if you applied a font size of 14px to the “body” element from within your stylesheet, that font size will be applied to all elements that are nested within the opening and closing “body” tags. The only exception to this is when the web browser applies default styles to certain elements. For instance, most browsers will apply a blue color and an underline to all <a></a> elements, even if you’ve declared another color to its parent tag.

CSS Syntax

CSS syntax is very simple. In order to apply a style to an HTML element, you simply declare the element you want to style and declare the styles you want to apply. For example:

h1 {
font-weight: bold;
font-size: 18px;
color: #000000;
}

You must end each style declaration with the semicolon, and you must wrap the collective styles in curly braces. Other than that, there are very few requirements for the syntax of CSS style declarations.

Preparing HTML for CSS

As mentioned before, inline styles have largely been abandoned in modern web design. By separating structure from style, it becomes possible to govern all the styling and formatting parameters of an entire website from a single CSS file.

But in order to take advantage of these benefits, you must prepare your markup to link the HTML to the CSS.

First, you must tell the browser to use specific CSS documents. Although there are several ways to do this, here are the two most popular:

Within the <head></head> section of the HTML, include either of the two following sections of code:

<style type=”text/css” media=”screen”>
<!– @import url(http://yourdomain.com/path/style.css); –>
</style>

Or

<link rel=”stylesheet” href=http://yourdomain.com/path/style.css type=”text/css” media=”screen” />

Once you’ve done this, you can start applying styles to the elements from within the stylesheet file. For example:

body {
font-size: 12px;
color: #000000;
background: #FFFFFF;
}
p {
margin-bottom: 10px;
}
h1 {
font-size: 18px;
font-weight: bold;
}

While styling tagged elements is useful, the real power of CSS comes with the ability to identify tags individually. You can do this by either giving the tag an ID or a CLASS. The best way to explain it is to demonstrate it with an example:

In the HTML file:

<h1 class=”pagetitle”>This will look unique</h1>

In the CSS file:

h1.pagetitle {
font-size: 25px;
}

or in the HTML file:

<h1 id=”pagetitle”>This will look unique</h1>

and in the CSS file:

 h1#pagetitle {
font-size: 25px;
}

There isn’t much difference between ID and CLASS, other than the fact that an ID can only be used once per page. You can’t have two elements with the same ID on a single page. However, you can use a CLASS name on as many elements as you wish.

Advanced CSS

The combination of HTML and CSS really shines when you use it as a means of building the layout of your site. In order to do that, you must use the division tag (div) together with CSS ID and CLASS names.

For the most part, divs should be used as “block level elements.” That’s just a fancy way of saying sections of your website that are block shaped. These elements, together with CSS styling, can be arranged on the screen in any way you want.

Once again, this is best understood using an example:

The HTML:

<body>
<div id=”container”>
<div id=”header”>
<a href=”http://example.com”>anchor text</a>
</div>
<div id=”content”>
<h1>This is the Title</h1>
<p>This is a paragraph</p>
</div>
<div id=”sidebar”>
<h3>This is a title</h3>
<p>This is a paragraph</p>
</div>
<div id=”footer”>
<p>Copyright Notice</p>
</div>
</div>
</body>

The CSS:

body {
text-align: center;
}
#container {
width: 960px;
margin: 0px auto;
}
#header {
width: 960px;
height: 100px;
}
#content {
width: 600px;
float: left;
}
#sidebar {
width: 360px;
float: right;
}
#footer {
clear: both;
width: 960px;
}

This code gets you a very simple layout. The main container is 960px wide, centered on the user’s screen, with a header at the top, content on the left, sidebar on the right, and footer below.

These basic building blocks are the foundation for all CSS websites, and when you break it down to the fundamentals, you can see that working with CSS and HTML is very simple. All changes are made by locating the element in the HTML markup, finding the corresponding element style declaration in the CSS file, and then editing the right line of code.

How This Applies to You

Even if you don’t want to be a web designer, you need to know the basics of HTML and CSS. Internet marketing and online business gravitate around websites, and you need to understand how those websites work behind the scenes.

If you are a blogger, for example, you will inevitably need to perform some changes in your template. Hiring a web designer every time you need to align a block or text or change the color of your links is not an option.

After going through this lesson you should be able to easily locate elements that you want to style within the HTML markup, find the corresponding classes in the CSS file, and edit them. Try to perform some of the following changes to exercise your knowledge:

  • Change fonts (type and size)
  • Change colors
  • Change element positions
  • Change element sizes (width or height)
  • Change backgrounds and images

Useful Resources

w3schools.com: If you want to learn more about HTML and CSS, check out this website. It has a wide range of tutorials for all learning stages. All the content is free, easy to follow, and it also includes examples and illustrate most of the concepts.

HTML.net: Another learning resource if you are interested in expanding your knowledge about HTML and CSS. The advantage of this site is that it has a basic set of 15 lessons that will guide you through all the basic elements of the markup language.

w3.org: This is the official website of the World Wide Web Consortium, an organization that develops specifications, guidelines, and standards for the web. It was created in 1994 by Tim Berners-Lee to make sure that the World Wide Web would grow efficiently and sustainably.

validator.w3.org: This validator will check the markup on any website that you specify and it will report if the code is valid or if it contains errors. It also lists all the errors and how you can fix them, so it is useful to make sure that your websites and pages will be interpreted correctly by different browsers.

Action Points

  1. Review the definitions of HTML and CSS and make sure to understand their purposes and differences.
  2. Create a simple HTML page using a text editor in your computer. Use the basic HTML document structure described in this lesson, and make your HTML page display “Hello World!” in the browser.
  3. If you already have a website, explore the HTML markup and CSS file, trying to understand how the two are connected.
  4. Play around with your HTML and CSS files, performing some of the basic style changes described in this lesson. Trial and error is often times a good way to learn how things work.
  5. Remember to always back your files (HTML, PHP and style sheets) before implementing any change.

Navigation Links

Previous Lesson: WordPress Resources and Plugins

Next Lesson: Designing for Profits and Usability