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!


7 comments

  1. I have no background on CSS but I try to figure it out. Your post is most helpful in providing the basics on HTML and CSS.

    ReplyDelete
  2. I only know simple HTML. Actually, its good to have knowledge about this because its helpful for bloggers.

    ReplyDelete
  3. I've been trying to learn this for so long! And I've kinda learnt some while customizing my themes etc but it's still very very very hard and makes your brain hurt. Hahaha!

    ReplyDelete
    Replies
    1. Haha, some codes DO! I'm still learning, and one part I'm kind of struggling with is adding responsive code to everything. Hahaha.

      Delete
  4. I really look forward for more. I never like HTML/CSS before but they eventually become an indispensable knowledge.

    ReplyDelete
  5. That's in essence my daily job. Handling codes and immersing myself into the style.css sheet all day. Very insightful article.

    ReplyDelete

Copyright © The Indy Miss