An In-depth Introduction To HTML & CSS

Jan 23 2016

Want to learn the basics of HTML & CSS? Here is an in deoth introduction and a tutorial to create your own web page as well!

If you are living in the modern day computer world, your second best friend is probably – let me guess – Google, right? Just kidding! But I am sure you have an online presence of some kind – a social media account, a personal blog or maybe even a business!

We spend hours online – reading blogs, watching videos, scrolling through Pinterest, you name it! Ever wondered what goes on behind the scenes of those websites you browse? Today’s post gives you a brief introduction on how these websites are created and how to make them look beautiful!

Every website that you visit usually consists of multiple web pages. Every web page is made up of three layers – Content Layer, Presentation Layer and Behavior Layer – that work together to create a specific user experience. HTML handles the content layer of the web page, CSS provides for the presentation layer and the behavior layer is handled by Javascript!

Want to learn the basics of HTML & CSS? Here is an in depth introduction and a tutorial to create your own web page as well!


Even if you do not build websites, knowing the basics of HTML and CSS is an incredibly useful skill to have in today’s internet world. So if you are intimidated by the technical jargon, code etc., don’t worry. We will dig into the fundamentals of HTML and CSS and understand how they work together. We will also build our own web page! Excited? Let’s go!


HTML stands for HyperText Markup Language. Just as we, humans, use languages to communicate with each other, HTML is a language of the internet! Web browsers like Google Chrome read and interpret HTML to render the information you request for on the web.

HTML is essentially the building block of every website. It defines the structure of every web page and its content.

Common HTML terms:

While getting started with HTML, it’s important to understand a few common terms associated with the language:

Elements: These are designators that define the order and structure of the content within a web page. <span> , <p> , <div>, <h1>, <title> etc. are all examples of basic HTML elements. Each HTML element is enclosed within a start and end tag as shown below.

Element: <div> … </div>

Tags: The use of angle brackets around an HTML element creates what’s called an HTML tag. HTML tags most often occur in pairs of start and end tags.

A start tag indicates the beginning of an HTML element and looks like this:

Start Tag: <span>

An end tag indicates the end of an HTML element and consists of a forward slash as shown below:

End Tag: </span>

Attributes: We use attributes to provide additional information about an HTML element. Some common attributes include id, class, src and href. Attributes are defined within the start tag of an element after its name. Each attribute is defined by a name and a value. For example, the element below includes a href attribute as shown below:

<a href=“”> Google Search Engine </a> 


CSS stands for Cascading Style Sheets. CSS defines the visual style and appearance of the web pages. So if you see italicized text or a background image on a web page, it is CSS that is doing the trick!

Common CSS terms:

Here are some of the common CSS terms that are useful to know:

a {
color: #484848;
font-size: 14px;
font-weight: 300px;

Selectors: A selector designates the exact HTML elements to target for styling. Selector generally targets all HTML elements of one type directly or a specific instance of an element, identified by an attribute such as id or class. The styles to be applied to the targeted element are enclosed within curly brackets following the selectors. For example, the selector in the above code is targeting all the elements.

Properties: A property determines the styles that will be applied to an HTML element. There are several properties that are available for use. Some of the common properties are font, background-color, size and color. In the example above, we are using the color, font-size and font-weight properties to style the element.

Values: Each property has a value associated with it. The value defines the behavior of the property. For example, the value 14px defines the behavior of the font-size property.

What is the difference between HTML & CSS?

Even though very often HTML & CSS are used together in the same context, they are far from being the same. While HTML defines the structure of the web page, CSS defines the style and appearance.

To make this easier to understand, let’s compare a website to a house. HTML is like the bricks that make up the house while CSS is the paint and decor that makes the house presentable and beautiful.

A webpage can exist without CSS, but never without HTML.

Develop a simple web page using HTML & CSS

Now on to the exciting part, let’s build our own web page. It is a super simple and fun activity!

You will need:

A Text Editor to write the code for your web page. Some of my favorite code editors are Sublime Text, Notepad++ , Brackets.

A Web Browser to view your web page. Anything from Google Chrome to internet explorer will do.

3 – steps to creating your own web page:

Step 1: Create a folder in your documents and name it, I am going with MyWebPage1.0 for mine.

Step 2: Create a text file inside the folder and paste the following HTML code in it. Name it as Webpage.html and save as an HTML file type.

Step 3: Next, create another text file inside the folder and paste the following CSS code in it. Name it as style.css and save it as a CSS file type.

That’s it, now double click on your HTML file to run it on your web browser. Here’s a screenshot of the webpage you can expect to see on your browser.

Want to learn the basics of HTML & CSS? Here is an in depth introduction and a tutorial to create your own web page as well!

There you go, you’ve created your first web page! Feel free to play around by changing the HTML and CSS code to alter your web page. The best way to learn HTML and CSS is to really just experiment and have fun exploring the various possibilities that they offer.

Are You Interested In Learning How To Code? I’d Love To Hear From You!

  • I’ve been dabbling more and more with HTML and CSS so this post came just in time! I was wondering, how are you embedding those blocks of Github code? I’ve heard of Github but I’m still not too familiar with it.

    • Hi Monica! Sorry for the late response. You can create a public gist at and embed the javascript code in the WordPress editor. Let me know if this works for you!

  • I’ve been wanting to go more in depth on CSS and HTML for a while. Believe it or not, when I was about 10, my mom gave me a book on HTML and a book on Photoshop (version 5 bahaha) for my birthday, per my request. I built rudimentary websites with the help of Dreamweaver–I couldn’t quite code from scratch. 🙂 I’ve always wanted to go more into depth on coding, specifically for blog purposes, but need to come up with both the time and the learning resources to do so…

  • Thanks for this short refresher. I am just beginning to build my own theme for my website. It is now bookmarked for me.

  • I started my blog in order to learn more about coding and website development! So far I’ve learned about registering a domain, choosing between self-hosting and third party hosting, and dabbling into the difference between RGB vs. Hex color coding. Can you recommend a website where I can learn coding applicable to blogging? I’m not sure where to begin.

    • Hi Halee 🙂 Yes of course! Which platforms are your specifically looking at? Blogger, wordpress, squarespace? Here are a few resources to get you started:

      – You can learn basic to advanced HTML & CSS with hands-on experience at Dash. Try working on one of their projects when you have time.

      – Smashing magazine has some of the best information on all web designing elements.

      – is another awesome resource.

      Please let me know if I can help any further Halee 🙂

      • I use WordPress. As of now, I am using a stock theme for my blog template and I am unable to customize the coding. The only area I am able to practice coding would be in widgets placed in the sidebar or bottom of the page. Which coding language is best for widgets and eventually customizing my blog on WordPress?

        I really enjoy your blog. You have a lot of useful information!

  • This is so freaking cool of you. So many people want to learn more about HTML and CSS, so it’s really awesome to have an experienced person like you sharing your knowledge. You rock, lady!

  • I can figure out how to make any changes or updates to the current html template that I have but as far constructing it completely from scratch I wouldn’t know where to begin. A webinar on this would be really helpful.

  • This is extremely helpful! Learning how to code is on my bucketlist for this year.



Get the ultimate guide to iPhone photography apps for FREE! Download Now
Hello. Add your message here.