HTML/CSS 101: Part 1 - Introduction

Saturday, October 24, 2015

Have you ever wanted to spice up your blog and make it completely you, but have no idea how?

I've always wanted to customize my blog theme but I had zilch knowledge on making it happen! It's incredibly frustrating when I know how I want my blog/website to look like but don't know how, so I made it my goal to learn the basics and move forward from there. (Note: I'm not claiming to be an expert. What you read in this series will be based on my self-study and experience coding my blog and other people's.)

Before we dive into the coding itself, it's important to know what HTML and CSS are and what their functions are.

What is HTML?

HTML (short-form for Hyper Text Markup Language) is a markup language for describing web pages. HTML documents are described by HTML tags, and each tag describes a specific content.

You'll notice that forms of the word describe are repeated in the definition, and it's because that's exactly what it does. It paints the page's elements - placement, content, sections, navigation, link addresses, and others. It's the interpretation of code you see in a site without the formatting, which is where CSS comes in.

What is CSS?

CSS is short for Cascading Style Sheets and can be applied to HTML in three ways - inline, internal, and external.

Inline - uses a style attribute within HTML elements
Internal - uses a style element in the HTML head section
External - uses one or more external CSS files

In simple terms, CSS is the custom formatting you can apply to an HTML tag. This is where you can add color, borders, and practically everything you want to make your site/blog even more personal.

Now, let's get started!


What does a basic HTML document look like?

HTML documents all have this basic format:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

Here's a brief run-through of what these mean:

DOCTYPE defines the document type to be HTML 
<html> and </html> describes your HTML document
<head> and </head> gives details about your document
<title> and </title> gives the title for your document
<body> and </body> describes what you see on the page
<h1> and </h1> defines the heading
<p> and </p> describes a paragraph

You'll notice that they have a start < and end /> tag - anything inside will take on the description given by tag names.

The simplest examples would be styling text bold, italicized, & underlined. Take the following:

<b>Make this bold.</b> is translated into Make this bold. 
<i>Make this italicized.</i> is translated into Make this italicized. 
<u>Make this underlined.</u> is translated into Make this underlined.

HTML keywords, also called tag names, are enclosed in angle brackets. It is common for these to come in pairs as they determine where a certain keyword ends. End tags are, therefore, very important.

This is just the introduction to HTML/CSS styling, so keep posted for the next part.

What would you like me to include in the next parts? Leave a comment and I'll do my best to deliver. Ciao!


Copyright © The Indy Miss