An Introduction to HTML and CSS

introduction to html and css image

Today I am going to give you a brief overview of HTML and CSS, the basic building blocks of the web. If you want to enhance your web skills for whatever reason: you want a job in this industry, you want to learn more about web design or you are a small business owner looking to stay informed, you should start by learning HTML and CSS.

There are a lot of different text editors and free tools that you can use to build HTML and CSS. Something as simple as notepad or textedit, if you use a mac, will work for fine for creating web pages. In fact, it is in your best interests to learn to hand code everything, like you do with a simple text editor, because you learn more by having to write out all of the details.

HTML Elements

So let’s start with the typical structure of an example HTML web page:

Figure 1.

HTML Example 1

<!DOCTYPE html>
<html>
<head>
<title>HTML Is Essential</title>
</head>
<body>
<h1>HTML Builds Websites</h1>
<p>Html Builds websites while CSS handles styling and layout.</p>
</body>
</html>

The first line is what we call the doctype declaration:

<!DOCTYPE html>

The doctype declaration is an instruction to the web browser telling it which version of html the page is written in.

Next is the opening HTML element:

<html>

The HTML tag is the one tag that is mandatory to have an html page. All tags must be closed when they have served their purpose. If you see down at the bottom of HTML Example 1 (See Figure 1), since the HTML tag was the first one opened, it is the last one closed.

The top section of our HTML is the head element, noted by the opening and closing head tag:

<head>
<title>HTML Is Essential</title>
</head>

The head element is a container for metadata, internal style sheets(which I will demonstrate here in a minute), and other declarations. One example of metadata shown here is the title tag,  which is used as the title in search engine listings for a web page.

The next element is the body element as noted by the body tag:

<body>
<h1>HTML Builds Websites</h1>
<p>Html Builds websites while CSS handles styling and layout.</p>
</body>

The body element contains the main content of our page. Some content elements that may be found within the body section and are shown in our example are the <h1> heading and a <p> paragraph. An <h1> heading is the highest in rank and is an important part of search engine optimization. It is also the largest in size. You can also have several h2s, h3s, h4s and so on which range from larger to smaller, but just one h1 heading. The paragraph element is perfect for a paragraph of text.

Those are the basic starting elements of an HTML web page. There are many more elements that I haven’t covered which you should check out at the resources provided at the end of this article.

So now we that have our HTML, let’s see what it looks like in the browser:

VIEW EXAMPLE 1

It looks okay but it is off to one side and it’s all black and white. How do we go about making it look lined up right and add some color? The answer is CSS.

Styling With CSS

So there are three ways of implementing CSS: inline CSS, internal style sheets and external style sheets.  I am going to show you all three ways.

Inline CSS

The first way of inserting css is with inline css. With inline css you style the element right there in the element itself:

Figure 2.

Inline CSS Example

<!DOCTYPE html>
<html>
<head>
<title>HTML Is Essential</title>
</head>
<body>
<h1 style=”text-align:center; color:#237008;”>HTML Builds Websites</h1>
<p style=”text-align:center; background-color:#; color:#ffffff;”>Html Builds websites while CSS handles styling and layout.</p>
</body>
</html>

We use the style tag to create inline css.  So what if I want to add a green color to my heading and align it to the center of the page?  I can add the following inline css to my <h1> heading like so:

style=”text-align:center; color:#237008;”

Notice have to do a semicolon after every attribute and that colors have a 6 digit code, called a hex code.

Next we will do the same with our paragraph element, but add a little more flair to it with a background color and make the text white for good contrast:

style=”text-align:center; background-color:#653232; color:#ffffff;”

Remember when you are putting text on a color background to always have good contrast, meaning light text on dark background or vice versa.

So now that we have added our inline css, let’s see what our page looks like again:

VIEW INLINE CSS EXAMPLE

It looks a lot different doesn’t it?  Notice how the background color spans the entire width of the screen.  That’s because the browser is showing the paragraph element to be the full width of the screen.  There are a couple of ways we can fix that but we’ll save that for another article.  But that gives you a good idea of how you can quickly and easily lay out and style a page using inline CSS.

Internal Style Sheets

The second method used for inserting css is with an internal style sheet:

Figure 3.

Internal Style Sheet Example

<!DOCTYPE html>
<html>
<head>
<title>HTML Is Essential</title>
<style>
h1 {
text-align:center;
color:#237008;
}
p {
text-align:center;
background-color:#653232;
color:#ffffff;
}
</style>
</head>
<body>
<h1>HTML Builds Websites</h1>
<p>Html Builds websites while CSS handles styling and layout.</p>
</body>
</html>

As you can see in the head section of our HTML code we have created a new section called “style”:

<style>
h1 {
text-align:center;
color:#237008;
}
p {
text-align:center;
background-color:#653232;
color:#ffffff;
}
</style>

The purpose of the style element is to provide an area for an internal style sheet or a list of css styles to be used for the current page. You can see that the structure and layout of this type of css setup is different but really we are saying the same thing just in a different place. If we view this example in the browser you can see that we end up with the same result:

View Internal Style Sheet Example

External Style Sheets

A third method of applying CSS is by using an external style sheet:

Figure 4.

External Style Sheet Example

<!DOCTYPE html>
<html>
<head>
<title>HTML Is Essential</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>
<h1>HTML Builds Websites</h1>
<p>Html Builds websites while CSS handles styling and layout.</p>
</body>
</html>

With an external style sheet you create a css file, with the file extension .css:

Figure 5.  

Example CSS File

@charset “utf-8”;
/* CSS Document */

h1 {
text-align:center;
color:#237008;
}
p {
text-align:center;
background-color:#653232;
color:#ffffff;
}

This CSS file contains all of your css code. The browser knows to use this file because you add a declaration in the head section of your page. This CSS declaration points to that CSS file and tells the browser to use it to style the elements contained within it.

If you look at the head section you can see that we have a declaration pointing to a file called style.css which is our external style sheet:

<link rel=”stylesheet” type=”text/css” href=”style.css”>

Comparing our external style sheet to inline CSS and internal style sheets,  we can see that again there are some slight differences from our other two methods but we are using the same styling just using a different format. Again, if we test it in the browser it looks the same as our previous examples:

View External Style Sheet Example

So that is just an introduction to some of the basics of HTML and CSS.
I recommend that if you want to learn more about HTML and CSS that you check out two free resources on the web:

The first is W3schools. This resource has been around for years and it is relatively well updated. You can learn HTML, CSS as well as other advanced programming languages.

Visit W3Schools

The second is Khan Academy. They provide in depth tutorials on HTML and CSS and like W3schools they do a really good job of mastering one skill before you progress further through the training.

Visit Khan Academy

If you want to make web pages or have a web based career one of the best starting points is learning HTML and CSS.  Hopefully you found this article informational and can use it as a resource for learning web design.

Add a Comment

Your email address will not be published. Required fields are marked *